09/07/2019 Referência de CSS 3 - Documentos Google

Propriedades CSS: guia de referência

GUIA DE REFERÊNCIA

FUNDO

background Define todos os parâmetros referentes ao fundo de Valores: background-color | background-image | background-repeat |
um elemento. Aceita de 1 a 5 valores. background-attachment | background-position

background-color Define a cor de fundo de um elemento. Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | transparent

background-image Define uma imagem como fundo de um elemento. Valores: url | none

background-repeat Define se a imagem vai repetir (formando um Valores: repeat | repeat-x | repeat-y | no-repeat
mosaico) ou não e a direção da repetição.

background-attachment Define se a imagem de fundo de um elemento Valores: scroll | fixed

ficará fixa ou se irá rolar junto com o conteúdo.

background-position Define o ponto onde inicia o desenho da imagem de Valores: top left | top center | top right | center left | center center | center right | bottom
fundo. left | bottom center |bottom right | x% y% | x unids_css y unids_css

background-size Define o tamanho de imagem de fundo Valores:x% y% | x unids_css y unids_css | Cover | Contain

BORDAS

border Define o estilo, a espessura e a cor das 4 bordas. Valores: border-style | border-width | border-color
Aceita de 1 a 3 valores.

border-top Definem o estilo, a espessura e a cor das bordas Valores: border-style | border-width | border-color
border-right superior, direita, inferior e esquerda. Aceitam de 1 a
border-bottom 3 valores.
border-left

https://docs.google.com/document/d/1GbRyzGSwdfGi11PZN-59OLJGCqWPk2QMsdetKuJsFh4/edit 1/6
09/07/2019 Referência de CSS 3 - Documentos Google

border-color Define a cor das 4 bordas Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | transparent
border-top-color
border-right-color
border-left-color
border-bottom-color

border-style Define o estilo das 4 bordas Valores: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-style
border-right-style
border-left-style
border-bottom-style

border-width Define a espessura das 4 bordas Valores: thin | medium | thick | unids_css
border-top-width
border-right-width
border-left-width
border-bottom-width

MARGENS

margin Define as 4 margens do elemento. Valores: margin-top | margin-right | margin-bottom | margin-left

Aceita de 1 a 4 valores

margin-top Definem as margens superior, direita, inferior e Valores: auto | unids_css | %

margin-right esquerda.
margin-bottom
margin-left

PADDING (Espaço Interno)

padding Define o espaço entre o conteúdo e os 4 limites do Valores: padding-top | padding-right | padding-bottom | padding-left
elemento. Aceita de 1 a 4 valores.

https://docs.google.com/document/d/1GbRyzGSwdfGi11PZN-59OLJGCqWPk2QMsdetKuJsFh4/edit 2/6
09/07/2019 Referência de CSS 3 - Documentos Google

padding-top Definem o espaço entre o conteúdo e os limites Valores: unids_css | %

padding-right superior, direito, inferior e esquerdo.
padding-bottom
padding-left

DIMENSIONAMENTO

width Define a Largura do Elemento Valores: unids_css | %

height Define a Altura do Elemento Valores: unids_css | %

max-width Define a Largura Máxima e Altura Máxima do Valores: unids_css | %

max-height Elemento

min-width Define a Largura Mínima e Altura Mínima do Valores: unids_css | %

min-height Elemento

POSICIONAMENTO

Position Define a posição de um elemento como estática, Valores: static | relative | absolute | fixed | sticky
relativa, absoluta, grudada ou fixa.

z-index Define a ordem de apresentação dos elementos Valores: auto | número

quando há sobreposição

float Define o alinhamento de um elemento e controla o Valores: left | right | none

fluxo de texto ou de outros elementos ao seu redor.

clear Define os lados de um elemento onde não são Valores: left | right | both | none
permitidos elementos flutuantes.

Coordenadas: São propriedades habilitadas pela propriedade Valores: unids_css | %

top, left, right, bottom position diferente de static e permite posicionar um
elemento na tela.

https://docs.google.com/document/d/1GbRyzGSwdfGi11PZN-59OLJGCqWPk2QMsdetKuJsFh4/edit 3/6
09/07/2019 Referência de CSS 3 - Documentos Google

CLASSIFICAÇÃO (FORMA DE EXIBIÇÃO)

