W3C Escritório Brasil Guia de Referência CSS 2.1


Conteúdo

Seletores

Módulo dos 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 de elemento: seleciona qualquer elemento <e> e {
font-family: sans-serif;}		 <e> ... </e>
e f Seletor contextual:seleciona qualquer elemento <f> que estiver contido num elemento <e> h1 em {
color: blue;
}		 <e>...<f>....</f>...</e>
e > f Seletor de elementos-filho: seleciona qualquer elemento <f> descendente direto de um elemento <e> body > p {
line-height: 1.3;
}		 <e>...<f>...</f>...</e>
e + f Seletor adjacente: seleciona o elemento <f> que estiver imediatamente após um elemento <e> h1 + h2 {
margin-top: -5mm;
}		 <e>...<f> </f>...</e>
e.classe Seletor de classe: seleciona o(s) elemento(s) <e> em que se aplicou a "classe" h1.pastoral {
color: green;
}		 <e class="classe"... />
e#Id Seletor de ID: seleciona o elemento <e> identificado com Id h1#chapter1 {
text-align: center;
}		 <e id="Id"... />
e , f Agrupamento de seletores: Seleciona os elementos <e> e <f> do agrupamento h1, h2 {
font-family: sans-serif; }		 <e> … </e> … <f> … </f>
e [atrib] Seletor de Atributo: seleciona o elemento <e> que contenha o atributo indicado h1[title] {
color: blue;
}		 <e atrib="valor" ... />
e [atrib="valor"] Seletor de Atributo: seleciona o elemento <e> com o mesmo atributo e “valor” span[class=exemplo] {
color: blue;
}		 <e class="exemplo" ... />
e [atrib~="valor"] Seletor de Atributo: seleciona o elemento <e> em que “valor” de atributo esteja em uma lista de valores separadas por espaços a[rel~="copyright"]{
color: red;
}?		 <a rel="copyright copyleft copyeditor"...> … </a>
e [atrib|="val"] Seletor de Atributo: seleciona o elemento <e> em que valor do atributo seja idêntico a “val” ou inicia-se com “val” *[lang|="pt"] {
color: red;
}		 <e lang="pt-BR" .../>
e:first-child Pseudo-classe primeiro filho: seleciona o primeiro elemento <e> descendente do elemento-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 ao elemento <a> com hiperlinks ou âncoras ainda não visitados a:link {
color: red;
}		 <a href="http://endereço.link/">link</a>
a:visited Pseudo-classe visited: aplica-se ao elemento <a> com hiperlinks ou âncoras já visitados a:visited {
color: blue;
}		 <a href="http://endereço.link/">link</a>
e:active Pseudo-classe active: aplica-se ao elemento <e> quando este for ativado pelo usuário a:active {
color: lime;
}		 <a href="http://endereço.link/">link</a>
e:hover Pseudo-classe hover: aplica-se ao elemento <e> quando o cursor estiver sobre ele, mas sem ativá-lo a:hover {
color: yellow;
}		 <a href="http://endereço.link/">link</a>
e:focus Pseudo-classe focus: aplica-se ao elemento <e> quando o foco estiver posicionado nele a:focus {
background: yellow;
}		 <a href="http://endereço.link/">link</a>
e:lang(val) Pseudo-classe lang: aplica-se ao elemento <e> se este estiver marcado com o idioma “val” html:lang(pt) {quotes: '« ' ' »'; } <e lang="pt" ... />
e:first-line Pseudo-elemento first-line: aplica-se à primera linha do elemento <e> p:first-line {
text-transform: uppercase; }		 <e>...</e>
e:first-letter Pseudo-elemento first-letter: aplica-se à primera letra do elemento <e> p:first-letter {
font-size: 3em; font-weight: normal;
}		 <e>...</e>
e:before Pseudo-elemento before: aplica conteúdo especificado em posição anterior ao elemento <e> e:before {
content: open-quote;
}		 <e>...</e>
e:after Pseudo-elemento after: aplica conteúdo especificado em posição posterior ao elemento <e>

