guia de referência rápida css
TRANSCRIPT
28/11/12 Guia de Ref erência Rápida CSS
1/34www.w3c.br/div ulgacao/guiasref erencia/css2/
Guia de Referência CSS2.1
CONTEÚDO
MódulosSeletoresNotaçãoTipos de mídiasSintaxeUnidadesModelo de caixaBordasMargensEspaçamentoModelo de formatação visualDetalhes do modelo de formatação visualEfeitos visuaisAgregador de conteúdo, numeração automática e listasCores e fundoPaginação para impressãoFontes tipográficasTextoTabelasInterface de usuário
SELETORES
Padrão Significado Exemplo CSS Exemplo (X)HTML
*Seletor universal:qualquer elemento
* {
color: #000000;
}
Aplicável a todos os elementos
e
Seletor de tipo deelemento: selecionaqualquer elemento<e>
e {
font-family: sans-
serif;}
<e> ... </e>
e f
Seletorcontextual:selecionaqualquer elemento<f> que estivercontido numelemento <e>
h1 em {
color: blue;
}
<e>...<f>....</f>...</e>
e > f
Seletor deelementos-filho:seleciona qualquerelemento <f>descendente diretode um elemento <e>
body > p {
line-height: 1.3;
}
<e>...<f>...</f>...</e>
e + f
Seletor adjacente:seleciona oelemento <f> que
estiver
h1 + h2 {
margin-top: -5mm;
}
<e>...<f> </f>...</e>
28/11/12 Guia de Ref erência Rápida CSS
2/34www.w3c.br/div ulgacao/guiasref erencia/css2/
estiverimediatamente apósum elemento <e>
}
e.classe
Seletor de classe:seleciona o(s)elemento(s) <e> emque se aplicou a"classe"
h1.pastoral {
color: green;
}
<e class="classe"... />
e#Id
Seletor de ID:seleciona oelemento <e>identificado com Id
h1#chapter1 {
text-align: center;
}
<e id="Id"... />
e , f
Agrupamento deseletores: Selecionaos elementos <e> e<f> do agrupamento
h1, h2 {
font-family: sans-
serif; }
<e> … </e> … <f> … </f>
e [atrib]
Seletor de Atributo:seleciona oelemento <e> quecontenha o atributoindicado
h1[title] {
color: blue;
}
<e atrib="valor" ... />
e
[atrib="valor"]
Seletor de Atributo:seleciona oelemento <e> com omesmo atributo e“valor”
span[class=exemplo]
{
color: blue;
}
<e class="exemplo" ... />
e
[atrib~="valor"]
Seletor de Atributo:seleciona oelemento <e> emque “valor” deatributo esteja emuma lista de valoresseparadas porespaços
a[rel~="copyright"]
{
color: red;
}?
<a rel="copyright copyleft
copyeditor"...> … </a>
e [atrib|="val"]
Seletor de Atributo:seleciona oelemento <e> emque valor do atributoseja idêntico a “val”ou inicia-se com“val”
*[lang|="pt"] {
color: red;
}
<e lang="pt-BR" .../>
e:first-child
Pseudo-classeprimeiro filho:seleciona o primeiroelemento <e>descendente doelemento-pai
div > p:first-child
{
text-indent: 0;
}
<P> Último P antes de 'nota'
<DIV class="nota">
<P> Primeiro P após nota'.
</DIV>
a:link
Pseudo-classe link:aplica-se aoelemento <a> comhiperlinks ouâncoras ainda nãovisitados
a:link {
color: red;
}
<a
href="http://endereço.link/">link</a>
a:visited
Pseudo-classevisited: aplica-se aoelemento <a> comhiperlinks ouâncoras já visitados
a:visited {
color: blue;
}
<a
href="http://endereço.link/">link</a>
Pseudo-classe
28/11/12 Guia de Ref erência Rápida CSS
3/34www.w3c.br/div ulgacao/guiasref erencia/css2/
e:active
Pseudo-classeactive: aplica-se aoelemento <e>quando este forativado pelo usuário
a:active {
color: lime;
}
<a
href="http://endereço.link/">link</a>
e:hover
Pseudo-classehover: aplica-se aoelemento <e>quando o cursorestiver sobre ele,mas sem ativá-lo
a:hover {
color: yellow;
}
<a
href="http://endereço.link/">link</a>
e:focus
Pseudo-classefocus: aplica-se aoelemento <e>quando o focoestiver posicionadonele
a:focus {
background: yellow;
}
<a
href="http://endereço.link/">link</a>
e:lang(val)
Pseudo-classe lang:aplica-se aoelemento <e> seeste estivermarcado com oidioma “val”
html:lang(pt)
{quotes: '« ' ' »';
}
<e lang="pt" ... />
e:first-line
Pseudo-elementofirst-line: aplica-se àprimera linha doelemento <e>
p:first-line {
text-transform:
uppercase; }
<e>...</e>
e:first-letter
Pseudo-elementofirst-letter: aplica-seà primera letra doelemento <e>
p:first-letter {
font-size: 3em;
font-weight:
normal;
}
<e>...</e>
e:before
Pseudo-elementobefore: aplicaconteúdoespecificado emposição anterior aoelemento <e>
e:before {
content: open-
quote;
}
<e>...</e>
e:after
Pseudo-elementoafter: aplicaconteúdoespecificado emposição posterior aoelemento <e>
e:after {
content: close-
quote;
}
<e>...</e>
NOTAÇÃO
Padrão Descrição
a b a seguido de b
( a b ) 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 {n, m} a no mínimo n vezes e máximo m
28/11/12 Guia de Ref erência Rápida CSS
4/34www.w3c.br/div ulgacao/guiasref erencia/css2/
TIPOS DE MÍDIA
Nome Mídia
all Todos os dispositivos
braille Dispositivos táteis braille
embossed Impresoras braille
handheldDispositivos manuais/portáteis (tela pequena, monocromática, gráficosbitmap, banda limitada)
printImpresso, material opaco e documentos visualizados na tela em modo deimpressão
projection Projetores
screen Telas de computador
speech Sintetizadores de voz. Similar a "aural"
ttyMídias que utilizam caracteres de tamanho fixo, como terminais oudispositivos portáteis com capacidades limitadas de tela
tv Televisores
SINTAXE
@import "folha.css" tipo-midia;
/* Comentários */
@media tipo-midia {
seletor {
Propriedade: valor(es);
}
};
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
28/11/12 Guia de Ref erência Rápida CSS
5/34www.w3c.br/div ulgacao/guiasref erencia/css2/
Unidade Descrição
#RRGGBB Cor RGB (6 valores hexadecimais)
#RGB Notação simplificada (#RGB = #RRGGBB)
rgb(R,G,B) Cor RGB (3 valores de 0 a 255)
rgb(R%,G%,B%) Cor RGB (3 valores percentuais)
MODELO DE CAIXA
BORDAS
Propriedade Descrição Valores Descrição
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>]
thin:espessurafinamedium:espessuramédiathick:espessuragrossa
Exemplo:e {border-
bottom-
width:
medium; }
Exemplos:Todas asbordascomespessura'thin':e {border-
width:
thin;}
28/11/12 Guia de Ref erência Rápida CSS
6/34www.w3c.br/div ulgacao/guiasref erencia/css2/
border-widthAtalho para definir de uma só vez larguras de bordaspara todos os lados
[ thin |medium |thick |<tamanho>] {1,4}
Bordassuperior einferiorcomespessura'thin',bordasdireita eesquerdacomespessura'thick':e {border-
width:
thin
thick;}
Bordasuperiorcomespessura'thin',bordasdireita eesquerdacomespessura'thick',bordainferiorcomespessura'medium':e {border-
width:
thin thick
medium;}
Bordasuperiorcomespessura'thin',bordadireita comespessura'thick',bordainferiorcomespessura'medium',bordaesquerdacomespessura'thin':e {border-
width:
thin thick
medium
28/11/12
7/34www.w3c.br/div ulgacao/guiasref erencia/css2/
thin;}
border-top-color
border-right-color
border-bottom-
color
border-left-color
Cor das bordas em cada um dos quatro lados: superior,direito, inferior e esquerdo
[ <color> |transparent]
Exemplo:e {border-
top-color:
black; }
border-colorAtalho para definir de uma só vez cores de bordas paratodos os lados
[ <color> |transparent] {1,4}
Exemplos:Todas asbordascom a cor'black':e {border-
color:
black;}
Bordassuperior einferiorcom a cor'black',bordasdireita eesquerdacom a cor'silver':e {border-
color:
black
silver;}
Bordasuperiorcom a cor'black',bordasdireita eesquerdacom a cor'silver',bordainferiorcom a cor'gray':e {border-
color:
black
silver
gray; }
Bordasuperiorcom a cor'black',bordadireita coma cor'silver',borda
28/11/12 Guia de Ref erência Rápida CSS
8/34www.w3c.br/div ulgacao/guiasref erencia/css2/
inferiorcom a cor'gray',bordaesquerdacom a cor'white':e {border-
color:
black
silver
gray
white; }
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 ]
none:nenhumaborda(larguracomputadacomo zero)hidden:idêntico à'none',exceto naresoluçãode conflitode bordasnoselementosde umatabeladotted:série depontosdashed:série desegmentosdepequenaslinhassolid:segmentode linhasimples econtínuadouble:Duaslinhas'solid'. Asoma dasduaslinhas e oespaçoentre elasé igual aovalordefinidoem'border-width'
groove:
28/11/12 Guia de Ref erência Rápida CSS
9/34www.w3c.br/div ulgacao/guiasref erencia/css2/
groove:Efeito 3D,entalhadaridge:Efeito 3D,oposto de'groove':ressaltadainset:Efeito 3D,baixorelevooutset:Efeito 3D,alto relevo
Exemplo:e {border-
left-
style:
dotted; }
border-styleAtalho para definir de uma só vez estilos de bordas paratodos os lados
[ none |hidden |dotted |dashed |solid |double |groove |ridge | inset| outset ]
{1,4}
Exemplos:Todas asbordascom estilo'solid':e {border-
style:
solid;}
Bordassuperior einferiorcom estilo'solid',bordasdireita eesquerdacom estilo'dotted':e {border-
style:
solid
dotted;}
Bordasuperiorcom estilo'solid',bordasdireita eesquerdacom estilo'dotted',bordainferiorcom oestilo'dashed':
e {border-
28/11/12 Guia de Ref erência Rápida CSS
10/34www.w3c.br/div ulgacao/guiasref erencia/css2/
{1,4} e {border-
color:
solid
dotted
dashed; }
Bordasuperiorcom estilo'solid',bordadireita comestilo'dotted',bordainferiorcom estilo'dashed',bordaesquerdacom oestilo'double':e {border-
color:
solid
dotted
dashed
double; }
border-top
border-right
border-bottom
border-left
Atalho para definir largura, estilo e cor das bordassuperior, direita, inferior ou esquerda
[ <border-top-width>|| <border-top-style> ||<border-top-color> ]
Exemplo:e {border-
bottom:
thick
solid
red;}
border Atalho para largura, estilo e cor das quatro bordas
[ <border-top-width>|| <border-top-style> ||<border-top-color> ]
Exemplo:e {border:
thick
solid
red;}
Obs.: Valores em negrito são os adotados como padrão
MARGENS
Propriedade Descrição Valores Descrição
margin-top
margin-right
margin-bottom
margin-left
Tamaho da margem para cada um dos lados:superior, direito, inferior e esquerdo
[ <tamanho> |<porcentagem>| auto ]
Exemplo:body
{margin-
top: 2em }
Exemplos:Todas asmargenscom 2em:body
{margin:
2em }
28/11/12
www.w3c.br/div ulgacao/guiasref erencia/css2/
marginAtalho para definir de uma só vez o tamanho damargem para todos os lados
[ <tamanho> |<porcentagem>| auto ]{1,4}
2em }
Margemsuperior einferiorcom 1em,esquerdae direitacom 2em:body
{margin:
1em 2em }
Margemsuperiorcom 1em;direita com2em;inferiorcom 3em;eesquerdacom 2em:body
{margin:
1em 2em
3em }
Margemsuperiorcom 1em;direita com2em;inferiorcom 3em;eesquerdacom 4em:body
{margin:
1em 2em
3em 4em }
ESPAÇAMENTO
Propriedade Descrição Valores Descrição
padding-top
padding-right
padding-bottom
padding-left
Distância utilizada para espaçamento em cada umdos quatro lados: superior, direito, inferior eesquerdo
[ <tamanho> |<porcentagem>]
Exemplo:body
{padding-
top: 2em }
Exemplos:Todas asmargenscom 2em:body
{padding:
2em }
28/11/12 Guia de Ref erência Rápida CSS
12/34www.w3c.br/div ulgacao/guiasref erencia/css2/
paddingAtalho para definir de uma só vez a distância deespaçamento para todos os lados
[ <tamanho> |<porcentagem>]{1,4}
Margemsuperior einferiorcom 1em,esquerdae direitacom 2em:body
{padding:
1em 2em }
Margemsuperiorcom 1em;direita com2em;inferiorcom 3em;eesquerdacom 2em:body
{padding:
1em 2em
3em }
Margemsuperiorcom 1em;direita com2em;inferiorcom 3em;eesquerdacom 4em:body
{padding:
1em 2em
3em 4em }
MODELO DE FORMTAÇÃO VISUAL
Propriedade Descrição ValoresDescrição /Exemplos
inline: Oelementorenderizado emuma ou maislinhasblock:renderizadocomo um blocolist-item:renderizadocomo um itemde lista e emlinha(s)run-in:
13/34
display Modos de exibição do conteúdo
[ inline | block |list-item | run-in| inline-block |table | inline-table | table-row-group |table-header-group | table-footer-group |table-row |table-column-group | table-column | table-cell | table-caption | none ]
renderizadocomo bloco oulinha(s),dependendo docontextoinline-block:renderizado emuma linhasimples, mascomporta-secomo um blocotable, inline-table, table-row-group,table-column,table-column-group, table-header-group,table-footer-group, table-row, table-cell,table-caption:esses valoresfarão com que oelemento secomporte comouma tabela(sujeito arestriçõesdescritas nocapítulo sobretabelas)none: oelemento nãoserá mostradono modo visual
Exemplo: e{display:
none;}
static:Posicionamentonormal deacordo com ofluxo normal doselementos napágina. Asproprieades'top', 'right','bottom', e 'left'não se aplicamrelative:posicionamentoé calculado deacordo com ofluxo normal. Oefeito de'position:relative'é indefinido noselementos
28/11/12 Guia de Ref erência Rápida CSS
14/34www.w3c.br/div ulgacao/guiasref erencia/css2/
position Esquema de posicionamento
[ static |relative |absolute | fixed]
'table-row-group', 'table-header-group','table-footer-group', 'table-row', 'table-column-group','table-column','table-cell', e'table-caption'absolute:Posicionamento(epossivelmente otamanho) éespecificadocom aspropriedades'top', 'right','bottom', e 'left'.Essaspropriedade sãoespecificadasem relação aoconteúdo doblocofixed:Posicionamentoé calculado talcomo o modelo'absolute', masadicionalmentese manterá fixo,mesmo que seutilize a barra derolagemExemplo:@media screen {
e#exemplo
{position:
fixed; }}
@media print {
e#exemplo
{position:
static;}}
top
right
bottom
left
Distância do elemento com relação àextremidade de seu elemento-pai
[ <tamanho> |<porcentagem>| auto ]
top: Distânciavertical emrelação àmargemsuperiorright: Distânciahorizontal emrelação àmargem direitabottom:Distânciavertical emrelação à
margem inferior
15/34
margem inferiorleft: Distânciahorizontal emrelação àmargemesquerda
Exemplo:e { top: 20px;
left: 40px;}
floatPosicionamento adjacente à esquerda ou àdireita do elemento
{ left | right |none ]
left: o elementoseráposicionadoflutuando àesquerda. Ofluxo doconteúdo nãointegrante doelemento seráposicionado àdireita a partirdo 'top' doelemento querecebe apropriedade'float'right: similar à'left', mas com oelementoflutuando àdireitanone: oelemento nãoflutua
Exemplo:e {float:
right;}
clear Controle para os posicionamentos float[ none | left |right | both ]
none: nenhumcontrole delimpeza deflutuação seráexecutadoleft: limpeza deflutuação àesquerda: oelemento seráposicionadoabaixo da bordainferior doelementoflutuante àesquerdaright: limpezade flutuação àdireita: oelemento seráposicionado
28/11/12 Guia de Ref erência Rápida CSS
16/34www.w3c.br/div ulgacao/guiasref erencia/css2/
abaixo da bordainferior doelementoflutuante àdireitaboth: oelemento seráposicionadoabaixo da bordainferior dequalquerelementoflutuante, seja àdireita ou àesquerda
Exemplo: e {clear: both;}
z-indexNíveis de profundidade de sobreposição deelementos
[ auto |<númerointeiro> ]
Os númerosserãoconsideradospara ordenar oselementos queficarãosobrepostos, domais baixo parao mais alto: 'z-index: 1'; 'z-index:2'; 'z-index: 3'; …
Exemplo: e {z-index: 1;}
directionDefine a direção de um texto: esquerda paradireita; direita para esquerda
[ ltr | rtl ]
Utilizado emclientes que têmsuporte aidiomas eescritabidirecional.ltr - direção daesquerda para adireitartl - direção dadireita para aesquerda
Exemplo:e {direction:
rtl;}
Para que adireção tenha oefeito atribuído,a propriedade'unicode-bidi'deve conter osvalores 'embed'ou 'bidi-override'
28/11/12 Guia de Ref erência Rápida CSS
www.w3c.br/div ulgacao/guiasref erencia/css2/
unicode-bidi Interação entre textos bidirecionais[ normal |embed | bidi-override ]
Utilizado emclientes que têmsuporta aidiomas eescritabidirecionalnormal – oelemento nãoembutirá oalgoritmo comsuportebidirecionalembed –embutiráalgoritmobidirecionalbidi-override –permite asobreposição
Obs.: Valores em negrito são os adotados como padrão
DETALHES DO MODELO DE FORMATAÇÃO VISUAL
Propriedade Descrição ValoresDescrição /Exemplos
width Largura[ <tamanho> |<porcentagem>| auto ]
Exemplo: e {width:
25%;}
min-width Largura mínima[ <tamanho> |<porcentagem>]
Exemplo:e {min-
width:
200px;}
max-width Largura máxima[ <tamanho> |<porcentagem>| none ]
Exemplo:e {max-
width:
600px;}
height Altura[ <tamanho> |<porcentagem>| auto ]
Exemplo:e {height:
250px;}
min-height Altura mínima[ <tamanho> |<porcentagem>]
Exemplo:e {min-
height:
30%;}
max-height Altura máxima[ <tamanho> |<porcentagem>| none ]
Exemplo:e {max-
height:
70%;}
line-height Distância entre as linhas de um texto
[ normal |<número> |<tamanho> |<porcentagem>]
Exemplo:e {line-
height:
1.2em;}
baseline - Alinha de basedo elementoe doelemento
superior
28/11/12 Guia de Ref erência Rápida CSS
18/34www.w3c.br/div ulgacao/guiasref erencia/css2/
vertical-align Alinhamento vertical do texto
[ baseline | sub| super | top |text-top | middle| bottom | text-bottom |<porcentagem>| <tamanho> ]
superior(elemento-pai) serãoconsideradasparaalinhamento.Se nãohouver linhade base noelemento,seráconsideradosua margeminferiorsub - A linhade base doelementoseráalinhada coma linha debase deconteúdosubscrito doelementosuperiorsuper - Alinha de basedo elementoseráalinhada coma linha debase deconteúdosuperescritodo elementosuperiortop - Alinhao topo doelementocom a linhade topo doelementosuperiortext-top - Abasesuperior doelementoseráalinhada coma linhasuperior doconteúdo detextos doelemento-paimiddle - Alinha centraldo elementoe de seuelementosuperiorserão
28/11/12
19/34www.w3c.br/div ulgacao/guiasref erencia/css2/
consideradasparaalinhamento.(linha centraldo elementosuperior =ponto centralda altura daletra 'x')bottom -Alinha orodapé doelementocom orodapé doelementosuperiortext-bottom- A baseinferior doelementoseráalinhada coma linhainferior doconteúdo detextos doelemento-pai
Exemplo:e {vertical-
align: sub;}
Obs.: Valores em negrito são os adotados como padrão
EFEITOS VISUAIS
Propriedade Descrição ValoresDescrição /Exemplos
visible -Todo oconteúdo doelementoestará visível(nãocortado) etalvezconforme aárea sejarenderizadopara fora doelementohidden - Oconteúdoserá cortado(se maiorque a áreadisponível) enão haverábarra de
28/11/12 Guia de Ref erência Rápida CSS
20/34www.w3c.br/div ulgacao/guiasref erencia/css2/
overflowComportamento do browser quando o conteúdo doelemento for maior que sua área
[ visible |hidden |scroll | auto]
rolagens noelementoscroll - Oconteúdoserá cortado(se maiorque a áreadisponível)mas haverábarra derolagens noelemento.Quando amídia forespecificadacomo 'print',o conteúdodo elementopoderá serimpresso. auto - Ométodo seráatribuídopelo browsercliente
Exemplo:e {overflow:
scroll;}
clip Especifica região de um elemento a ser exibida
[ rect(<tamanhotopo>,<tamanhodireito>,<tamanhorodapé>,<tamanhoesquerdo>)| auto ]
rect –Delimita árearetangular doelemento(topo, direita,rodapé,esquerda) naqual oconteúdoficará visível auto - Oelementonão terá clipe sua própriaárea seráidêntica à devisualização
Exemplo:e {clip:
rect(5px,
40px, 45px,
5px); }
visible - Oelementoserá exibidohidden - Oelementonão seráexibido,ficando
28/11/12 Guia de Ref erência Rápida CSS
21/34www.w3c.br/div ulgacao/guiasref erencia/css2/
visibility Define se um elemento estará ou não visível[ visible |hidden |collapse ]
totalmentetransparente.Mas o leiauteda páginacontinuarásendoafetadocollapse -Mesmo efeitoque hidden,mas aplicávela elementosde tabela
Exemplo:e
{visibility:
hidden; }
Obs.: Valores em negrito são os adotados como padrão
AGREGADOR DE CONTEÚDO, NUMERAÇÃO AUTOMÁTICA E LISTAS
Propriedade Descrição Valores Descrição / Exemplos
content
Agregador deconteúdo para ospseudo-elementos:after e :before
[ normal |none | [<texto> |<uri> |<contador> |attr(X) |open-quote |close-quote |no-open-quote | no-close-quote]+ ]
none: Nenhum conteúdo será agregado.normal: Como 'none', para os pseudo-elementos:before e :after<texto>: Conteúdo de texto específico seráagregado. <uri>: Valor de uma URI designando um recursoexterno (como uma imagem). Se o browser nãopuder exibir recursos externos, ele não apareceráou alguma indicação apontará essa impossibilidade<counter>: Contadores cujos valores serãoagregados. Podem ser especificados com duasdiferentes funções: 'counter()' ou 'counters()'. Aprimeira pode ser de duas formas: 'counter(name)',para usar estilo padrão; ou 'counter(name, style)',para especificar o estilo. O texto que será agregadocorresponde ao valor de incremento do contadorpara um determinado campo 'name' no pseudo-elemento específico; e sua formatação será aindicada em 'style' (o padrão é 'decimal'). As opçõespara 'style' são as mesmas possíveis em 'list-style-type'. As seguintes palavras não podem ser usadaspara 'name': 'none', 'inherit' ou 'initial'. A outrafunção também tem duas formas: 'counters(name,string)', para usar estilo padrão; ou 'counters(name,string, style)', para indicar estilo. Para obter maisinformações sobre counters, acessehttp://www.w3.org/TR/CSS21/generate.html#countersopen-quote | close-quote - O conteúdo agregadoserá substituído por aspasno-open-quote | no-close-quote - Nenhumconteúdo é introduzido, mas incrementa(decrementa)attr(X) - Esta função retorna a 'string' como um valordo atributo X. A 'string' não será interpretada peloprocessador do CSS
Exemplo:
28/11/12 Guia de Ref erência Rápida CSS
22/34www.w3c.br/div ulgacao/guiasref erencia/css2/
Exemplo:H1:before {content: counter(secao, upper-roman)
"-" }
quotes
Especifica aspasutilizadas emcitações
[ [ <texto><texto> ]+ |none ]
Exemplo, especificando dois pares de aspas paraidiomas diferentes:
e:lang(en) {quotes: '"' '"' "'" "'" }
e:lang(pt) { quotes: "«" "»" '"' '"' }
counter-reset
Inicializa umcontadoridentificado napropriedade'content'
[ [ <name><inteiro>? ]+| none ]
Exemplo:h1 {counter-reset: secao; }
counter-
increment
Incrementa umcontadoridentificado napropriedade'content'
[ [ <name><inteiro>? ]+| none ]
Exemplo:H2:before {
content: counter(capitulo) "." counter(secao) "
";
counter-increment: secao;
}
list-style
Atalho para definirde uma só veztodas aspropriedades delista: type, positione image
[ <list-style-type> || <list-style-position> ||<list-style-image> ]
Exemplo:li {list-style: decimal-leading-zero outside
url(imagem.jpg); }
list-style-
image
Imagem aplicadaaos elementos deuma lista
[url("http://...")| none ]
Exemplo:li {
list-style-image:
url("http://png.com/ellipse.png");}
list-style-
type
Estilo visualaplicado aosmarcadores de umalista
[ disc | circle| square |decimal |decimal-leading-zero| lower-roman |upper-roman| lower-greek| lower-latin |upper-latin |armenian |georgian |lower-alpha |upper-alpha |none ]
disc - ponto sólidocircle - círculo vaziosquare - quadrado vaziodecimal - números decimas, iniciando com 1decimal-leading-zero - números decimais comzeros iniciais à esquerda (ex.: 01, 02, 03, ..., 98, 99)lower-roman - números romanos minúsculos (i, ii, iii,iv, v, etc.). upper-roman - números romanos maiúsculos (I, II,III, IV, V, etc.)georgian - numeração georgeana tradicional (an,ban, gan, ..., he, tan, in, in-an, ...)armenian - numeração armênia tradicionallower-latin | lower-alpha - letras ascii minúsculas(a, b, c, ... z)upper-latin | upper-alpha - letras ascii maiúsculas(A, B, C, ... Z)lower-greek - caracteres gregos clássicos alpha,beta, gama, ... (α, β, γ, …)none – nenhum marcador de lista
Exemplo: li {list-style-type: lower-alpha;}
list-style-
position
Posicionamentointerno dosmarcadores de umalista
[ inside |outside ]
inside – conteúdo da lista será indentado, mas otexto não será alinhado após quebra de linhaoutside – diferente de inside, o texto será alinhadona indentação mesmo com quebra de linha
Exemplo:
ul {list-style-position: outside; }
28/11/12 Guia de Ref erência Rápida CSS
23/34www.w3c.br/div ulgacao/guiasref erencia/css2/
ul {list-style-position: outside; }
ul.compact {list-style-position: inside;}
Obs.: Valores em negrito são os adotados como padrão
CORES E FUNDO
Propriedade Descrição Valores Descrição / Exemplos
colorCor do texto presente noelemento
<color>Exemplo:e {color: red; }
e {color: rgb(255,0,0); }
background-
colorCor de fundo do elemento
[ <color> |transparent ]
Para 'transparent' será adotada acor de fundo do elementosuperior e na ausência deste, acor de fundo padrão do browser
Exemplo:e {background-color: #f00; }
e {background-color:
transparent; }
background-
imageImagem de fundo do elemento
[ url(...) | none]
Exemplo:e {background-image:
url(http://caminho/imagem.jpg);
}
background-
repeat
Define se e como a imagem defundo utilizada se repetirá
[ repeat |repeat-x |repeat-y | no-repeat ]
repeat: a imagem é repetida emambas as direções: horizontal everticalrepeat-x: a imagem é repetidasomente horizontalmenterepeat-y: a imagem é repetidasomente verticalmente.no-repeat: a imagem não serárepetida e somente uma cópia damesma será renderizada
Exemplo:e {background-repeat: no-
repeat;}
background-
attachment
Define se a imagem de fundoutilizada será fixa ou comrolagem
[ scroll | fixed ]
scroll: a imagem acompanha arolagem da página na janela dobrowser, mantendo-se comoimagem de fundofixed: a imagem é fixada napágina e não acompanhará arolagem da página
background-
position
Posição da imagem de fundoutilizada.
[ [<porcentagem>| <tamanho> |left | center |right ] [<porcentagem>| <tamanho> |top | center |bottom]? ] | [ [left | center |right ] || [ top |
top: Equivalente a '0%' doposicionamento verticalright: Equivalente a '100%' doposicionamento horizontalbottom: Equivalente a '100%' doposicionamento verticalleft: Equivalente a '0%' doposicionamento horizontal. center: Equivalente a '50%' doposicionamento horizontal ou'50%' do posicionamento vertical
Exemplo:
28/11/12 Guia de Ref erência Rápida CSS
24/34www.w3c.br/div ulgacao/guiasref erencia/css2/
center | bottom] ]
body {background-position:
right top; }
body {background-position: 100%
0; }
background
Atalho para definir de uma só veztodas as propriedades deimagem de fundo
[ <background-color> ||<background-image> ||<background-repeat> ||<background-attachment> ||<background-position> ]
Exemplo:e {background: red
url("chess.png")
repeat-x fixed 50% right; }
Obs.: Valores em negrito são os adotados como padrão
PAGINAÇÃO PARA IMPRESSÃO
Propriedade Descrição ValoresDescrição
/Exemplos
page-break-before Define quebra de página antes do elemento
[ auto |always |avoid |left |right ]
auto:inserequebra depáginasomentesenecessárioalways:sempreinserequebra depáginaantes doelementoavoid:evitainserirquebra depáginaantes doelementoleft: insereuma ouduasquebrasde páginasantes doelemento,de modoque apáginageradaseja umapágina parright:insere umaou duas
quebras
28/11/12 Guia de Ref erência Rápida CSS
25/34www.w3c.br/div ulgacao/guiasref erencia/css2/
quebrasde páginasantes doelemento,de modoque apáginageradaseja umapáginaímpar
Exemplo: e{page-
break-
before:
always; }
page-break-after Define quebra de página após o elemento
[ auto |always |avoid |left |right ]
auto:inserequebra depáginasomentesenecessárioalways:sempreinserequebra depáginaapós oelementoavoid:evitainserirquebra depáginaapós oelementoleft: insereuma ouduasquebrasde páginasapós oelemento,de modoque apáginageradaseja umapágina parright:insere umaou duasquebrasde páginasapós oelemento,de modoque apáginagerada
28/11/12
26/34www.w3c.br/div ulgacao/guiasref erencia/css2/
geradaseja umapáginaímpar
Exemplo: e{page-
break-
after:
always; }
page-break-inside Define ou evita quebra de páginas dentro de um elemento[ avoid |auto ]
auto:inserequebra depáginasomentesenecessárioavoid:evitainserirquebra depáginadentro doelementoExemplo:e {page-
break-
inside:
avoid; }
orphansNúmero mínimo de linhas antes da quebra de umparágrafo que pode aparecer no final de uma página
<númerointeiro>
Somentevalorespositivossãopermitidos
Exemplo:e
{orphans:
2; }
widowsNúmero mínimo de linhas após a quebra de um parágrafoque pode aparecer no início de uma página
<númerointeiro>
Somentevalorespositivossãopermitidos
Exemplo:e {widows:
2; }
Obs.: Valores em negrito são os adotados como padrão
FONTES TIPOGRÁFICAS
Propriedade Descrição ValoresDescrição /Exemplos
As seguintesfamílias-genéricasde fontes sãodefinidas em
28/11/12 Guia de Ref erência Rápida CSS
27/34www.w3c.br/div ulgacao/guiasref erencia/css2/
font-family Família(s) de fontes
[ [ <nome-fonte> |<família-genérica> ] [,<nome-fonte> |<família-genérica> ]* ]
CSS2.1:
'serif''sans-serif''cursive''fantasy''monospace'
Exemplo: e {font-family: "New
Century
Schoolbook",
serif; }
font-style Estilo utilizado na fonte[ normal | italic| oblique ]
normal: fonte doelemento semefeito itálico ouoblíquoitalic: fonte doelemento comefeito itálicooblique: fonte doelemento comefeito oblíquo
Exemplo:e {font-style:
italic; }
font-variantExibe o texto em pequena caixa-alta(versalete) ou fonte normal
[ normal |small-caps ]
normal: fonte doelemento semefeito decapitalizaçãosmall-caps: fontedo elemento comefeito de pequenacaixa alta(versalete)
Exemplo:e {font-variant:
small-caps; }
font-weight Peso da fonte
[ normal | bold| bolder | lighter| 100 | 200 |300 | 400 | 500| 600 | 700 |800 | 900 ]
normal: fonte doelemento comefeito padrão depeso(corresponde aovalor 400)bold: fonte doelemento comefeito de negrito(corresponde aovalor 700)bolder: fonte doelemento com ovalor de pesoimediatamentesuperior ao dovalor herdado(p.ex: de 400 para500)lighter: fonte do
28/11/12 Guia de Ref erência Rápida CSS
28/34www.w3c.br/div ulgacao/guiasref erencia/css2/
elemento com ovalor de pesoimediatamenteinferior ao do valorherdado (p.ex: de400 para 300)
Exemplo:e {font-weight:
bold; }
font-size Tamanho da fonte
[ [ xx-small | x-small | small |medium | large| x-large | xx-large] | [larger |smaller] |<tamanho> |<porcentagem>]
medium: fonte doelemento comvalor padrão detamanho eequivalente aopadrão dobrowser. Osdemais valores (xx-small | x-small |small | large | x-large | xx-large)são calculadospelo browserconsiderandoesse valor'medium'.larger | smaller:aumenta oudiminui o tamanhoem relação aovalor herdado.tamanho: valorabsoluto. Não sãopermitidos valoresnegativos.porcentagem:porcentagem dotamanho do valorherdado.
Exemplo:e {font-size:
90%; }
Além dos valorespara aspropriedades deestilo, variação,peso, tamanho,altura da linha efamília, pode-seutilizar osseguintes, deacordo com oambiente dousuário:
caption: fonteutilizada porcontroles comlegenda (ex.:
28/11/12 Guia de Ref erência Rápida CSS
29/34www.w3c.br/div ulgacao/guiasref erencia/css2/
fontAtalho para definir de uma só vez todas aspropriedades de fonte
[ [ [ <font-style>|| <font-variant>|| <font-weight>]? <font-size> [/ <line-height>]? <font-family>] | caption | icon| menu |message-box |small-caption |status-bar ]
botões, drop-downs, etc.)icon: fonteutilizada emíconesmenu: fonteutilizada emmenus do sistema(ex.: dropdownmenus e menussuspensos)message-box:fonte utilizada emcaixas de diálogo.small-caption:fonte utilizada emcontroles comlegenda reduzidastatus-bar: fonteutiliza em barra destatus das janelas
Exemplo:e {font: 300
italic
1.3em/1.7em
"Helvetica",
sans-serif; }
Obs.: Valores em negrito são os adotados como padrão
TEXTO
Propriedade Descrição ValoresDescrição /Exemplos
text-indentRecuo à esquerda da primeira linha em um blocode texto
[ <tamanho> |<porcentagem>]
Exemplo: e {text-
indent: 3em; }
text-align Alinhamento do texto[ left | right |center | justify ]
left:alinhamento dotexto àesquerdaright:alinhamento dotexto à direitacenter:alinhamento dotextocentralizadojustify:alinhamento dotexto justificado
Exemplo:e {text-align:
center; }
none: nãoproduzdecoração no
texto do
30/34
text-decorationEfeitos decorativos no texto como sublinhado,tachado, linha acima e piscante
[ none | [underline ||overline || line-through || blink] ]
texto doelementounderline:cada linha detexto doelemento teráuma linhaabaixo(sublinhado)overline: cadalinha de textodo elementoterá uma linhaacimaline-through:cada linha detexto doelemento teráuma linhacortando-o aomeio (tachado)blink: textospiscantesalternadamenteentre visíveis enão visíveis
Exemplo:e {text-
decoration:
underline; }
letter-spacing Espaçamento entre caracteres[ normal |<tamanho> ]
Exemplo:e {letter-
spacing:
0.1em; }
word-spacing Espaçamento entre palavras[ normal |<tamanho> ]
Exemplo:e {word-
spacing: 1em;
}
text-transform Transforma o texto em maiúsculas/minúsculas
[ capitalize |uppercase |lowercase |none ]
capitalize:coloca oprimeirocaracter decada palavrado elementoem maiúsculas(caixa alta)uppercase:coloca todos oscaracteres decada palavrado elementoem maiúsculas(caixa alta)lowercase :coloca todos oscaracteres decada palavrado elementoem minúsculas
(caixa baixa)
28/11/12 Guia de Ref erência Rápida CSS
31/34www.w3c.br/div ulgacao/guiasref erencia/css2/
(caixa baixa)none: nãoaplica efeitosdecapitalização
Exemplo:e {text-
transform:
capitalize; }
white-spaceDefinições sobre espaços em branco numdeterminado elemento
[ normal | pre |nowrap | pre-wrap | pre-line ]
normal: utilizaa configuraçãopadrão dobrowser paraespaçamentosem brancopre: todos osespaços embrancopresentes nocódigo fonteserão exibidosno elementonowrap: osespaços embranco serãotratados como'normal', masas quebras delinha serãosuprimidaspre-wrap:todos osespaços embrancocontantes nocódigo-fonteserão exibidosno elementopre-line: osespaços embranco serãotratados comonormal.
Exemplo:e {white-
space: pre; }
Obs.: Valores em negrito são os adotados como padrão
TABELAS
Propriedade Descrição ValoresDescrição /Exemplos
top:Posicionamentodo título antesda área databela
28/11/12 Guia de Ref erência Rápida CSS
32/34www.w3c.br/div ulgacao/guiasref erencia/css2/
caption-side Posicionamento do título em relação à tabela[ top |bottom ]
bottom:Posicionamentodo título abaixoda área databela
Exemplo: e {caption-
side: bottom;
}
table-layoutDefine o algoritmo usado para a renderização databela
[ auto | fixed]
auto: utilizaalgum algoritmode leiauteautomático.fixed: utilizaalgoritmo deleiaute fixo.
Exemplo:table {table-
layout: fixed;
}
border-collapse Seleciona o modelo de bordas a ser utilizado[ collapse |separate ]
separate: asbordas serãorenderizadaspara cadacélula, dado aimpressão delinha duplacollapse: asbordas dascélulas serãomescladas,dando aimpressão deuma única linha
Exemplo:table {border-
collapse:
collapse; }
border-spacingDistância entre as bordas de células adjacentes(quando 'border-collapse=separated')
<tamanho><tamanho>?
Exemplo:table {border-
spacing: 15pt;
}
table {border-
spacing: 10pt
5pt; }
empty-cells Visibilidade das bordas de células sem conteúdo[ show |hide ]
show: exibe ascélulas vaziasda tabelahide: não exibeas célulasvazias databela
Exemplo:table {empty-
cells: hide; }
28/11/12 Guia de Ref erência Rápida CSS
www.w3c.br/div ulgacao/guiasref erencia/css2/
Obs.: Valores em negrito são os adotados como padrão
INTERFACE DE USUÁRIO
Propriedade Descrição ValoresDescrição /Exemplos
cursor Especifica o cursor
[[http://.../cursor.ico,]*[ auto | crosshair |default | pointer |move | e-resize | ne-resize | nw-resize | n-resize | se-resize |sw-resize | s-resize |w-resize | text | wait |help | progress ]
Exemplo: e
{cursor:help;
}
outline-width Largura da linha de contorno <border-width>
Aceita osmesmosvalores de'border-width'
Exemplo:e {outline-
width: thin; }
outline-style Estilo da linha de contorno <border-style>
Aceita osmesmosvalores de'border-style'
Exemplo:e {outline-
style: dotted;
}
outline-color Cor da linha de contorno [ <color> | invert ]
color: valorcorrespondentea uma corinvert: corinversa à áreado elemento(prática comumpara tornar o'focus' visível)
Exemplo:e {outline-
color: #f00; }
outlineAtalho para definir de uma só vez todas aspropriedades de outline
[ <outline-color> ||<outline-style> ||<outline-width> ]
Exemplo:active
{outline:
black dotted
thick; }
(Aural) Freqüência em que os 'headers' da
once: Ostítulos detabelas serão'falados' umavez, antes dasérie de célulasalways: Ostítulos de
tabelas serão
28/11/12 Guia de Ref erência Rápida CSS
34/34www.w3c.br/div ulgacao/guiasref erencia/css2/
speak-header(Aural) Freqüência em que os 'headers' databela serão pronunciados. Utilizado quando'media=speech'
[ once | always ]tabelas serão'falados'sempre queocorrer umacélulapertinente
Exemplo:e {speak-
header:
always; }
Obs.: Valores em negrito são os adotados como padrão
Especificação CSS 2.1Download da versão em PDFW3C Escritório Brasil
|
Webmaster · Última atualização: 25/08/2009 13:00PM
Copyright © 2004-2008 W3C® (MIT, ERCIM, Keio), Todos os direitos reservados. Aplicam-se as normas pararesponsabilidade, marcas registradas, uso de documentos e licença de software do W3C. Sua interação comeste site seguirá nossas especificações de privacidade para o público e para filiados.