📄 Documentação Oficial MDN CSS
| # | Propriedade / Seletor | O que faz | Exemplo |
|---|---|---|---|
| 1 | npm install sass | Instala o pré-processador Sass (via Node/Pip) | pip install libsass (Alternativa Python) |
| 2 | color | Define a cor do texto | color: #ff0000; |
| 3 | background-color | Define a cor de fundo | background-color: blue; |
| 4 | font-size | Tamanho da fonte | font-size: 16px; |
| 5 | font-weight | Peso/Espessura da fonte | font-weight: bold; |
| 6 | text-align | Alinhamento do texto | text-align: center; |
| 7 | margin | Espaço externo ao redor do elemento | margin: 10px 20px; |
| 8 | padding | Espaço interno (entre borda e conteúdo) | padding: 5%; |
| 9 | border | Define borda (largura, estilo, cor) | border: 1px solid black; |
| 10 | width | Largura de um elemento | width: 100px; |
| 11 | height | Altura de um elemento | height: 50vh; |
| 12 | display: block | Elemento ocupa a linha inteira | display: block; |
| 13 | display: inline-block | Em linha, mas permite largura/altura | display: inline-block; |
| 14 | display: flex | Ativa o layout Flexbox | display: flex; |
| 15 | justify-content | Alinha itens no eixo principal (Flex) | justify-content: center; |
| 16 | align-items | Alinha itens no eixo transversal (Flex) | align-items: center; |
| 17 | flex-direction | Direção dos itens flex | flex-direction: column; |
| 18 | display: grid | Ativa o layout Grid | display: grid; |
| 19 | grid-template-columns | Define as colunas do Grid | grid-template-columns: 1fr 1fr; |
| 20 | gap | Espaço entre itens de Flex/Grid | gap: 15px; |
| 21 | position: relative | Posição relativa ao seu lugar original | position: relative; |
| 22 | position: absolute | Posição relativa ao pai posicionado | position: absolute; top: 0; |
| 23 | position: fixed | Fixa o elemento na janela do navegador | position: fixed; |
| 24 | position: sticky | Fixa ao rolar (dentro do pai) | position: sticky; top: 10px; |
| 25 | z-index | Ordem de empilhamento (eixo Z) | z-index: 999; |
| 26 | top / bottom / left / right | Coordenadas de posicionamento | left: 50px; |
| 27 | border-radius | Arredonda os cantos | border-radius: 50%; |
| 28 | box-shadow | Sombra externa no elemento | box-shadow: 2px 2px 5px grey; |
| 29 | text-shadow | Sombra no texto | text-shadow: 1px 1px black; |
| 30 | opacity | Nível de transparência (0 a 1) | opacity: 0.5; |
| 31 | visibility | Mostra ou esconde sem remover espaço | visibility: hidden; |
| 32 | overflow | Lida com conteúdo que transborda | overflow: scroll; |
| 33 | background-image | Define imagem de fundo | url('imagem.jpg'); |
| 34 | background-size | Tamanho da imagem de fundo | background-size: cover; |
| 35 | cursor | Muda o ponteiro do mouse | cursor: pointer; |
| 36 | font-family | Define a família da fonte | font-family: Arial; |
| 37 | line-height | Espaçamento entre linhas | line-height: 1.5; |
| 38 | text-decoration | Sublinhado, tachado, etc. | text-decoration: none; |
| 39 | text-transform | Maiúsculas ou minúsculas | text-transform: uppercase; |
| 40 | letter-spacing | Espaço entre letras | letter-spacing: 2px; |
| 41 | white-space | Tratamento de espaços em branco | white-space: nowrap; |
| 42 | text-overflow | Trata texto longo que não cabe | text-overflow: ellipsis; |
| 43 | :hover | Estilo ao passar o mouse | a:hover { color: red; } |
| 44 | :active | Estilo ao clicar | button:active { ... } |
| 45 | :nth-child() | Seleciona o enésimo filho | li:nth-child(2n) |
| 46 | :first-child | Seleciona o primeiro filho | p:first-child |
| 47 | ::before | Insere conteúdo antes do elemento | p::before { content: "➤"; } |
| 48 | ::after | Insere conteúdo depois do elemento | span::after { content: "!"; } |
| 49 | transition | Suaviza mudanças de propriedades | transition: all 0.3s; |
| 50 | transform: rotate() | Rotaciona um elemento | transform: rotate(45deg); |
| 51 | transform: scale() | Aumenta ou diminui o tamanho | transform: scale(1.2); |
| 52 | transform: translate() | Move o elemento nos eixos X/Y | transform: translateX(10px); |
| 53 | @keyframes | Define etapas de uma animação | @keyframes piscar { ... } |
| 54 | animation | Aplica uma animação | animation: piscar 2s infinite; |
| 55 | @media | Aplica estilos baseados na tela | @media (max-width: 600px) |
| 56 | max-width | Largura máxima | max-width: 100%; |
| 57 | min-height | Altura mínima | min-height: 100vh; |
| 58 | object-fit | Como imagem cabe no container | object-fit: contain; |
| 59 | --var-name | Declaração de variável CSS | --cor-primaria: #333; |
| 60 | var() | Uso de variável CSS | color: var(--cor-primaria); |
| 61 | calc() | Realiza cálculos matemáticos | width: calc(100% - 20px); |
| 62 | box-sizing | Define como tamanho é calculado | box-sizing: border-box; |
| 63 | filter: blur() | Aplica desfoque | filter: blur(5px); |
| 64 | filter: grayscale() | Deixa o elemento em cinza | filter: grayscale(100%); |
| 65 | aspect-ratio | Define proporção de tela | aspect-ratio: 16 / 9; |
| 66 | list-style | Estilo de marcadores de lista | list-style: none; |
| 67 | outline | Linha externa (não afeta layout) | outline: 2px solid blue; |
| 68 | flex-wrap | Quebra de linha no Flexbox | flex-wrap: wrap; |
| 69 | grid-area | Nomeia ou posiciona item no Grid | grid-area: header; |
| 70 | user-select | Controla se o texto pode ser copiado | user-select: none; |
| 71 | pointer-events | Controla resposta a cliques | pointer-events: none; |
| 72 | scroll-behavior | Suaviza a rolagem interna | scroll-behavior: smooth; |
| 73 | clip-path | Corta o elemento em formas | clip-path: circle(50%); |
| 74 | mix-blend-mode | Como cores se misturam com o fundo | mix-blend-mode: multiply; |
| 75 | backdrop-filter | Filtro no fundo atrás do elemento | backdrop-filter: blur(10px); |
| 76 | column-count | Divide texto em colunas | column-count: 3; |
| 77 | resize | Permite redimensionar elementos | resize: both; |
| 78 | writing-mode | Direção do texto (vertical/horiz) | writing-mode: vertical-rl; |
| 79 | accent-color | Cor de inputs (checkbox/radio) | accent-color: green; |
| 80 | all: unset | Reseta todas as propriedades | all: unset; |
| 81 | vertical-align | Alinhamento vertical (inline) | vertical-align: middle; |
| 82 | word-break | Onde quebrar palavras longas | word-break: break-all; |
| 83 | hyphens | Hifenização automática | hyphens: auto; |
| 84 | float | Faz elemento flutuar | float: left; |
| 85 | clear | Limpa efeitos de float | clear: both; |
| 86 | mask-image | Aplica máscara de transparência | mask-image: linear-gradient(...); |
| 87 | column-gap | Espaço entre colunas de texto | column-gap: 20px; |
| 88 | border-collapse | Une bordas de tabelas | border-collapse: collapse; |
| 89 | empty-cells | Mostra/esconde células vazias | empty-cells: hide; |
| 90 | caption-side | Posição do título da tabela | caption-side: bottom; |
| 91 | perspective | Profundidade 3D | perspective: 1000px; |
| 92 | backface-visibility | Oculta verso de elemento 3D | backface-visibility: hidden; |
| 93 | isolation | Cria novo contexto de empilhamento | isolation: isolate; |
| 94 | shape-outside | Envolve texto em formas complexas | shape-outside: circle(); |
| 95 | will-change | Dica ao navegador sobre mudanças | will-change: transform; |
| 96 | content-visibility | Otimização de renderização | content-visibility: auto; |
| 97 | contain | Isolamento de performance | contain: paint; |
| 98 | counter-reset | Cria contadores CSS | counter-reset: seção; |
| 99 | counter-increment | Incrementa contador | counter-increment: seção; |
| 100 | !important | Força prioridade máxima | color: red !important; |