Carregando...
CSS Properties Complete Reference
Este guia completo de referência de propriedades CSS foi criado para fornecer aos desenvolvedores uma fonte única e confiável para consulta rápida e precisa durante a codificação. Ele cobre todas as propriedades CSS modernas, organizadas em categorias lógicas, incluindo Layout & Posicionamento, Modelo de Caixa, Bordas & Contorno, Fundo, Tipografia, Flexbox e Grid. Com exemplos práticos e suporte a navegadores, este guia permite que você compreenda rapidamente a sintaxe, os valores possíveis e a aplicação de cada propriedade em projetos reais, garantindo produtividade e consistência no desenvolvimento web.
📊 Layout & Positioning Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: value | Controla o tipo de exibição do elemento | display: flex | Todos os navegadores |
| position | position: value | Define o método de posicionamento | position: absolute | Todos os navegadores |
| top | top: value | Deslocamento vertical | top: 10px | Todos os navegadores |
| right | right: value | Deslocamento horizontal da direita | right: 20px | Todos os navegadores |
| bottom | bottom: value | Deslocamento vertical inferior | bottom: 10px | Todos os navegadores |
| left | left: value | Deslocamento horizontal da esquerda | left: 20px | Todos os navegadores |
| z-index | z-index: number | Ordem de empilhamento | z-index: 999 | Todos os navegadores |
| float | float: value | Direção de flutuação do elemento | float: left | Todos os navegadores |
| clear | clear: value | Limpa elementos flutuantes | clear: both | Todos os navegadores |
| overflow | overflow: value | Tratamento de conteúdo excedente | overflow: hidden | Todos os navegadores |
| overflow-x | overflow-x: value | Excesso horizontal | overflow-x: scroll | Todos os navegadores |
| overflow-y | overflow-y: value | Excesso vertical | overflow-y: auto | Todos os navegadores |
| visibility | visibility: value | Visibilidade do elemento | visibility: hidden | Todos os navegadores |
| clip | clip: rect() | Recorta o conteúdo do elemento | clip: rect(0,50px,50px,0) | Todos os navegadores |
| vertical-align | vertical-align: value | Alinhamento vertical | vertical-align: middle | Todos os navegadores |
📊 Box Model Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| width | width: value | Largura do elemento | width: 300px | Todos os navegadores |
| height | height: value | Altura do elemento | height: 200px | Todos os navegadores |
| max-width | max-width: value | Largura máxima | max-width: 100% | Todos os navegadores |
| min-width | min-width: value | Largura mínima | min-width: 200px | Todos os navegadores |
| max-height | max-height: value | Altura máxima | max-height: 500px | Todos os navegadores |
| min-height | min-height: value | Altura mínima | min-height: 100px | Todos os navegadores |
| margin | margin: value | Espaçamento externo | margin: 20px | Todos os navegadores |
| margin-top | margin-top: value | Margem superior | margin-top: 10px | Todos os navegadores |
| margin-right | margin-right: value | Margem direita | margin-right: 15px | Todos os navegadores |
| margin-bottom | margin-bottom: value | Margem inferior | margin-bottom: 10px | Todos os navegadores |
| margin-left | margin-left: value | Margem esquerda | margin-left: 15px | Todos os navegadores |
| padding | padding: value | Espaçamento interno | padding: 15px | Todos os navegadores |
| padding-top | padding-top: value | Preenchimento superior | padding-top: 10px | Todos os navegadores |
| padding-right | padding-right: value | Preenchimento direito | padding-right: 20px | Todos os navegadores |
| padding-bottom | padding-bottom: value | Preenchimento inferior | padding-bottom: 10px | Todos os navegadores |
| padding-left | padding-left: value | Preenchimento esquerdo | padding-left: 20px | Todos os navegadores |
| box-sizing | box-sizing: value | Cálculo do modelo de caixa | box-sizing: border-box | IE8+ |
📊 Border & Outline Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| border | border: width style color | Borda completa | border: 2px solid #000 | Todos os navegadores |
| border-width | border-width: value | Espessura da borda | border-width: 3px | Todos os navegadores |
| border-style | border-style: value | Estilo da borda | border-style: dashed | Todos os navegadores |
| border-color | border-color: value | Cor da borda | border-color: red | Todos os navegadores |
| border-top | border-top: width style color | Borda superior | border-top: 1px solid blue | Todos os navegadores |
| border-right | border-right: width style color | Borda direita | border-right: 2px dotted red | Todos os navegadores |
| border-bottom | border-bottom: width style color | Borda inferior | border-bottom: 3px double green | Todos os navegadores |
| border-left | border-left: width style color | Borda esquerda | border-left: 1px solid gray | Todos os navegadores |
| border-radius | border-radius: value | Cantos arredondados | border-radius: 10px | IE9+ |
| outline | outline: width style color | Contorno do elemento | outline: 2px solid red | Todos os navegadores |
| outline-offset | outline-offset: value | Distância do contorno | outline-offset: 5px | Todos os navegadores |
📊 Background Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| background | background: color image repeat position size | Fundo completo | background: #fff url() no-repeat center | Todos os navegadores |
| background-color | background-color: value | Cor de fundo | background-color: #ff0000 | Todos os navegadores |
| background-image | background-image: url() | Imagem de fundo | background-image: url('bg.jpg') | Todos os navegadores |
| background-repeat | background-repeat: value | Repetição da imagem | background-repeat: no-repeat | Todos os navegadores |
| background-position | background-position: value | Posição da imagem | background-position: center top | Todos os navegadores |
| background-size | background-size: value | Escala da imagem | background-size: cover | IE9+ |
| background-attachment | background-attachment: value | Comportamento de rolagem | background-attachment: fixed | Todos os navegadores |
| background-clip | background-clip: value | Área de pintura do fundo | background-clip: padding-box | IE9+ |
| background-blend-mode | background-blend-mode: value | Modo de mesclagem | background-blend-mode: multiply | Navegadores modernos |
📊 Typography Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| font | font: style variant weight size/height family | Fonte completa | font: bold 16px/1.5 Arial | Todos os navegadores |
| font-family | font-family: name | Família da fonte | font-family: 'Arial', sans-serif | Todos os navegadores |
| font-size | font-size: value | Tamanho do texto | font-size: 18px | Todos os navegadores |
| font-weight | font-weight: value | Espessura do texto | font-weight: bold | Todos os navegadores |
| font-style | font-style: value | Estilo do texto | font-style: italic | Todos os navegadores |
| line-height | line-height: value | Altura da linha | line-height: 1.6 | Todos os navegadores |
| text-align | text-align: value | Alinhamento horizontal | text-align: center | Todos os navegadores |
| text-decoration | text-decoration: value | Decoração do texto | text-decoration: underline | Todos os navegadores |
| text-transform | text-transform: value | Transformação de texto | text-transform: uppercase | Todos os navegadores |
| text-overflow | text-overflow: value | Tratamento de excesso | text-overflow: ellipsis | IE6+ |
| letter-spacing | letter-spacing: value | Espaçamento entre caracteres | letter-spacing: 2px | Todos os navegadores |
📊 Flexbox Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: flex | Ativa flexbox | display: flex | IE10+ |
| flex-direction | flex-direction: value | Direção do eixo principal | flex-direction: column | IE10+ |
| flex-wrap | flex-wrap: value | Quebra de itens | flex-wrap: wrap | IE10+ |
| justify-content | justify-content: value | Alinhamento do eixo principal | justify-content: space-between | IE10+ |
| align-items | align-items: value | Alinhamento do eixo cruzado | align-items: center | IE10+ |
| align-self | align-self: value | Alinhamento individual | align-self: flex-end | IE10+ |
| order | order: number | Ordem de exibição | order: 2 | IE10+ |
📊 Grid Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: grid | Ativa grid | display: grid | IE10+ (com -ms-) |
| grid-template-columns | grid-template-columns: values | Tamanho das colunas | grid-template-columns: 1fr 2fr | IE10+ (com -ms-) |
| grid-template-rows | grid-template-rows: values | Tamanho das linhas | grid-template-rows: 100px auto | IE10+ (com -ms-) |
| grid-gap | grid-gap: row column | Espaçamento entre itens | grid-gap: 20px 10px | IE10+ (com -ms-) |
| justify-items | justify-items: value | Alinhamento horizontal individual | justify-items: center | IE10+ (com -ms-) |
| align-items | align-items: value | Alinhamento vertical individual | align-items: center | IE10+ (com -ms-) |
Quick Examples
css
CSS Code
/* Layout Example */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
/* Typography Example */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* Animation Example */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}
---- Sempre especifique fontes de fallback em font-family
- Utilize unidades relativas (em, rem, %) para melhor responsividade
- Minimize o uso de !important
- Teste propriedades em diferentes navegadores, principalmente as mais recentes
- Use propriedades abreviadas (shorthand) quando possível para reduzir o tamanho do arquivo
- Avalie impacto de performance de animações complexas e filtros
- Valide CSS usando validadores online
- Use variáveis CSS para manter código sustentável
- Inclua prefixos de fornecedor para propriedades experimentais
- Agrupe propriedades relacionadas para melhor organização do código
🧠 Teste Seu Conhecimento
Pronto para Começar
Reference Knowledge Check
Teste seus conhecimentos sobre propriedades CSS.
3
Perguntas
70%
Para Passar
∞
Tempo
∞
Tentativas
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo