Voltar para Wiki
Programação4 Módulos

CSS3 - Estilos e Layout

Domine a arte de estilizar a web. De seletores simples ao Flexbox e Design Responsivo.

1

Fundamentos e Seletores

Estrutura Básica

A sintaxe do CSS é baseada em regras: você seleciona um elemento e declara estilos dentro de chaves.
css
/* Seletor { Propriedade: Valor; } */

p {
  color: red;
  font-size: 16px;
}

Seletores Comuns

Como encontrar e estilizar elementos específicos no DOM.
  • div : Seleciona pela TAG.
  • .class : Seleciona pela CLASSE (pode repetir).
  • #id : Seleciona pelo ID (único).
  • * (Asterisco) : Seleciona TODOS os elementos da página (Universal).
  • div, p : Agrupamento. Aplica o estilo em ambos.
  • div p : Descendente (todos os `p` dentro de `div`, mesmo netos).
  • div > p : Filho Direto (apenas `p` que são filhos imediatos de `div`).
  • h1 + p : Irmão Adjacente (o `p` que vem IMEDIATAMENTE após `h1`).
  • h1 ~ p : Irmão Geral (todos os `p` que vêm após `h1` no mesmo nível).

Seletores de Atributo

  • div[class] : Possui o atributo class.
  • div[id="test"] : ID é exatamente "test".
  • div[class~="btn"] : Contém a palavra "btn" na classe.
  • a[href^="http"] : O link COMEÇA com "http".
  • a[href$="pdf"] : O link TERMINA com "pdf".
  • input[type="checkbox"]:checked : Checkbox que está marcado.
2

Pseudo-classes e Elementos

Estados e Pseudo-classes

Estilização baseada em estado ou posição, não apenas em atributos estáticos.
  • :hover : Quando o mouse passa por cima.
  • :active : No momento do clique.
  • :focus : Quando o elemento recebe foco (input/link).
  • :checked : Input selecionado.
  • :disabled / :enabled : Estado de habilitação do input.
  • :not(.class) : Seleciona tudo, EXCETO o que está no parênteses.
  • :first-child : Primeiro filho do pai.
  • :last-child : Último filho do pai.
  • :nth-child(n) : O enésimo filho (ex: par, ímpar, 3º).
  • :nth-of-type(n) : O enésimo filho do mesmo TIPO.
  • :empty : Elementos sem conteúdo algum.

Pseudo-elementos

Cria elementos virtuais via CSS ou estiliza partes específicas do texto.
  • ::before : Insere conteúdo virtual ANTES do elemento.
  • ::after : Insere conteúdo virtual DEPOIS do elemento.
  • ::first-letter : Estiliza apenas a primeira letra (capitular).
  • ::first-line : Estiliza a primeira linha do texto.
  • ::placeholder : Estiliza o texto de dica do input.
  • ::selection : Estiliza a cor de fundo/texto quando o usuário seleciona o texto.
3

Layout e Posicionamento

Propriedades e Box Model

Entendendo como o navegador renderiza o tamanho dos elementos.
Diagrama do Box Model: Margin, Border, Padding e Content
Diagrama do Box Model: Margin, Border, Padding e Content
  • box-sizing: content-box : (Padrão) Width = Conteúdo. Borda e Padding aumentam o tamanho total.
  • box-sizing: border-box : (Recomendado) Width = Conteúdo + Padding + Borda. Facilita cálculos.
  • border-radius : Arredonda cantos.
  • opacity : Transparência (0 a 1).
  • z-index : Ordem de empilhamento (quem fica por cima).

Position (Posicionamento)

  • static : Padrão. Segue o fluxo normal.
  • relative : Permite usar top/left sem sair do fluxo. Referência para filhos absolutos.
  • absolute : Sai do fluxo. Posiciona-se em relação ao parente relativo mais próximo.
  • fixed : Fixo na janela do navegador (não rola).
  • sticky : Híbrido. Rola até um ponto e depois fixa.

Flexbox

Modelo de layout unidimensional para distribuir espaço entre itens.

Propriedades do Container (Pai)

  • display: flex : Ativa o Flexbox.
  • flex-direction : row (linha) | column (coluna) | row-reverse.
  • flex-wrap : nowrap (espreme) | wrap (quebra linha).
  • justify-content : Alinhamento eixo PRINCIPAL (horizontal se row). Start, center, end, space-between.
  • align-items : Alinhamento eixo TRANSVERSAL (vertical se row). Stretch, center, start.

Propriedades dos Itens (Filhos)

  • align-self : Sobrescreve o align-items para um item só.
  • order : Muda a ordem visual sem mudar o HTML.
  • flex-grow : Capacidade de crescer para ocupar espaço vazio.
4

Responsividade

Media Queries

Aplicar estilos apenas se certas condições forem atendidas (tamanho da tela, orientação, tema).
css
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
  • max-width : Aplica se a tela for MENOR que X.
  • min-width : Aplica se a tela for MAIOR que X.
  • orientation : portrait (em pé) | landscape (deitado).
  • prefers-color-scheme : dark | light (Detecta modo escuro do sistema).
  • hover: none : Detecta dispositivos touch (celulares).