Ficha 01 · Fundamentos, Flexbox/Grid e especificidade

Parte I · Verdadeiro ou Falso (30 pts)

Indica V ou F e justifica.

1. Com box-sizing: border-box, a width inclui o padding e a border. (5 pts)
2. Um selector de id tem menor especificidade do que um selector de classe. (5 pts)
3. O Flexbox é mais adequado para layouts bidimensionais do que o Grid. (5 pts)
4. A unidade rem é relativa ao tamanho de fonte do elemento raiz (html). (5 pts)
5. As custom properties (variáveis CSS) podem mudar em tempo de execução, por exemplo numa media query. (5 pts)
6. Em caso de empate de especificidade, a regra que aparece por último no CSS prevalece. (5 pts)

Parte II · Escrever CSS para layouts (35 pts)

Exercício 1 · Barra de navegação (Flexbox) (15 pts)

Escreve o CSS para uma .navbar que: tenha o logótipo à esquerda e os links à direita, alinhados verticalmente ao centro, com espaço entre eles e padding.

<nav class="navbar">
  <div class="navbar__logo">Logo</div>
  <ul class="navbar__links"> ... </ul>
</nav>

Exercício 2 · Galeria responsiva (Grid) (20 pts)

Escreve o CSS de uma .galeria que mostre cards numa grelha responsiva: tantas colunas quantas couberem, cada uma com mínimo 200px, com espaçamento. Sem media queries.

Parte III · Corrigir problemas de especificidade (35 pts)

Um colega não consegue mudar a cor de um botão. O CSS é:

#conteudo .botoes a.botao { color: white; }   /* regra antiga */

.botao { color: blue; }                        /* nova regra que não funciona */

a { color: black !important; }                  /* regra global */

<div id="conteudo">
  <div class="botoes">
    <a href="#" class="botao">Clica</a>
  </div>
</div>

a) Explica por que .botao { color: blue } não tem efeito. (10 pts) b) Explica o efeito do !important na última regra. (10 pts) c) Propõe uma solução limpa (sem usar !important) para o botão ficar azul. (15 pts)