Ficha 02 · CSS, layout e responsivo

Parte I · CSS base

Exercício 1 · Especificidade (15 pts)

Dado este CSS, que cor terá o parágrafo <p class="aviso" id="topo">?

p { color: black; }
.aviso { color: orange; }
#topo { color: red; }
p.aviso { color: green; }

a) Qual a cor final? Justifica com a especificidade.

b) Como evitar guerras de especificidade num projecto grande?

Exercício 2 · Variáveis CSS (15 pts)

Cria um pequeno design system com variáveis CSS para cor primária, cor de texto, espaçamento base e raio de borda. Aplica num botão.

Parte II · Flexbox

Exercício 3 · Navbar (20 pts)

Cria uma navbar com logo à esquerda e links à direita, alinhados verticalmente ao centro, usando Flexbox.

<nav class="navbar">
  <div class="logo">Aulify</div>
  <ul class="links">
    <li><a href="#">Início</a></li>
    <li><a href="#">Recursos</a></li>
    <li><a href="#">Preços</a></li>
  </ul>
</nav>

Exercício 4 · Centrar (10 pts)

Escreve o CSS para centrar um elemento perfeitamente (vertical e horizontal) no ecrã inteiro.

Parte III · Grid

Exercício 5 · Galeria responsiva (20 pts)

Cria uma grelha de cards que: - Tem colunas de mínimo 250px. - Preenche automaticamente o espaço. - Tem 20px de espaço entre cards. - Não usa media queries.

</div>

## Parte IV · Responsivo e a11y

### Exercício 6 · Mobile-first (10 pts)

Reescreve este CSS desktop-first para mobile-first:

```css
.menu { display: flex; }
@media (max-width: 768px) {
  .menu { display: none; }
}

Exercício 7 · Auditoria a11y (15 pts)

Identifica 5 problemas de acessibilidade neste código e corrige:

<div onclick="abrir()">Abrir menu</div>
<img src="grafico.png">
<input type="text" placeholder="Email">
<a href="#" style="outline: none;">Link</a>
<p style="color: #aaa; background: #ccc;">Texto importante</p>