Folha de dicas de estilos CSS

O CSS (Cascading Style Sheets) é utilizado para controlar o layout e o estilo das páginas web. Esta folha de dicas cobre as propriedades e seletores mais comummente usados.

Seletores

Tipo	Exemplo	Descrição
All	`* { }`	Corresponde a todos os elementos
Type	`h1 { }`	Corresponde a uma tag HTML específica
Class	`.header { }`	Elementos com class=“header”
ID	`#main { }`	Elemento com id=“main”
Descendant	`div p { }`	Todos os p dentro de div
Pseudo	`a:hover { }`	Estado ao passar o rato

Modelo de Caixa

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Espaçamento interno */
  border: 1px solid #ccc; /* Margem */
  margin: 20px;     /* Espaçamento externo */
  box-sizing: border-box; /* Inclui borda e preenchimento */
}

Tipografia

Property	Descrição	Exemplo
`font-family`	Família de fontes	`font-family: Arial, sans-serif;`
`font-size`	Tamanho da fonte	`font-size: 16px;`
`font-weight`	Peso da fonte	`font-weight: bold;`
`text-align`	Alinhamento do texto	`text-align: center;`
`line-height`	Altura da linha	`line-height: 1.5;`
`color`	Cor da fonte	`color: #333;`

Cores e Fundos

Property	Descrição	Exemplo
`background-color`	Cor de fundo	`background-color: #f0f0f0;`
`background-image`	Imagem de fundo	`background-image: url('bg.jpg');`
`background-size`	Tamanho do fundo	`background-size: cover;`
`opacity`	Opacidade	`opacity: 0.8;`

Posicionamento

position: static; : Layout de fluxo padrão
position: relative; : Deslocamento relativo à sua própria posição
position: absolute; : Posicionamento relativo ao ancestral não estático mais próximo
position: fixed; : Posicionamento relativo à janela do navegador
position: sticky; : Fixado ao rolar para uma posição específica
z-index: 10; : Controlo da ordem de empilhamento

Exibição e Layout

display: block; : Elemento de bloco
display: inline; : Elemento em linha
display: inline-block; : Elemento em linha-bloco
display: flex; : Ativar layout flex
display: grid; : Ativar layout grid
display: none; : Ocultar elemento sem ocupar espaço

Atalhos de Propriedades

margin: 10px 5px 15px 20px; (Cimo Direita Baixo Esquerda)
padding: 10px 5px; (Cimo-Baixo Esquerda-Direita)
border: 1px dashed red; (Largura Estilo Cor)