e:after {
content: close-quote;
}

 <e>...</e>

Notação

Módulo de 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

Módulo de tipos de mídia
Nome Mídia
all Todos os dispositivos
braille Dispositivos táteis braille
embossed Impresoras braille
handheld Dispositivos manuais/portáteis (tela pequena, monocromática, gráficos bitmap, banda limitada)
print Impresso, material opaco e documentos visualizados na tela em modo de impressão
projection Projetores
screen Telas de computador
speech Sintetizadores de voz. Similar a "aural"
tty Mídias que utilizam caracteres de tamanho fixo, como terminais ou dispositivos portáteis com capacidades limitadas de tela
tv Televisores

Sintaxe

Módulo de sintaxe
@import "folha.css" tipo-midia;
/* Comentários */
@media tipo-midia {
seletor {
Propriedade: valor(es);
}
};

Unidades

Unidades de tamanho relativas

Módulo de unidades 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

Módulo de unidades 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

Módulo de porcentagem
Unidade Descrição
% Porcentagem
0 Valor '0' não requer atribuição de unidade

Representação de cores

Módulo de 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

Modelo de caixa CSS

Bordas

Módulo de 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: espessura fina
medium: espessura média
thick: espessura grossa

Exemplo:
e {border-bottom-width: medium; }
border-width Atalho para definir de uma só vez larguras de bordas para todos os lados [ thin | medium | thick | <tamanho> ] {1,4}

Exemplos:
Todas as bordas com espessura 'thin':
e {border-width: thin;}

Bordas superior e inferior com espessura 'thin', bordas direita e esquerda com espessura 'thick':
e {border-width: thin thick;}

Borda superior com espessura 'thin', bordas direita e esquerda com espessura 'thick', borda inferior com espessura 'medium':
e {border-width: thin thick medium;}

Borda superior com espessura 'thin', borda direita com espessura 'thick', borda inferior com espessura 'medium', borda esquerda com espessura 'thin':
e {border-width: thin thick medium 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-color Atalho para definir de uma só vez cores de bordas para todos os lados [ <color> | transparent ] {1,4}

Exemplos:
Todas as bordas com a cor 'black':
e {border-color: black;}

Bordas superior e inferior com a cor 'black', bordas direita e esquerda com a cor 'silver':
e {border-color: black silver;}

Borda superior com a cor 'black', bordas direita e esquerda com a cor 'silver', borda inferior com a cor 'gray':
e {border-color: black silver gray; }

Borda superior com a cor 'black', borda direita com a cor 'silver', borda inferior com a cor 'gray', borda esquerda com 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: 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 simples e contínua
double: Duas linhas 'solid'. A soma das duas linhas e o espaço entre elas é igual ao valor definido em 'border-width'
groove: Efeito 3D, entalhada
ridge: Efeito 3D, oposto de 'groove': ressaltada
inset: Efeito 3D, baixo relevo
outset: Efeito 3D, alto relevo

Exemplo:
e {border-left-style:
dotted; }
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} Exemplos: Todas as bordas com estilo 'solid':
e {border-style: solid;}

Bordas superior e inferior com estilo 'solid', bordas direita e esquerda com estilo 'dotted':
e {border-style: solid dotted;}

Borda superior com estilo 'solid', bordas direita e esquerda com estilo 'dotted', borda inferior com o estilo 'dashed':
e {border-color: solid dotted dashed; }

Borda superior com estilo 'solid', borda direita com estilo 'dotted', borda inferior com estilo 'dashed', borda esquerda com o estilo 'double':
e {border-color: solid dotted dashed double; }
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> ] 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

Módulo de 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 }
margin Atalho para definir de uma só vez o tamanho da margem para todos os lados [ <tamanho> | <porcentagem> | auto ]{1,4}

Exemplos:
Todas as margens com 2em:
body {margin: 2em }