display Define se um elemento deve ser apresentado e a Valores: none | inline | block | inline-block | table | flex | grid
forma de apresentação. (Existem outros valores possíveis, porém iremos nos ater nos principais)

overflow Define o que deve ocorrer quando o conteúdo de Valores: visible | hidden | scroll | auto
um elemento excede sua área.

Textos e Fontes

color Define uma cor para o texto de um elemento Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | transparent

font Define vários valores da fonte. Valores: font-family | font-size/line-height | font-style | font-weight

font-family Define o tipo de fonte. Valores: nome-familia | familia-genérica

font-style Define o estilo da fonte. Valores: normal | italic | oblique

font-size Define o tamanho da fonte. Valores: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger |
unids_css | %

font-weight Define a espessura do traço da fonte. Valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900

text-decoration Define um efeito decorativo para o texto. Valores: none | underline | overline | line-through

text-indent Define um deslocamento para a direita ou esquerda Valores: unids_css | %

da primeira linha do texto.

text-transform Define que o texto deve ser capitalizado ou ser Valores: none | capitalize | uppercase | lowercas
exibido todo em maiúsculas ou minúsculas.

text-align Define o alinhamento de um texto Valores: left | right | center | justify

https://docs.google.com/document/d/1GbRyzGSwdfGi11PZN-59OLJGCqWPk2QMsdetKuJsFh4/edit 4/6
09/07/2019 Referência de CSS 3 - Documentos Google

line-height Define o espaçamento entre linhas de um texto. Valores: unids_css | %

@font-face Importa uma fonte para o arquivo @font-face{

font-family: ‘Nome da Fonte’;
src:url(‘endereco/relativo/fonte.ttf);
}

Flex Box

Flex Container: O Flex Container é a tag que envolve os itens flex, ao indicar display: flex, essa tag passa a ser um Flex Container.

display Define o elemento como um flex container, tornando display: flex;

os seus filhos flex-itens.

flex-direction Define a direção dos flex itens. Por padrão ele é row Valores: row | row-reverse | column | column-reverse
(linha)

flex-wrap Define se os itens devem quebrar ou não a linha. Valores: nowrap | wrap | wrap-reverse;
Por padrão eles não quebram linha, isso faz com
que os flex itens sejam compactados além do limite
do conteúdo.

flex-flow O flex-flow é um atalho para as propriedades Valores: row nowrap | row wrap | column wrap | column nowrap
flex-direction e flex-wrap.

justify-content Alinha os itens flex no container de acordo com a Valores: flex-start | flex-end | center | space-between | space-around
direção. Alinha verticalmente se o flex-direction for
row e horizontalmente se o flex-direction for column

align-items O align-items alinha os flex itens de acordo com o Valores: stretch | flex-start | flex-end | center | baseline
eixo do container. O alinhamento é diferente para
quando os itens estão em colunas ou linhas.

align-content Alinha as linhas do container em relação ao eixo Valores: flex-start | flex-end | center | space-between | space-around
vertical. A propriedade só funciona se existir mais

https://docs.google.com/document/d/1GbRyzGSwdfGi11PZN-59OLJGCqWPk2QMsdetKuJsFh4/edit 5/6
09/07/2019 Referência de CSS 3 - Documentos Google

de uma linha de flex-itens. Para isso o flex-wrap

precisa ser wrap.

Flex Item: Os Flex Itens são os filhos diretos do Flex Container, lembrado que uma tag se torna um flex container a partir do momento que você definir display: flex.

flex-grow Define a habilidade de um flex item crescer. Por Valores: número

padrão o valor é zero, assim os flex itens ocupam
um tamanho máximo relacionado o conteúdo
interno deles ou ao width definido.

flex-shrink Define a capacidade de redução de tamanho do valores: número

item.

order Modifica a ordem dos flex itens. Sempre do menor Valores: número
para o maior, assim order: 1, aparece na frente de
order: 5.

align-self O align-self serve para definirmos o alinhamento Valores: auto | flex-start | flex-end | center | baseline | stretch
específico de um único flex item dentro do nosso
container.

https://docs.google.com/document/d/1GbRyzGSwdfGi11PZN-59OLJGCqWPk2QMsdetKuJsFh4/edit 6/6