1. 28/11/12 Guia de Ref erência Rápida CSS
Guia de Referência CSS
2.1
CONTEÚDO
Módulos
Seletores
Notação
Tipos de mídias
Sintaxe
Unidades
Modelo de caixa
Bordas
Margens
Espaçamento
Modelo de formatação visual
Detalhes do modelo de formatação visual
Efeitos visuais
Agregador de conteúdo, numeração automática e listas
Cores e fundo
Paginação para impressão
Fontes tipográficas
Texto
Tabelas
Interface de usuário
SELETORES
Padrão Significado Exemplo CSS Exemplo (X)HTML
*{
Seletor universal:
* clr #000
oo: 000; Aplicável a todos os elementos
qualquer elemento
}
Seletor de tipo de
e{
elemento: seleciona
e fn-aiy sn- <>..<e
otfml: as e . />
qualquer elemento
srf}
ei;
<e>
Seletor
contextual:seleciona
h e {
1 m
qualquer elemento
ef clr bu;
oo: le <>.<>../>.<e
e..f..<f../>
<f> que estiver
}
contido num
elemento <e>
Seletor de
elementos-filho:
bd >p{
oy
seleciona qualquer
e>f ln-egt 13
iehih: .; <>.<>.<f../>
e..f../>.<e
elemento <f>
}
descendente direto
de um elemento <e>
Seletor adjacente:
seleciona o
elemento <f> que h +h {
1 2
e+f mri-o:-m;
agntp 5m <>.<><f../>
e..f />.<e
estiver
www.w3c.br/div ulgacao/guiasref erencia/css2/ } 1/34

