guia de referência rápida css

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>

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-seletores

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-notacao

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-tipos

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-sintaxe

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-unidades

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-caixa

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-bordas

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-margens

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-espacamento

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-formatacao

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-formatacao-det

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-efeitos

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-agregador

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-cores

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-paginacao

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-fontes

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-texto

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-tabelas

http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-interface



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


Pseudo-classe



e:active

Pseudo-classeactive: aplica-se aoelemento <e>quando este forativado pelo usuário

a:active {

color: lime;

}

<a


e:hover

Pseudo-classehover: aplica-se aoelemento <e>quando o cursorestiver sobre ele,mas sem ativá-lo

a:hover {

color: yellow;

}

<a


e:focus

Pseudo-classefocus: aplica-se aoelemento <e>quando o focoestiver posicionadonele

a:focus {

background: yellow;

}

<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



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



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;}



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


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



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:



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-



{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


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 }


{margin:

1em 2em

3em 4em }

ESPAÇAMENTO


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 }



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 }


{padding:

1em 2em

3em }


{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



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



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'



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


DETALHES DO MODELO DE FORMATAÇÃO VISUAL


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



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


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;}


EFEITOS VISUAIS


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



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



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; }


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:



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; }



ul {list-style-position: outside; }

ul.compact {list-style-position: inside;}


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:



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; }


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



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


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; }


FONTES TIPOGRÁFICAS


As seguintesfamílias-genéricasde fontes sãodefinidas em



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



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.:



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; }


TEXTO


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)



(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; }


TABELAS


top:Posicionamentodo título antesda área databela



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; }




INTERFACE DE USUÁRIO


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



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; }


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.

http://www.w3.org/TR/CSS21/

http://www.w3c.br/divulgacao/pdf/guia-css-w3cbr.pdf

http://www.w3c.br/

http://www.nic.br/

http://validator.w3.org/check?uri=referer

http://jigsaw.w3.org/css-validator/

http://www.w3.org/Consortium/Legal/ipr-notice#Copyright

http://www.w3.org/

http://www.csail.mit.edu/

http://www.ercim.org/

http://www.keio.ac.jp/

http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer

http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks

http://www.w3.org/Consortium/Legal/copyright-documents

http://www.w3.org/Consortium/Legal/copyright-software

http://www.w3.org/Consortium/Legal/privacy-statement#Public

http://www.w3.org/Consortium/Legal/privacy-statement#Members

guia de referência rápida css

Documents