IT Open Helper

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.

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.

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

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.

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).

CSS3 - Estilos e Layout