2. 28/11/12 Guia de Ref erência Rápida CSS
estiver }
imediatamente após
um elemento <e>
Seletor de classe:
seleciona o(s) h.atrl{
1psoa
ecas
.lse elemento(s) <e> em clr gen
oo: re; < cas"lse../
e ls=cas". >
que se aplicou a }
"classe"
Seletor de ID:
h#hpe1{
1catr
seleciona o
eI
#d t x - l g : c n e ;< i = I " . /
etain etr e d"d.. >
elemento <e>
}
identificado com Id
Agrupamento de
h,h {
1 2
seletores: Seleciona
e,f fn-aiy sn- <>…<e …<>…<f
otfml: as e /> f />
os elementos <e> e
srf }
ei;
<f> do agrupamento
Seletor de Atributo:
seleciona o h[il]{
1tte
e[ti]
arb elemento <e> que clr bu;
oo: le < arb"ao"../
e ti=vlr . >
contenha o atributo }
indicado
Seletor de Atributo:
sa[ls=xml]
pncaseepo
seleciona o
e {
elemento <e> com o < cas"xml"../
e ls=eepo . >
[ti=vlr]
arb"ao" clr bu;
oo: le
mesmo atributo e
}
“valor”
Seletor de Atributo:
seleciona o
elemento <e> em arl=cprgt]
[e~"oyih"
e que “valor” de { < rl"oyih cplf
a e=cprgt oyet
[ t i ~ " a o " atributo esteja em
arb=vlr] clr rd
oo: e; cpeio".>…<a
oydtr.. />
uma lista de valores }?
separadas por
espaços
Seletor de Atributo:
seleciona o
elemento <e> em *ln|"t]{
[ag=p"
e [ t i | " a " que valor do atributo
arb=vl] clr rd
oo: e; < ln=p-R ..>
e ag"tB" ./
seja idêntico a “val” }
ou inicia-se com
“val”
Pseudo-classe
primeiro filho: d v > p f r t c i d< > Ú t m P a t s d ' o a
i :is-hl P lio ne e nt'
seleciona o primeiro { <I cas"oa>
DV ls=nt"
efrtcid
:is-hl
elemento <e> tx-net 0
etidn: ; <>Pier Paó nt'
P rmio ps oa.
descendente do } <DV
/I>
elemento-pai
Pseudo-classe link:
aplica-se ao
aln {
:ik
elemento <a> com <a
aln
:ik clr rd
oo: e;
hiperlinks ou he=ht:/neeoln/>ik/>
rf"tp/edrç.ik"ln<a
}
âncoras ainda não
visitados
Pseudo-classe
visited: aplica-se ao avstd{
:iie
<a
avstd
:iie elemento <a> com clr bu;
oo: le
he=ht:/neeoln/>ik/>
rf"tp/edrç.ik"ln<a
hiperlinks ou }
âncoras já visitados
Pseudo-classe
www.w3c.br/div ulgacao/guiasref erencia/css2/ 2/34

3. 28/11/12 Guia de Ref erência Rápida CSS
Pseudo-classe
aatv {
:cie
active: aplica-se ao <a
eatv
:cie clr lm;
oo: ie
elemento <e> he=ht:/neeoln/>ik/>
rf"tp/edrç.ik"ln<a
}
quando este for
ativado pelo usuário
Pseudo-classe
hover: aplica-se ao
ahvr{
:oe
elemento <e> <a
ehvr
:oe clr ylo;
oo: elw
quando o cursor he=ht:/neeoln/>ik/>
rf"tp/edrç.ik"ln<a
}
estiver sobre ele,
mas sem ativá-lo
Pseudo-classe
focus: aplica-se ao
afcs{
:ou
elemento <e> <a
efcs
:ou bcgon:ylo;
akrud elw
quando o foco he=ht:/neeoln/>ik/>
rf"tp/edrç.ik"ln<a
}
estiver posicionado
nele
Pseudo-classe lang:
aplica-se ao
hm:agp)
tlln(t
elemento <e> se
eln(a)
:agvl { u t s ' ' ' » ;< l n = p " . . /
qoe: « ' e ag"t . >
este estiver
}
marcado com o
idioma “val”
Pseudo-elemento
pfrtln {
:is-ie
first-line: aplica-se à
efrtln
:is-ie tx-rnfr:
ettasom <>.<e
e../>
primera linha do
uprae }
pecs;
elemento <e>
pfrtlte {
:is-etr
Pseudo-elemento
fn-ie 3m
otsz: e;
first-letter: aplica-se
efrtlte
:is-etr fn-egt
otwih: <>.<e
e../>
à primera letra do
nra;
oml
elemento <e>
}
Pseudo-elemento
before: aplica ebfr {
:eoe
conteúdo cnet oe-
otn: pn
ebfr
:eoe <>.<e
e../>
especificado em qoe
ut;
posição anterior ao }
elemento <e>
Pseudo-elemento
after: aplica eatr{
:fe
conteúdo cnet coe
otn: ls-
eatr
:fe <>.<e
e../>
especificado em qoe
ut;
posição posterior ao }
elemento <e>
NOTAÇÃO
Padrão Descrição
ab a seguido de b
(ab) a e b agrupados
[a|b] a ou b
[a| b]
| a ou b ou ambos
a? a é opcional
a* Zero ou vários a
a+ Um ou vários a
a{,m
n } a no mínimo n vezes e máximo m
www.w3c.br/div ulgacao/guiasref erencia/css2/ 3/34

4. 28/11/12 Guia de Ref erência Rápida CSS
TIPOS DE MÍDIA
Nome Mídia
al
l Todos os dispositivos
bale
ril Dispositivos táteis braille
ebse
mosd Impresoras braille
Dispositivos manuais/portáteis (tela pequena, monocromática, gráficos
hnhl
aded
bitmap, banda limitada)
Impresso, material opaco e documentos visualizados na tela em modo de
pit
rn
impressão
poeto
rjcin Projetores
sre
cen Telas de computador
sec
peh Sintetizadores de voz. Similar a "aural"
Mídias que utilizam caracteres de tamanho fixo, como terminais ou
ty
t
dispositivos portáteis com capacidades limitadas de tela
tv Televisores
SINTAXE
@mot"oh.s"tp-ii;
ipr flacs iomda
/ Cmnáis*
* oetro /
@ei tp-ii {
mda iomda
sltr{
eeo
Poreae vlre)
rpidd: ao(s;
}
};
UNIDADES
UNIDADES DE TAMANHO RELATIVAS
Unidade Descrição
px Tamanho em pixels (relativo ao dispositivo)
em Tamanho relativo à fonte utilizada no elemento ao qual está inserido
ex Correspondente à altura da fonte 'x’
UNIDADES DE TAMANHO ABSOLUTAS
Unidade Descrição
in Polegadas (1polegada = 2.54 cm)
cm Centímetros
mm Milímetros
pt Pontos (1pt = 1/72 polegadas)
pc Picas (1pica = 12 pontos)
PORCENTAGEM
Unidade Descrição
% Porcentagem
0 Valor '0' não requer atribuição de unidade
REPRESENTAÇÃO DE CORES
www.w3c.br/div ulgacao/guiasref erencia/css2/ 4/34

5. 28/11/12 Guia de Ref erência Rápida CSS
Unidade Descrição
#RGB
RGB Cor RGB (6 valores hexadecimais)
#G
RB Notação simplificada (#RGB = #RRGGBB)
rbRGB
g(,,) Cor RGB (3 valores de 0 a 255)
rbR,%B)
g(%G,% Cor RGB (3 valores percentuais)
MODELO DE CAIXA
BORDAS
Propriedade Descrição Valores Descrição
thin:
espessura
fina
medium:
espessura
bre-o-it
odrtpwdh [ thin | média
bre-ih-it
odrrgtwdh medium | thick:
Largura das bordas em cada um dos quatro lados:
bre-otm
odrbto- thick | espessura
superior, direito, inferior e esquerdo
wdh
it <tamanho> grossa
bre-etwdh
odrlf-it ]
Exemplo:
e{odr
bre-
bto-
otm
wdh
it:
mdu;}
eim
Exemplos:
Todas as
bordas
com
espessura
'thin':
e{odr
bre-
wdh
it:
ti;
hn}
www.w3c.br/div ulgacao/guiasref erencia/css2/ 5/34

6. 28/11/12 Guia de Ref erência Rápida CSS
Bordas
superior e
inferior
com
espessura
'thin',
bordas
direita e
esquerda
com
espessura
'thick':
e{odr
bre-
wdh
it:
ti
hn
tik}
hc;
Borda
superior
com
espessura
'thin',
bordas
direita e
[ thin | esquerda
medium | com
Atalho para definir de uma só vez larguras de bordas
bre-it
odrwdh thick | espessura
para todos os lados
<tamanho> 'thick',
] {1,4} borda
inferior
com
espessura
'medium':
e{odr
bre-
wdh
it:
ti tik
hn hc
mdu;
eim}
Borda
superior
com
espessura
'thin',
borda
direita com
espessura
'thick',
borda
inferior
com
espessura
'medium',
borda
esquerda
com
espessura
'thin':
e{odr
bre-
wdh
it:
ti tik
hn hc
mdu
eim
www.w3c.br/div ulgacao/guiasref erencia/css2/ 6/34

7. 28/11/12
ti;
hn}
bre-o-oo
odrtpclr
Exemplo:
bre-ih-oo
odrrgtclr [ <color> |
Cor das bordas em cada um dos quatro lados: superior, e{odr
bre-
bre-otm
odrbto- transparent
direito, inferior e esquerdo tpclr
o-oo:
clr
oo ]
bak }
lc;
bre-etclr
odrlf-oo
Exemplos:
Todas as
bordas
com a cor
'black':
e{odr
bre-
clr
oo:
bak}
lc;
Bordas
superior e
inferior
com a cor
'black',
bordas
direita e
esquerda
com a cor
'silver':
e{odr
bre-
clr
oo:
bak
lc
sle;
ivr}
Borda
superior
com a cor
'black',
bordas
direita e
esquerda
[ <color> | com a cor
Atalho para definir de uma só vez cores de bordas para
bre-oo
odrclr transparent 'silver',
todos os lados borda
] {1,4}
inferior
com a cor
'gray':
e{odr
bre-
clr
oo:
bak
lc
sle
ivr
ga;}
ry
Borda
superior
com a cor
'black',
borda
direita com
a cor
'silver',
borda
www.w3c.br/div ulgacao/guiasref erencia/css2/ 7/34

8. 28/11/12 Guia de Ref erência Rápida CSS
inferior
com a cor
'gray',
borda
esquerda
com a cor
'white':
e{odr
bre-
clr
oo:
bak
lc
sle
ivr
ga
ry
wie }
ht;
none:
nenhuma
borda
(largura
computada
como zero)
hidden:
idêntico à
'none',
exceto na
resolução
de conflito
de bordas
nos
elementos
de uma
tabela
dotted:
série de
pontos
dashed:
série de
segmentos
de
pequenas
linhas
solid:
segmento
de linha
[ none | simples e
hidden | contínua
bre-o-tl
odrtpsye dotted | double:
bre-ih-tl
odrrgtsye dashed | Duas
Estilo de bordas em cada um dos quatro lados: superior, linhas
bre-otm
odrbto- solid |
direito, inferior e esquerdo 'solid'. A
sye
tl double |
bre-etsye
odrlf-tl groove | soma das
ridge | inset duas
| outset ] linhas e o
espaço
entre elas
é igual ao
valor
definido
em
'border-
width'
www.w3c.br/div ulgacao/guiasref erencia/css2/ groove: 8/34

9. 28/11/12 Guia de Ref erência Rápida CSS
groove:
Efeito 3D,
entalhada
ridge:
Efeito 3D,
oposto de
'groove':
ressaltada
inset:
Efeito 3D,
baixo
relevo
outset:
Efeito 3D,
alto relevo
Exemplo:
e{odr
bre-
lf-
et
sye
tl:
dte;}
otd
Exemplos:
Todas as
bordas
com estilo
'solid':
e{odr
bre-
sye
tl:
sld}
oi;
Bordas
superior e
inferior
com estilo
'solid',
bordas
direita e
esquerda
com estilo
'dotted':
e{odr
bre-
sye
tl:
sld
oi
dte;
otd}
Borda
superior
com estilo
'solid',
bordas
[ none | direita e
hidden | esquerda
dotted | com estilo
dashed | 'dotted',
Atalho para definir de uma só vez estilos de bordas para solid | borda
bre-tl
odrsye
todos os lados double | inferior
groove | com o
ridge | inset estilo
| outset ] 'dashed':
www.w3c.br/div ulgacao/guiasref erencia/css2/ {1,4} e{odr
bre-
9/34

10. 28/11/12 Guia de Ref erência Rápida CSS
{1,4} e{odr
bre-
clr
oo:
sld
oi
dte
otd
dse;}
ahd
Borda
superior
com estilo
'solid',
borda
direita com
estilo
'dotted',
borda
inferior
com estilo
'dashed',
borda
esquerda
com o
estilo
'double':
e{odr
bre-
clr
oo:
sld
oi
dte
otd
dse
ahd
dul;}
obe
[ <border- Exemplo:
bre-o
odrtp top-width> e{odr
bre-
bre-ih
odrrgt Atalho para definir largura, estilo e cor das bordas || <border- bto:
otm
bre-otm
odrbto superior, direita, inferior ou esquerda top-style> || tik
hc
bre-et
odrlf <border- sld
oi
top-color> ] rd}
e;
[ <border-
Exemplo:
top-width>
e{odr
bre:
|| <border-
bre
odr Atalho para largura, estilo e cor das quatro bordas tik
hc
top-style> ||
sld
oi
<border-
rd}
e;
top-color> ]
Obs.: Valores em negrito são os adotados como padrão
MARGENS
Propriedade Descrição Valores Descrição
mri-o
agntp Exemplo:
[ <tamanho> |
mri-ih
agnrgt Tamaho da margem para cada um dos lados: bd
oy
<porcentagem>
mri-otm
agnbto superior, direito, inferior e esquerdo {agn
mri-
| auto ]
mri-et
agnlf tp 2m}
o: e
Exemplos:
Todas as
margens
com 2em:
bd
oy
{agn
mri:
www.w3c.br/div ulgacao/guiasref erencia/css2/ 2m}
e 10/34

11. 28/11/12
2m}
e
Margem
superior e
inferior
com 1em,
esquerda
e direita
com 2em:
bd
oy
{agn
mri:
1m2m}
e e
Margem
superior
com 1em;
[ <tamanho> | direita com
Atalho para definir de uma só vez o tamanho da
mri
agn <porcentagem> 2em;
margem para todos os lados
| auto ]{1,4} inferior
com 3em;
e
esquerda
com 2em:
bd
oy
{agn
mri:
1m2m
e e
3m}
e
Margem
superior
com 1em;
direita com
2em;
inferior
com 3em;
e
esquerda
com 4em:
bd
oy
{agn
mri:
1m2m
e e
3m4m}
e e
ESPAÇAMENTO
Propriedade Descrição Valores Descrição
pdigtp
adn-o Exemplo:
Distância utilizada para espaçamento em cada um [ <tamanho> |
pdigrgt
adn-ih bd
oy
dos quatro lados: superior, direito, inferior e <porcentagem>
pdigbto
adn-otm {adn-
pdig
esquerdo ]
pdiglf
adn-et tp 2m}
o: e
Exemplos:
Todas as
margens
com 2em:
bd
oy
{adn:
pdig
2m}
e
www.w3c.br/div ulgacao/guiasref erencia/css2/

12. 28/11/12 Guia de Ref erência Rápida CSS
Margem
superior e
inferior
com 1em,
esquerda
e direita
com 2em:
bd
oy
{adn:
pdig
1m2m}
e e
Margem
superior
com 1em;
[ <tamanho> | direita com
Atalho para definir de uma só vez a distância de
pdig
adn <porcentagem> 2em;
espaçamento para todos os lados inferior
]{1,4}
com 3em;
e
esquerda
com 2em:
bd
oy
{adn:
pdig
1m2m
e e
3m}
e
Margem
superior
com 1em;
direita com
2em;
inferior
com 3em;
e
esquerda
com 4em:
bd
oy
{adn:
pdig
1m2m
e e
3m4m}
e e
MODELO DE FORMTAÇÃO VISUAL
Descrição /
Propriedade Descrição Valores
Exemplos
inline: O
elemento
renderizado em
uma ou mais
linhas
block:
renderizado
como um bloco
list-item:
renderizado
como um item
de lista e em
linha(s)
run-in:
www.w3c.br/div ulgacao/guiasref erencia/css2/ 12/34

13. renderizado
como bloco ou
linha(s),
dependendo do
contexto
[ inline | block | inline-block:
list-item | run-in renderizado em
| inline-block | uma linha
table | inline- simples, mas
table | table- comporta-se
row-group | como um bloco
table-header- table, inline-
dsly
ipa Modos de exibição do conteúdo group | table- table, table-
footer-group | row-group,
table-row | table-column,
table-column- table-column-
group | table- group, table-
column | table- header-group,
cell | table- table-footer-
caption | none ] group, table-
row, table-cell,
table-caption:
esses valores
farão com que o
elemento se
comporte como
uma tabela
(sujeito a
restrições
descritas no
capítulo sobre
tabelas)
none: o
elemento não
será mostrado
no modo visual
Exemplo: e
{ipa:
dsly
nn;
oe}
static:
Posicionamento
normal de
acordo com o
fluxo normal dos
elementos na
página. As
proprieades
'top', 'right',
'bottom', e 'left'
não se aplicam
relative:
posicionamento
é calculado de
acordo com o
fluxo normal. O
efeito de
'position:relative'
é indefinido nos
elementos
13/34

14. 28/11/12 Guia de Ref erência Rápida CSS
'table-row-
group', 'table-
header-group',
'table-footer-
group', 'table-
row', 'table-
column-group',
'table-column',
'table-cell', e
'table-caption'
absolute:
[ static | Posicionamento
relative | (e
psto
oiin Esquema de posicionamento
absolute | fixed possivelmente o
] tamanho) é
especificado
com as
propriedades
'top', 'right',
'bottom', e 'left'.
Essas
propriedade são
especificadas
em relação ao
conteúdo do
bloco
fixed:
Posicionamento
é calculado tal
como o modelo
'absolute', mas
adicionalmente
se manterá fixo,
mesmo que se
utilize a barra de
rolagem
Exemplo:
@ei sre {
mda cen
eeepo
#xml
{oiin
psto:
fxd }
ie; }
@ei pit{
mda rn
eeepo
#xml
{oiin
psto:
sai;}
ttc}
top: Distância
vertical em
relação à
margem
superior
right: Distância
horizontal em
relação à
margem direita
bottom:
tp
o
[ <tamanho> | Distância
rgt
ih Distância do elemento com relação à
<porcentagem> vertical em
bto
otm extremidade de seu elemento-pai
| auto ] relação à
lf
et
www.w3c.br/div ulgacao/guiasref erencia/css2/ margem inferior
14/34