CONTEDO

Unidades _____________________________________________________________________ 2
Modelo de caixa ______________________________________________________________ 3
Bordas _______________________________________________________________________ 3
Margens _____________________________________________________________________ 4
Espaamento ________________________________________________________________ 4
Modelo de formtao visual __________________________________________________ 4
Detalhes do modelo de formatao visual ___________________________________ 5
Agregador de contedo, numerao automtica e listas _____________________ 5
Cores e Fundo ________________________________________________________________ 6
Fontes tipogrficas __________________________________________________________ 6
Texto _________________________________________________________________________ 7
Tabelas_____________________________________________________________________________________________________ 7

Pg. 1 de 7

UNIDADES
UNIDADES DE TAMANHO RELATIVAS
Unidade

px
em
ex

Descrio
Tamanho em pixels (relativo ao dispositivo)
Tamanho relativo fonte utilizada no elemento ao qual est inserido
Correspondente altura da fonte 'x

UNIDADES DE TAMANHO ABSOLUTAS

Unidade

in
cm
mm
pt
pc

Descrio
Polegadas (1polegada = 2.54 cm)
Centmetros
Milmetros
Pontos (1pt = 1/72 polegadas)
Picas (1pica = 12 pontos)

PORCENTAGEM
Unidade

%
0

Descrio
Porcentagem
Valor '0' no requer atribuio de unidade

REPRESENTAO DE CORES
Unidade

#RRGGBB
#RGB
rgb(R,G,B)
rgb(R%,G%,B%)