Margem superior e inferior com 1em, esquerda e direita com 2em:
body {margin: 1em 2em }

Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em:
body {margin: 1em 2em 3em }

Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em:
body {margin: 1em 2em 3em 4em }

Espaçamento

Módulo de espaçamento
Propriedade Descrição Valores Descrição
padding-top
padding-right
padding-bottom
padding-left		 Distância utilizada para espaçamento em cada um dos quatro lados: superior, direito, inferior e esquerdo [ <tamanho> | <porcentagem> ] Exemplo:
body {padding-top: 2em }
padding Atalho para definir de uma só vez a distância de espaçamento para todos os lados [ <tamanho> | <porcentagem> ]{1,4}

Exemplos:
Todas as margens com 2em:
body {padding: 2em }

Margem superior e inferior com 1em, esquerda e direita com 2em:
body {padding: 1em 2em }

Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em:
body {padding: 1em 2em 3em }

Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em:
body {padding: 1em 2em 3em 4em }

Modelo de formtação visual

Módulo de formatação visual
Propriedade Descrição Valores Descrição / Exemplos
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 ] 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: renderizado como bloco ou linha(s), dependendo do contexto
inline-block: renderizado em uma linha simples, mas comporta-se como um bloco
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-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 {display: none;}
position Esquema de posicionamento [ static | relative | absolute | fixed ]

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 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', e 'table-caption'
absolute: Posicionamento (e 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:
@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ância vertical em relação à margem superior
right: Distância horizontal em relação à margem direita
bottom: Distância vertical em relação à margem inferior
left: Distância horizontal em relação à margem esquerda

Exemplo:
e { top: 20px; left: 40px;}
float Posicionamento adjacente à esquerda ou à direita do elemento { left | right | none ]

left: o elemento será posicionado flutuando à esquerda. O fluxo do conteúdo não integrante do elemento será posicionado à direita a partir do 'top' do elemento que recebe a propriedade 'float'
right: similar à 'left', mas com o elemento flutuando à direita
none: o elemento não flutua

Exemplo:
e {float: right;}
clear Controle para os posicionamentos float [ none | left | right | both ] none: nenhum controle de limpeza de flutuação será executado
left: limpeza de flutuação à esquerda: o elemento será posicionado abaixo da borda inferior do elemento flutuante à esquerda
right: limpeza de flutuação à direita: o elemento será posicionado abaixo da borda inferior do elemento flutuante à direita
both: o elemento será posicionado abaixo da borda inferior de qualquer elemento flutuante, seja à direita ou à esquerda

Exemplo: e { clear: both;}
z-index Níveis de profundidade de sobreposição de elementos [ auto | <número inteiro> ] Os números serão considerados para ordenar os elementos que ficarão sobrepostos, do mais baixo para o mais alto: 'z-index: 1'; 'z-index:2'; 'z-index: 3'; …

Exemplo: e {z-index: 1;}
direction Define a direção de um texto: esquerda para direita; direita para esquerda [ ltr | rtl ]

Utilizado em clientes que têm suporte a idiomas e escrita bidirecional.
ltr - direção da esquerda para a direita
rtl - direção da direita para a esquerda

Exemplo:
e {direction: rtl;}

Para que a direção tenha o efeito atribuído, a propriedade 'unicode-bidi' deve conter os valores 'embed' ou
'bidi-override'
unicode-bidi Interação entre textos bidirecionais [ normal | embed | bidi-override ] Utilizado em clientes que têm suporta a idiomas e escrita bidirecional
normal – o elemento não embutirá o algoritmo com suporte bidirecional
embed – embutirá algoritmo bidirecional
bidi-override – permite a sobreposição

Obs.: Valores em negrito são os adotados como padrão

Detalhes do modelo de formatação visual

Módulo de detalhes do modelo de formatação visual
Propriedade Descrição Valores Descriçã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;}
vertical-align Alinhamento vertical do texto [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentagem> | <tamanho> ] baseline - A linha de base do elemento e do elemento superior (elemento-pai) serão consideradas para alinhamento. Se não houver linha de base no elemento, será considerado sua margem inferior
sub - A linha de base do elemento será alinhada com a linha de base de conteúdo subscrito do elemento superior
super - A linha de base do elemento será alinhada com a linha de base de conteúdo superescrito do elemento superior
top - Alinha o topo do elemento com a linha de topo do elemento superior
text-top - A base superior do elemento será alinhada com a linha superior do conteúdo de textos do elemento-pai
middle - A linha central do elemento e de seu elemento superior serão consideradas para alinhamento. (linha central do elemento superior = ponto central da altura da letra 'x')
bottom - Alinha o rodapé do elemento com o rodapé do elemento superior
text-bottom - A base inferior do elemento será alinhada com a linha inferior do conteúdo de textos do elemento-pai

