Ficha 02 · CSS, layout e responsivo · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

Aplicar CSS
Usar Flexbox e Grid
Construir responsivo
Verificar acessibilidade

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?

a) Vermelho. Especificidades: - p → 0,0,0,1 = 1 - .aviso → 0,0,1,0 = 10 - p.aviso → 0,0,1,1 = 11 - #topo → 0,1,0,0 = 100 ← vence

ID tem peso 100, muito acima de classes.

b) Estratégias: - Não usar IDs para estilo (só para JS/âncoras). - Metodologia BEM (.bloco__elemento--modificador). - Utility classes (Tailwind) ou CSS modules. - Evitar !important. - Manter especificidade baixa e plana.

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.

:root {
  --cor-primaria: #6366f1;
  --cor-texto: #1a1a2e;
  --espaco: 16px;
  --raio: 8px;
}

.botao {
  background: var(--cor-primaria);
  color: white;
  padding: var(--espaco) calc(var(--espaco) * 1.5);
  border: none;
  border-radius: var(--raio);
  font-size: 1rem;
  cursor: pointer;
}

.botao:hover { opacity: 0.9; }
.botao:focus-visible { outline: 2px solid var(--cor-texto); }

Mudar --cor-primaria num sítio propaga a todo o site.

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>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.links a {
  text-decoration: none;
  color: inherit;
}
.links a:hover { color: #6366f1; }

justify-content: space-between empurra logo e links para extremos; align-items: center alinha verticalmente.

Exercício 4 · Centrar (10 pts)

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

.centro {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

A solução moderna mais simples. Alternativa com Grid:

.centro {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

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.

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

auto-fit + minmax(250px, 1fr) cria responsividade automática: cada card tem no mínimo 250px e o número de colunas ajusta-se à largura disponível, sem media queries.

<div class="galeria">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

Parte IV · Responsivo e a11y

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

Reescreve este CSS desktop-first para mobile-first:

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

/* Base: mobile */
.menu { display: none; }

/* Tablet e acima */
@media (min-width: 768px) {
  .menu { display: flex; }
}

Mobile-first usa min-width e começa pelo caso mais simples (mobile), adicionando complexidade para ecrãs maiores. Melhor performance em mobile (menos overrides) e força priorizar conteúdo.

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>

<div onclick> não é acessível por teclado nem anunciado como botão. → <button onclick="abrir()">Abrir menu</button>
<img> sem alt — leitor de ecrã não descreve. → <img src="grafico.png" alt="Vendas subiram 30% em Maio">
Input sem label — placeholder não substitui label (desaparece ao escrever, mau contraste). → <label for="email">Email</label><input type="email" id="email">
outline: none remove indicador de foco — utilizadores de teclado perdem-se. → remover, ou a:focus-visible { outline: 2px solid blue; }
Contraste insuficiente — #aaa sobre #ccc falha WCAG (< 4.5:1). → cores com contraste adequado, ex.: color: #1a1a2e; background: #fff;

Testar com Lighthouse e navegação por teclado (Tab).