HTML & CSS · Capítulo 5

Componentes visuais

Tokens, estados, botões, cartões, navegação e consistência.

CONCEITO

O que precisas de perceber

Define variáveis CSS para tipografia, espaçamento, raio e cores. Cria componentes com estados hover, focus-visible e disabled.

EXEMPLO

Vê o código

:root{--space:1rem;--radius:16px}
.btn{display:inline-flex;padding:.8rem 1rem;border-radius:var(--radius)}
.btn:focus-visible{outline:3px solid currentColor;outline-offset:3px}
CADERNO DIGITAL

As minhas notas

Escreve apontamentos deste capítulo. Ficam apenas neste dispositivo.

Guardado localmente.
AGORA TU

Exercício

Cria um mini design system com botão, input, alert e card.