Ficha 01 · Fundamentos, Flexbox/Grid e especificidade · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

Fundamentos CSS
Flexbox/Grid
Especificidade

Parte I · Verdadeiro ou Falso (30 pts)

Indica V ou F e justifica.

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

V — Com border-box, a largura declarada já inclui padding e border (mais previsível).
F — O id tem maior especificidade (100) que a classe (10).
F — O Grid é para 2D (linhas + colunas); o Flexbox é para 1D (um eixo).
V — rem é relativa à fonte da raiz (html), tipicamente 16 px por defeito.
V — As custom properties existem em runtime e podem ser redefinidas (media query, classe, JS) — ideal para temas.
V — Com a mesma especificidade, a ordem decide: a última ganha.

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>

.navbar {
  display: flex;
  justify-content: space-between;  /* logo à esquerda, links à direita */
  align-items: center;            /* alinhamento vertical ao centro */
  padding: 1rem 2rem;
}
.navbar__links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

(Avaliar: display:flex, justify-content: space-between, align-items: center, gap nos links.)

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.

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Explicação: - auto-fit cria tantas colunas quantas couberem. - minmax(200px, 1fr): cada coluna tem mínimo 200px e cresce igualmente. - A grelha adapta-se sozinha à largura, sem media queries.

(Avaliar: grid + repeat(auto-fit, minmax(...)) + gap. auto-fill também aceite com nota da diferença.)

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)

a) Porque .botao { color: blue } falha (10 pts) - .botao tem especificidade (0,0,1,0) = 10. - #conteudo .botoes a.botao tem (0,1,2,1) = id + 2 classes + 1 tag = muito mais específico. - Logo, a regra antiga vence a nova, e o texto fica branco — não azul. - (Além disso, há o !important global, ver b.)

b) Efeito do !important (10 pts) - a { color: black !important; } força preto em todos os links, sobrepondo-se à especificidade normal. - Mesmo a regra antiga (sem !important) perde para esta; o botão tende a ficar preto. - !important cria conflitos difíceis de gerir — má prática.

c) Solução limpa (15 pts)

Melhor abordagem — reduzir especificidade e remover !important:

/* remover a regra antiga superespecífica e o !important global */

.botao { color: blue; }

Se não se puder editar a regra antiga, igualar/ultrapassar a especificidade sem !important, mantendo-a baixa e plana — idealmente refactorizar: - Apagar a { color: black !important; }. - Substituir #conteudo .botoes a.botao por .botao.

Princípio: manter especificidade baixa (usar classes), evitar ids e !important. A solução correcta é refactorizar, não acrescentar mais especificidade.

(Avaliar: identificação correcta da especificidade, papel do !important, e solução que reduz especificidade em vez de a aumentar.)