Exemplo:
e {vertical-align: sub;}

Obs.: Valores em negrito são os adotados como padrão

Efeitos visuais

Módulo de efeitos visuais
Propriedade Descrição Valores Descrição / Exemplos
overflow Comportamento do browser quando o conteúdo do elemento for maior que sua área [ visible | hidden | scroll | auto ] visible - Todo o conteúdo do elemento estará visível (não cortado) e talvez conforme a área seja renderizado para fora do elemento
hidden - O conteúdo será cortado (se maior que a área disponível) e não haverá barra de rolagens no elemento
scroll - O conteúdo será cortado (se maior que a área disponível) mas haverá barra de rolagens no elemento. Quando a mídia for especificada como 'print', o conteúdo do elemento poderá ser impresso.
auto - O método será atribuído pelo browser cliente

Exemplo:
e {overflow: scroll;}
clip Especifica região de um elemento a ser exibida [ rect (<tamanho topo>, <tamanho direito>, <tamanho rodapé>, <tamanho esquerdo>) | auto ] rect – Delimita área retangular do elemento (topo, direita, rodapé, esquerda) na qual o conteúdo ficará visível
auto - O elemento não terá clip e sua própria área será idêntica à de visualização

Exemplo:
e {clip: rect(5px, 40px, 45px, 5px); }
visibility Define se um elemento estará ou não visível [ visible | hidden | collapse ] visible - O elemento será exibido
hidden - O elemento não será exibido, ficando totalmente transparente. Mas o leiaute da página continuará sendo afetado
collapse - Mesmo efeito que hidden, mas aplicável a elementos de 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

Módulo de agregador de conteúdo, numeração automática e listas
Propriedade Descrição Valores Descrição / Exemplos
content Agregador de conteúdo para os pseudo-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 recurso externo (como uma imagem). Se o browser não puder exibir recursos externos, ele não aparecerá ou alguma indicação apontará essa impossibilidade
<counter>: Contadores cujos valores serão agregados. Podem ser especificados com duas diferentes funções: 'counter()' ou 'counters()'. A primeira pode ser de duas formas: 'counter(name)', para usar estilo padrão; ou 'counter(name, style)', para especificar o estilo. O texto que será agregado corresponde ao valor de incremento do contador para um determinado campo 'name' no pseudo-elemento específico; e sua formatação será a indicada em 'style' (o padrão é 'decimal'). As opções para 'style' são as mesmas possíveis em 'list-style-type'. As seguintes palavras não podem ser usadas para 'name': 'none', 'inherit' ou 'initial'. A outra função também tem duas formas: 'counters(name, string)', para usar estilo padrão; ou 'counters(name, string, style)', para indicar estilo. Para obter mais informações sobre counters, acesse http://www.w3.org/TR/CSS21/generate.html#counters
open-quote | close-quote - O conteúdo agregado será substituído por aspas
no-open-quote | no-close-quote - Nenhum conteúdo é introduzido, mas incrementa (decrementa)
attr(X) - Esta função retorna a 'string' como um valor do atributo X. A 'string' não será interpretada pelo processador do CSS

