PROPRIEDADES

# Borda

Tag para inserir as configurações iniciais do documento.

Propriedade Descrição Valores Exemplos
border-top-width | border-bottom-width | border-left-width | border-right-width Define a largura da borda separadamente. [thin | medium | thick | <tamanho>] e { border-top-width: 15px } - a borda do topo terá 15px
border-width Atalho para definir de uma só vez a largura das bordas. [thin | medium | thick | <tamanho>] e { border-width: 15px } - todas as bordas terão 15px
border-top-color | border-bottom-color | border-left-color | border-right-color Define a cor das bordas separadamente. [cor | transparent] e { border-top-color: #00FF19 } - a borda do topo terá a cor #00FF19
border-color Atalho para definir de uma só vez a cor das bordas. [cor | transparent] e { border-color: #f00 } - todas as bordas terão a cor #f00
border-top-style | border-bottom-style | border-left-style | border-right-style Define o estilo das bordas separadamente. [solid | dash | none | hidden | dotted | double | groove | ridge] e { border-top-style: solid } - a borda do topo terá estilo sólido
border-style Atalho para definir de uma só vez o estilo das bordas. [solid | dash | none | hidden | dotted | double | groove | ridge] e { border-style: solid } - todas as bordas terão o estilo sólido
border Atalho para definir de uma só vez o estilo, a cor e a largura das bordas. [border-width | border-style | border-color] e { border: 5px solid #f00} - todas as bordas terão o mesmo estilo, a mesma cor e a mesma largura

# Margem

Tag para inserir as configurações iniciais do documento.

Propriedade Descrição Valores Exemplos
margin-top | margin-bottom | margin-left | margin-right Define a margem do elemento separadamente. [<tamanho> | <porcentagem> | auto] e { margin-top: 15px } - a margem do topo terá 15px
margin Atalho para definir de uma só vez tamanho da margem para todos os lados. [<tamanho> | <porcentagem> | auto] e { margin: 1rem } - todas as margens terá 1rem

# Espaçamento

Tag para inserir as configurações iniciais do documento.

Propriedade Descrição Valores Exemplos
padding-top | padding-bottom | padding-left | padding-right Define o espaçamento do elemento separadamente. [<tamanho> | <porcentagem>] e { margin-top: 15px } - a margem do topo terá 15px
padding Atalho para definir de uma só vez tamanho do espaçamento para todos os lados. [<tamanho> | <porcentagem>] e { padding: 1rem } - todos os lados terá 1rem de espaçamento

# Formatação visual

Tag para inserir as configurações iniciais do documento.

Propriedade Descrição Valores Exemplos
display A propriedade display permite que você defina a maneira como determinado elemento HTML deve ser renderizado. [inline | block | inline-block | grid | flex | none] e { display: none } - O elemento irá sumir, deixando um espaço vazio.
position Esquema de posicionamento [relative | absolute | fixed | static | stick] e { position: relative } - Utilizando o position Relative o elemento passa a aceitar as propriedades Top, Bottom, Left e Right.
top | right | bottom | left Distancia do elemento com relação à extremidade de seu elemento-pai [<tamanho> | <porcentagem> | auto] e { top: 5rem } - O elemento ficará 5rem de distância do topo.
z-index Nivel de profundidade de sobreposição de elemento [number] e { z-index: 10 } - O elemento ficará 10 níveis a cima.

# Dimensão

Tag para inserir as configurações iniciais do documento.

Propriedade Descrição Valores Exemplos
width Define a largura do elemento [<porcentagem> | <tamanho> | auto] e { width: 50rem } - O elemento terá 50rem de largura.
max-width Define o máximo da largura do elemento [<porcentagem> | <tamanho> | none] e { max-width: 500px } - O elemento pode ter até 500px de largura.
min-width Define o minimo da largura do elemento [<porcentagem> | <tamanho>] e { min-width: 50px } - O elemento tem que ter no minimo 50px de largura.
height Define a altura do elemento [<porcentagem> | <tamanho> | auto] e { height: 50rem } - O elemento terá 50rem de largura.
max-height Define o máximo da altura do elemento [<porcentagem> | <tamanho> | none] e { max-height: 500px } - O elemento pode ter até 500px de altura.
min-height Define o minimo da altura do elemento [<porcentagem> | <tamanho>] e { min-height: 50px } - O elemento tem que ter no minimo 50px de altura.
text-align Alinhamento horizontal do texto [center | left | right | justify] e { text-alignt: center } - Deixa o texto centralizado
vertical-align Alinhamento vertical do texto [baseline | sub | super | top | text-top | middle | bottom | <porcentagem> | <tamanho>] e { vertical-alignt: middle } - Deixa o texto centralizado na vertical

# Background

Tag para inserir as configurações iniciais do documento.

Propriedade Descrição Valores Exemplos
color Define a cor do texto [<color>] e { color: rgb(0,0,0) } - O elemento terá a cor preta.
background-color Define a cor de fundo do elemento [<color> | transparent] e { background-color: #00f } - O elemento terá a cor azul.
background-image Imagem de fundo do elemento [url(...) | none] e { background-image: url(http://example.com) }
background-repeat Define como a imagem de fundo se repetirá [repeat | no-repeat | repeat-x | repeat-y] e { background-repeat: no-repeat } - A imagem não repetirá.
background-attachment Define se a imagem de fundo será fixa ou com rolagem [scroll | fixed] e { background-attachment: scroll } - A imagem acompanha a rolagem da página.
background-position Define a posição da imagem de fundo [bottom | left | right | top | <porcentagem> | <tamanho>] e { background-attachment: scroll } - A imagem acompanha a rolagem da página.
background Atalho para definir de uma vez só todos as propriedades [background-color || background-image || background-repeat || background-attachment || background-position] e { background: #f00 } - O fundo da página será vermelho.