Guia de Referência CSS 2.1
Autor: Lorena Cherulli | Publicado: 2011-02-17T10:37:00-08:00

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 {font-family: sans-serif;}        ...                  e f       Seletor contextual:seleciona qualquer elemento  que estiver contido num elemento        h1 em {        color: blue;        }       ..........                 e > f       Seletor de elementos-filho: seleciona qualquer elemento  descendente direto de um elemento        body > p {        line-height: 1.3;      }       .........                 e + f       Seletor adjacente: seleciona o elemento  que estiver imediatamente após um elemento        h1 + h2 {margin-top: -5mm;}       ... ...                 e.classe       Seletor de classe: seleciona o(s) elemento(s)  em que se aplicou a "classe"       h1.pastoral {color: green;}                        e#Id       Seletor de ID: seleciona o elemento  identificado com Id       h1#chapter1 {        text-align: center;        }                        e , f       Agrupamento de seletores: Seleciona os elementos  e  do agrupamento       h1, h2 {        font-family: sans-serif; }        …  …  …                  e [atrib]       Seletor de Atributo: seleciona o elemento  que contenha o atributo indicado       h1[title] {color: blue;}                        e [atrib="valor"]       Seletor de Atributo: seleciona o elemento  com o mesmo atributo e “valor”       span[class=exemplo] {color: blue;}                        e [atrib~="valor"]       Seletor de Atributo: seleciona o elemento  em que “valor” de atributo esteja em uma lista de valores separadas por espaços       a[rel~="copyright"]{                color: red;      }?        …                  e [atrib|="val"]       Seletor de Atributo:  seleciona o elemento  em que valor do atributo seja idêntico a “val” ou inicia-se com “val”        *[lang|="pt"] {        color: red;        }                        e:first-child       Pseudo-classe primeiro filho: seleciona o primeiro elemento  descendente do elemento-pai       div > p:first-child {text-indent: 0;}        Último P antes de 'nota'                 Primeiro P após nota'.                       a:link       Pseudo-classe link: aplica-se ao elemento  com hiperlinks ou âncoras ainda não visitados       a:link {              color: red;            }       link                 a:visited       Pseudo-classe visited: aplica-se ao elemento  com hiperlinks ou âncoras já visitados       a:visited {color: blue;}       link                 e:active       Pseudo-classe active: aplica-se ao elemento  quando este for ativado pelo usuário       a:active {        color: lime;        }       link                 e:hover       Pseudo-classe hover: aplica-se ao elemento  quando o cursor estiver sobre ele, mas sem ativá-lo       a:hover {        color: yellow;        }       link                 e:focus       Pseudo-classe focus: aplica-se ao elemento  quando o foco estiver posicionado nele       a:focus {        background: yellow;      }       link                 e:lang(val)       Pseudo-classe lang: aplica-se ao elemento  se este estiver marcado com o idioma “val”       html:lang(pt) {quotes: '« ' ' »'; }                        e:first-line       Pseudo-elemento first-line: aplica-se à primera linha do elemento        p:first-line {text-transform: uppercase; }       ...                 e:first-letter       Pseudo-elemento first-letter: aplica-se à primera letra do elemento        p:first-letter {font-size: 3em; font-weight: normal;}       ...                 e:before       Pseudo-elemento before: aplica conteúdo especificado em posição anterior ao elemento        e:before {        content: open-quote;      }       ...                 e:after       Pseudo-elemento after: aplica conteúdo especificado em posição posterior ao elemento        e:after {      content: close-quote;}       ...            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    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 |  ]       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 |  ] {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       [  | transparent ]       Exemplo:      e {border-top-color: black; }                 border-color       Atalho para definir de uma só vez cores de bordas para todos os lados       [  | 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       [  ||  ||  ]       Exemplo:      e {border-bottom: thick solid red;}                 border       Atalho para largura, estilo e cor das quatro bordas       [  ||  ||  ]       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       [  |  | auto ]       Exemplo:      body {margin-top: 2em }                 margin       Atalho para definir de uma só vez o tamanho da margem para todos os lados       [  |  | 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       [  |  ]       Exemplo:      body {padding-top: 2em }                 padding       Atalho para definir de uma só vez a distância de espaçamento para todos os lados       [  |  ]{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       [  |  | 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 |  ]       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       [  |  | auto ]       Exemplo:       e {width: 25%;}                 min-width       Largura mínima       [  | ]        Exemplo:        e {min-width: 200px;}                     max-width       Largura máxima       [  |  | none ]       Exemplo:          e {max-width: 600px;}                 height       Altura       [  |  | auto ]       Exemplo:        e {height: 250px;}                 min-height       Altura mínima       [  | ]        Exemplo:        e {min-height: 30%;}                 max-height       Altura máxima       [  |  | none ]       Exemplo:        e {max-height: 70%;}                 line-height       Distância entre as linhas de um texto       [ normal |  |  |  ]       Exemplo:        e {line-height: 1.2em;}                 vertical-align       Alinhamento vertical do texto       [ baseline | sub | super | top | text-top | middle | bottom | text-bottom |  |  ]       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 (, , , ) | 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 | [  |   |  | 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        : Conteúdo de texto específico será agregado.        : 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        : 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       [ [   ]+ | 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'       [ [  ? ]+ | none ]       Exemplo:        h1 {counter-reset: secao; }                 counter-increment       Incrementa um contador identificado na propriedade 'content'       [ [  ? ]+ | 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       [  ||  ||  ]       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              Exemplo:        e {color: red; }        e {color: rgb(255,0,0); }                 background-color       Cor de fundo do elemento       [  | 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.       [ [  |  | left | center |  right ] [  |  | 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       [  ||  ||   ||  ||   ]       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              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              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       [ [  |  ] [,  |  ]* ]       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] |  |  ]       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       [ [ [  ||  ||   ]?  [ /  ]?   ] | 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       [  |  ]       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 |  ]       Exemplo:      e {letter-spacing: 0.1em; }                 word-spacing       Espaçamento entre palavras       [ normal |  ]       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')        ?       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              Aceita os mesmos valores de 'border-width'       	Exemplo:        e {outline-width: thin; }                 outline-style       Estilo da linha de contorno              Aceita os mesmos valores de 'border-style'      Exemplo:      e {outline-style: dotted; }                 outline-color       Cor da linha de contorno       [  | 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       [  ||  ||  ]        		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; }            retirado de:  http://www.w3c.br/divulgacao/guiasreferencia/css2/