Exemplo:
H1:before {content: counter(secao, upper-roman) "-" }
quotes Especifica aspas utilizadas em citações [ [ <texto> <texto> ]+ | none ] Exemplo, especificando dois pares de aspas para idiomas diferentes:

e:lang(en) {quotes: '"' '"' "'" "'" }
e:lang(pt) { quotes: "«" "»" '"' '"' }
counter-reset Inicializa um contador identificado na propriedade 'content' [ [ <name> <inteiro>? ]+ | none ] Exemplo:
h1 {counter-reset: secao; }
counter-increment Incrementa um contador identificado na propriedade 'content' [ [ <name> <inteiro>? ]+ | none ] Exemplo:
H2:before {
content: counter(capitulo) "." counter(secao) " ";
counter-increment: secao;
}
list-style Atalho para definir de uma só vez todas as propriedades de lista: type, position e 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 aplicada aos elementos de uma lista [ url("http://...") | none ] Exemplo:
li {
list-style-image: url("http://png.com/ellipse.png");}
list-style-type Estilo visual aplicado aos marcadores de uma lista [ 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ólido
circle - círculo vazio
square - quadrado vazio
decimal - números decimas, iniciando com 1
decimal-leading-zero - números decimais com zeros 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 tradicional
lower-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 Posicionamento interno dos marcadores de uma lista [ inside | outside ] inside – conteúdo da lista será indentado, mas o texto não será alinhado após quebra de linha
outside – diferente de inside, o texto será alinhado na indentação mesmo com quebra de linha

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

Módulo de cores e fundo
Propriedade Descrição Valores Descrição / Exemplos
color Cor do texto presente no elemento <color> Exemplo:
e {color: red; }
e {color: rgb(255,0,0); }
background-color Cor de fundo do elemento [ <color> | transparent ] Para 'transparent' será adotada a cor de fundo do elemento superior e na ausência deste, a cor de fundo padrão do browser

Exemplo:
e {background-color: #f00; }
e {background-color: transparent; }
background-image Imagem de fundo do elemento [ url(...) | none ] Exemplo:
e {background-image: url(http://caminho/imagem.jpg); }
background-repeat Define se e como a imagem de fundo utilizada se repetirá [ repeat | repeat-x | repeat-y | no-repeat ] repeat: a imagem é repetida em ambas as direções: horizontal e vertical
repeat-x: a imagem é repetida somente horizontalmente
repeat-y: a imagem é repetida somente verticalmente.
no-repeat: a imagem não será repetida e somente uma cópia da mesma será renderizada

Exemplo:
e {background-repeat: no-repeat;}
background-attachment Define se a imagem de fundo utilizada será fixa ou com rolagem [ scroll | fixed ] scroll: a imagem acompanha a rolagem da página na janela do browser, mantendo-se como imagem de fundo
fixed: a imagem é fixada na página e não acompanhará a rolagem da página
background-position Posição da imagem de fundo utilizada. [ [ <porcentagem> | <tamanho> | left | center | right ] [ <porcentagem> | <tamanho> | top | center | bottom]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]

top: Equivalente a '0%' do posicionamento vertical
right: Equivalente a '100%' do posicionamento horizontal
bottom: Equivalente a '100%' do posicionamento vertical
left: Equivalente a '0%' do posicionamento horizontal.
center: Equivalente a '50%' do posicionamento horizontal ou '50%' do posicionamento vertical

Exemplo:
body {background-position: right top; }
body {background-position: 100% 0; }
background Atalho para definir de uma só vez todas as propriedades de imagem 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

Módulo de paginação para impressão
Propriedade Descrição Valores Descrição / Exemplos
page-break-before Define quebra de página antes do elemento [ auto | always | avoid | left | right ] auto: insere quebra de página somente se necessário
always: sempre insere quebra de página antes do elemento
avoid: evita inserir quebra de página antes do elemento
left: insere uma ou duas quebras de páginas antes do elemento, de modo que a página gerada seja uma página par
right: insere uma ou duas quebras de páginas antes do elemento, de modo que a página gerada seja uma pá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: insere quebra de página somente se necessário
always: sempre insere quebra de página após o elemento
avoid: evita inserir quebra de página após o elemento
left: insere uma ou duas quebras de páginas após o elemento, de modo que a página gerada seja uma página par
right: insere uma ou duas quebras de páginas após o elemento, de modo que a página gerada seja uma pá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: insere quebra de página somente se necessário avoid: evita inserir quebra de página dentro do elemento Exemplo:
e {page-break-inside: avoid; }
orphans Número mínimo de linhas antes da quebra de um parágrafo que pode aparecer no final de uma página <número inteiro> Somente valores positivos são permitidos

Exemplo:
e {orphans: 2; }
widows Número mínimo de linhas após a quebra de um parágrafo que pode aparecer no início de uma página <número inteiro> Somente valores positivos são permitidos

Exemplo:
e {widows: 2; }

Obs.: Valores em negrito são os adotados como padrão

Fontes tipográficas

Módulo de fontes tipográficas
Propriedade Descrição Valores Descrição / Exemplos
font-family Família(s) de fontes [ [ <nome-fonte> | <família-genérica> ] [, <nome-fonte> | <família-genérica> ]* ] As seguintes famílias-genéricas de fontes são definidas em 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 do elemento sem efeito itálico ou oblíquo
italic: fonte do elemento com efeito itálico
oblique: fonte do elemento com efeito oblíquo

Exemplo:
e {font-style: italic; }
font-variant Exibe o texto em pequena caixa-alta (versalete) ou fonte normal [ normal | small-caps ] normal: fonte do elemento sem efeito de capitalização small-caps: fonte do elemento com efeito de pequena caixa 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 do elemento com efeito padrão de peso (corresponde ao valor 400)
bold: fonte do elemento com efeito de negrito (corresponde ao valor 700)
bolder: fonte do elemento com o valor de peso imediatamente superior ao do valor herdado (p.ex: de 400 para 500)
lighter: fonte do elemento com o valor de peso imediatamente inferior ao do valor herdado (p.ex: de 400 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 do elemento com valor padrão de tamanho e equivalente ao padrão do browser. Os demais valores ( xx-small | x-small | small | large | x-large | xx-large) são calculados pelo browser considerando esse valor 'medium'.
larger | smaller: aumenta ou diminui o tamanho em relação ao valor herdado.
tamanho: valor absoluto. Não são permitidos valores negativos.
porcentagem: porcentagem do tamanho do valor herdado.

Exemplo:
e {font-size: 90%; }
font Atalho para definir de uma só vez todas as propriedades de fonte [ [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar ] Além dos valores para as propriedades de estilo, variação, peso, tamanho, altura da linha e família, pode-se utilizar os seguintes, de acordo com o ambiente do usuário:

caption: fonte utilizada por controles com legenda (ex.: botões, drop-downs, etc.)
icon: fonte utilizada em ícones
menu: fonte utilizada em menus do sistema (ex.: dropdown menus e menus suspensos)
message-box: fonte utilizada em caixas de diálogo.
small-caption: fonte utilizada em controles com legenda reduzida
status-bar: fonte utiliza em barra de status 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

Módulo de texto
Propriedade Descrição Valores Descrição / Exemplos
text-indent Recuo à esquerda da primeira linha em um bloco de texto [ <tamanho> | <porcentagem> ] Exemplo:
e {text-indent: 3em; }
text-align Alinhamento do texto [ left | right | center | justify ] left: alinhamento do texto à esquerda
right: alinhamento do texto à direita
center: alinhamento do texto centralizado
justify: alinhamento do texto justificado

Exemplo:
e {text-align: center; }
text-decoration Efeitos decorativos no texto como sublinhado, tachado, linha acima e piscante [ none | [ underline || overline || line-through || blink ] ] none: não produz decoração no texto do elemento
underline: cada linha de texto do elemento terá uma linha abaixo (sublinhado)
overline: cada linha de texto do elemento terá uma linha acima
line-through: cada linha de texto do elemento terá uma linha cortando-o ao meio (tachado)
blink: textos piscantes alternadamente entre visíveis e nã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 o primeiro caracter de cada palavra do elemento em maiúsculas (caixa alta)
uppercase: coloca todos os caracteres de cada palavra do elemento em maiúsculas (caixa alta)
lowercase: coloca todos os caracteres de cada palavra do elemento em minúsculas (caixa baixa)
none: não aplica efeitos de capitalização

Exemplo:
e {text-transform: capitalize; }
white-space Definições sobre espaços em branco num determinado elemento [ normal | pre | nowrap | pre-wrap | pre-line ] normal: utiliza a configuração padrão do browser para espaçamentos em branco
pre: todos os espaços em branco presentes no código fonte serão exibidos no elemento
nowrap: os espaços em branco serão tratados como 'normal', mas as quebras de linha serão suprimidas
pre-wrap: todos os espaços em branco contantes no código-fonte serão exibidos no elemento
pre-line: os espaços em branco serão tratados como normal.

Exemplo:
e {white-space: pre; }

Obs.: Valores em negrito são os adotados como padrão

Tabelas

Módulo de tabelas
Propriedade Descrição Valores Descrição / Exemplos
caption-side Posicionamento do título em relação à tabela [ top | bottom ] top: Posicionamento do título antes da área da tabela
bottom: Posicionamento do título abaixo da área da tabela

Exemplo:
e {caption-side: bottom; }
table-layout Define o algoritmo usado para a renderização da tabela [ auto | fixed ] auto: utiliza algum algoritmo de leiaute automático.
fixed: utiliza algoritmo de leiaute fixo.

Exemplo:
table {table-layout: fixed; }
border-collapse Seleciona o modelo de bordas a ser utilizado [ collapse | separate ] separate: as bordas serão renderizadas para cada célula, dado a impressão de linha dupla collapse: as bordas das células serão mescladas, dando a impressão de uma única linha

Exemplo:
table {border-collapse: collapse; }
border-spacing Distâ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 as células vazias da tabela
hide: não exibe as células vazias da tabela

Exemplo:
table {empty-cells: hide; }

Obs.: Valores em negrito são os adotados como padrão

Interface de usuário

Módulo de interface de usuário
Propriedade Descrição Valores Descriçã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 os mesmos valores de 'border-width'

Exemplo:
e {outline-width: thin; }
outline-style Estilo da linha de contorno <border-style> Aceita os mesmos valores de 'border-style'

Exemplo:
e {outline-style: dotted; }
outline-color Cor da linha de contorno [ <color> | invert ] color: valor correspondente a uma cor
invert: cor inversa à área do elemento (prática comum para tornar o 'focus' visível)

Exemplo:
e {outline-color: #f00; }
outline Atalho para definir de uma só vez todas as propriedades de outline [ <outline-color> || <outline-style> || <outline-width> ] Exemplo:
active {outline: black dotted thick; }
speak-header (Aural) Freqüência em que os 'headers' da tabela serão pronunciados. Utilizado quando 'media=speech' [ once | always ] once: Os títulos de tabelas serão 'falados' uma vez, antes da série de células
always: Os títulos de tabelas serão 'falados' sempre que ocorrer uma célula pertinente

Exemplo:
e {speak-header: always; }

Obs.: Valores em negrito são os adotados como padrão

NIC.br - Núcleo de Informação e Coordenação do Ponto br Válido XHTML 1.0! | Válido CSS!

Webmaster · Última atualização: 25/08/2009 13:00PM

Copyright © 2004-2008 W3C® (MIT, ERCIM, Keio), Todos os direitos reservados. Aplicam-se as normas para responsabilidade, marcas registradas, uso de documentos e licença de software do W3C. Sua interação com este site seguirá nossas especificações de privacidade para o público e para filiados.