Blog ComercialWeb - São Paulo - SP
E-mail: [email protected]
E-mail: [email protected]
CSS3 organiza o estilo de páginas modernas com módulos que evoluem de forma independente: seletores, cores, tipografia, layouts (Flexbox/Grid) e animações. Dominar os fundamentos garante sites mais rápidos, acessíveis e fáceis de manter.
Comece pelos seletores de elemento, classe e ID, avance para seletores de atributo, pseudo‑classes e pseudo‑elementos.
/* elementos */
h1 { font-size: 2rem; }
/* classe */
.card { padding: 16px; }
/* id */
#menu { position: sticky; }
/* atributo */
a[target="_blank"] { text-decoration: underline; }
/* pseudo‑classe e pseudo‑elemento */
a:hover { color: #c00; }
p::first-line { font-weight: bold; }
Entenda a ordem: origem do estilo, especificidade e ordem de declaração. Prefira classes a IDs para manter previsibilidade e evite !important no dia a dia.
/* Classe ganha do elemento; ID ganha da classe */
button { background: #eee; }
.btn { background: #ddd; }
#enviar { background: #c00; color: #fff; }
Use unidades relativas (rem, em, vw, vh) para melhor escalabilidade. Centralize paleta e espaçamentos em :root com variáveis CSS.
:root { --espaco: 16px; --prim: #990000; }
.card { padding: var(--espaco); border-color: var(--prim); }
Flexbox simplifica alinhamento em um eixo: distribuição, centralização, quebras de linha e espaçamento.
.linha { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
Grid resolve duas dimensões com colunas/linhas, áreas nomeadas e minmax() para cartões responsivos.
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
Adote mobile‑first, use clamp() para tipografia fluida e aspect-ratio para imagens e vídeos.
h1 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.thumb { aspect-ratio: 16 / 9; }
Com esses fundamentos, você cria interfaces consistentes, acessíveis e fáceis de evoluir.