Descrio
Cor RGB (6 valores hexadecimais)
Notao simplificada (#RGB = #RRGGBB)
Cor RGB (3 valores de 0 a 255)
Cor RGB (3 valores percentuais)

Pg. 2 de 7

MODELO DE CAIXA

BORDAS
Propriedade

Descrio

Valores

border-top-width
border-right-width
border-bottom-width
border-left-width

Largura das bordas em cada um dos quatro lados:

superior, direito, inferior e esquerdo

[ thin | medium | thick | <tamanho> ]

border-width

Atalho para definir de uma s vez larguras de bordas

para todos os lados

[ thin | medium | thick | <tamanho> ] {1,4}

border-top-color
border-right-color
border-bottom-color
border-left-color

Cor das bordas em cada um dos quatro lados: superior,

[ <color> | transparent ]
direito, inferior e esquerdo

border-color

Atalho para definir de uma s vez cores de bordas para

[ <color> | transparent ] {1,4}
todos os lados

border-top-style
border-right-style
border-bottom-style
border-left-style

Estilo de bordas em cada um dos quatro lados:

superior, direito, inferior e esquerdo

[ none | hidden | dotted | dashed | solid | double

| groove | ridge | inset | outset ]

border-style

Atalho para definir de uma s vez estilos de bordas

para todos os lados

[ none | hidden | dotted | dashed | solid | double

| groove | ridge | inset | outset ] {1,4}

border-top
border-right
border-bottom
border-left

Atalho para definir largura, estilo e cor das bordas

superior, direita, inferior ou esquerda

[ <border-top-width> || <border-top-style> ||
<border-top-color> ]
Pg. 3 de 7

MARGENS
Propriedade

Descrio

Valores

margin-top
margin-right
margin-bottom
margin-left

Tamaho da margem para cada um dos lados: superior,

[ <tamanho> | <porcentagem> | auto ]
direito, inferior e esquerdo

margin

Atalho para definir de uma s vez o tamanho da

margem para todos os lados

[ <tamanho> | <porcentagem> | auto ]{1,4}

ESPAAMENTO
Propriedade

Descrio

Valores

padding-top
padding-right
padding-bottom
padding-left

Distncia utilizada para espaamento em cada um dos

[ <tamanho> | <porcentagem> ]
quatro lados: superior, direito, inferior e esquerdo

padding

Atalho para definir de uma s vez a distncia de

espaamento para todos os lados

[ <tamanho> | <porcentagem> ]{1,4}

MODELO DE FORMTAO VISUAL

Propriedade

Descrio

display

Modos de exibio do contedo

position
top
right
bottom
left

Esquema de posicionamento

float

Posicionamento adjacente esquerda ou direita do

elemento
Controle para os posicionamentos float
Nveis de profundidade de sobreposio de elementos

clear
z-index

Distncia do elemento com relao extremidade de

seu elemento-pai

Valores
[ inline | block | list-item | run-in | inline-block |
table | inline-table | table-row-group | tableheader-group | table-footer-group | table-row |
table-column-group | table-column | table-cell |
table-caption | none ]
[ static | relative | absolute | fixed ]
[ <tamanho> | <porcentagem> | auto ]

{ left | right | none ]

[ none | left | right | both ]
[ auto | <nmero inteiro> ]
Pg. 4 de 7

DETALHES DO MODELO DE FORMATAO VISUAL

width
min-width
max-width
height
min-height
max-height

Propriedade

Descrio
Largura

Valores
[ <tamanho> | <porcentagem> | auto ]

Largura mnima
Largura mxima
Altura

[ <tamanho> | <porcentagem>]
[ <tamanho> | <porcentagem> | none ]
[ <tamanho> | <porcentagem> | auto ]

Altura mnima

line-height

Distncia entre as linhas de um texto

vertical-align

Alinhamento vertical do texto

[ <tamanho> | <porcentagem>]
[ <tamanho> | <porcentagem> | none ]
[ normal | <nmero> | <tamanho> |
<porcentagem> ]
[ baseline | sub | super | top | text-top | middle |
bottom | text-bottom | <porcentagem> |
<tamanho> ]

Altura mxima

AGREGADOR DE CONTEDO, NUMERAO AUTOMTICA E LISTAS

Propriedade

Descrio

content

Agregador de contedo para os pseudo-elementos

:after e :before

quotes

list-style-image

Especifica aspas utilizadas em citaes

Inicializa um contador identificado na propriedade
'content'
Incrementa um contador identificado na propriedade
'content'
Atalho para definir de uma s vez todas as
propriedades de lista: type, position e image
Imagem aplicada aos elementos de uma lista

list-style-type

Estilo visual aplicado aos marcadores de uma lista

list-style-position

Posicionamento interno dos marcadores de uma lista

counter-reset
counter-increment
list-style

Valores
[ normal | none | [ <texto> | <uri> | <contador> |
attr(X) | open-quote | close-quote | no-openquote | no-close-quote]+ ]
[ [ <texto> <texto> ]+ | none ]
[ [ <name> <inteiro>? ]+ | none ]
[ [ <name> <inteiro>? ]+ | none ]
[ <list-style-type> || <list-style-position> || <liststyle-image> ]
[ url("http://...") | none ]
[ disc | circle | square | decimal | decimalleading-zero | lower-roman | upper-roman |
lower-greek | lower-latin | upper-latin | armenian
| georgian | lower-alpha | upper-alpha | none ]
[ inside | outside ]

Pg. 5 de 7

CORES E FUNDO
Propriedade

color
background-color
background-image
background-repeat
background-attachment
background-position
background

Descrio
Cor do texto presente no elemento

Valores

<color>
[ <color> | transparent ]
Cor de fundo do elemento
[ url(...) | none ]
Imagem de fundo do elemento
Define se e como a imagem de fundo utilizada se repetir [ repeat | repeat-x | repeat-y | no-repeat ]
Define se a imagem de fundo utilizada ser fixa ou com
[ scroll | fixed ]
rolagem
[ [ <porcentagem> | <tamanho> | left | center |
Posio da imagem de fundo utilizada.
right ] [ <porcentagem> | <tamanho> | top |
center | bottom]? ]
[ <background-color> || <background-image> ||
Atalho para definir de uma s vez todas as propriedades
<background-repeat> || <backgroundde imagem de fundo
attachment> || <background-position> ]

FONTES TIPOGRFICAS
Propriedade

Descrio

font-family

Famlia(s) de fontes

font-style

Estilo utilizado na fonte

Exibe o texto em pequena caixa-alta (versalete) ou fonte
normal

font-variant
font-weight

Peso da fonte

font-size

Tamanho da fonte

font

Atalho para definir de uma s vez todas as propriedades

de fonte

Valores
[ [ <nome-fonte> | <famlia-genrica> ] [,
<nome-fonte> | <famlia-genrica> ]* ]
[ normal | italic | oblique ]
[ normal | small-caps ]
[ normal | bold | bolder | lighter | 100 | 200 | 300
| 400 | 500 | 600 | 700 | 800 | 900 ]
[ [ xx-small | x-small | small | medium | large | xlarge | xx-large] | [larger | smaller] | <tamanho> |
<porcentagem> ]
[ [ [ <font-style> || <font-variant> || <font-weight>
]? <font-size> [ / <line-height> ]? <font-family> ]
| caption | icon | menu | message-box | smallcaption | status-bar ]

Pg. 6 de 7

TEXTO
Propriedade

text-indent
text-align
text-decoration
letter-spacing
word-spacing
text-transform
white-space

Descrio
Valores
Recuo esquerda da primeira linha em um bloco de texto [ <tamanho> | <porcentagem> ]
[ left | right | center | justify ]
Alinhamento do texto
[ none | [ underline || overline || line-through ||
Efeitos decorativos no texto como sublinhado, tachado,
linha acima e piscante
blink ] ]
[ normal | <tamanho> ]
Espaamento entre caracteres
Espaamento entre palavras
Transforma o texto em maisculas/minsculas
Definies sobre espaos em branco num determinado
elemento

[ normal | <tamanho> ]
[ capitalize | uppercase | lowercase | none ]
[ normal | pre | nowrap | pre-wrap | pre-line ]

TABELAS
Propriedade

caption-side
table-layout
border-collapse
border-spacing
empty-cells

Descrio
Posicionamento do ttulo em relao tabela
Define o algoritmo usado para a renderizao da tabela
Seleciona o modelo de bordas a ser utilizado
Distncia entre as bordas de clulas adjacentes (quando
'border-collapse=separated')
Visibilidade das bordas de clulas sem contedo

Valores
[ top | bottom ]
[ auto | fixed ]
[ collapse | separate ]
<tamanho> <tamanho>?
[ show | hide ]

Pg. 7 de 7