você encontra a recomendação CSS2 explicada de forma mais
didática, com exemplos visuais e exercícios de aprendizado.Folhas de Estilo CSS, nível 1
Recomendação W3C de 17-Dez-1996, revisada em 11-Jan-1999
| Esta versão: | http://www.w3.org/TR/1999/REC-CSS1-19990111 |
| Última versão: | http://www.w3.org/TR/REC-CSS1 |
| Versão anterior: | http://www.w3.org/TR/REC-CSS1-961217 |
| Autores: | Håkon Wium Lie (howcome@w3.org) Bert Bos (bert@w3.org) |
| Tradução: | José Donato Messaros |
Este documento é uma Recomendação W3C. Ele foi revisado pelos membros do W3C (http://www.w3.org/), sendo consenso geral que pode ser utilizado tal como se encontra. Está classificado como estável e pode ser usado como material de referência ou citado como instrumento normativo por outros documentos. W3C encoraja o emprego desta Recomendação.
Uma relação das Recomendações W3C e outros documentos técnicos pode ser encontrada em http://www.w3.org/TR/.
Este documento é uma versão revisada do documento emitido em 17 de Dezembro de 1996. As alterações em relação a esta versão inicial estão listadas no Apêndice F. Os erros conhecidos desta Recomendação estão disponíveis em http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata
No site
você encontra a recomendação CSS2 explicada de forma mais
didática, com exemplos visuais e exercícios de aprendizado.
Este documento define o nível 1 das folhas de estilo CSS1 (Cascading Style Sheet). CSS1 é uma maneira fácil de permitir aos autores e leitores a definição de estilos (fontes, cores e espaçamento) em documentos HTML. A linguagem CSS1 segue os padrões humanos de leitura e escrita, e define os estilos em terminologias comuns aos softwares de publicação eletrônica.
Uma das características fundamentais do CSS é o encadeamento de estilos; os autores definem um estilo preferencial, ao passo que os leitores podem possuir um estilo pessoal que se ajuste a alguma deficiência física humana ou tecnológica. As regras para solução de conflitos entre estilos diferentes estão definidas nesta Recomendação.
Esta Recomendação resulta do trabalho do W3C na área de Style Sheets. Para mais informações sobre folhas de estilo (style sheets), veja [1].
Pseudo-classes e pseudo-elementos
Propriedades das cores e do 'background'
Apêndice A: Exemplo de folha de estilo (style sheet) para HTML 2.0
Apêndice D: Correção do fator Gamma
Apêndice E: Aplicabilidade do CSS1
Apêndice F: Mudanças em relação à versão de 17-Dez-1996
No restante desta Recomendação, reticências ('...') indicam citações HTML e CSS.
O projeto, ou desenho do layout, das folhas de estilos é fácil. É preciso apenas conhecer um pouco da linguagem HTML e possuir noções básicas dos termos usados em publicação eletrônica. Como exemplo, para ajustar a cor das letras de um elemento 'H1' para azul, basta fazer:
H1 { color: blue }
Este exemplo mostra o que é uma 'regra' simples em CSS. Uma regra é composta de duas partes principais: um selector ('H1') e uma declaração ('color: blue'). Por sua vez, esta declaração também possui duas partes: uma propriedade ('color') e seu valor ('blue'). Embora este exemplo especifique apenas uma das várias propriedades necessárias para montar um documento HTML, ela constitui por si só uma 'folha de estilo'. Quando for combinada com outras folhas de estilo ela determinará a apresentação final do documento (uma característica fundamental é que as folhas de estilo podem ser combinadas).
O seletor funciona como a ponte de ligação entre o documento HTML e a folha de estilo, e todos os elementos HTML podem funcionar como possíveis seletores. Os vários elementos HTML estão definidos na Recomendação HTML [2].
A propriedade 'color' é uma dentre as 50 outras que definem como um documento HTML é apresentado. A relação das propriedades e seus valores possíveis é definida nesta Recomendação.
Os autores de documentos HTML somente precisam escrever folhas de estilo quando eles desejam definir um estilo específico para uma série de documentos. Cada 'browser' possui uma folha de estilo 'default' própria, a qual é usada para montar um documento HTML quando não há especificação de um estilo particular. Este estilo 'default' permite a apresentação do documento numa forma bastante razoável -- embora extremamente comum. O Apêndice A contem a definição de uma folha de estilo para a montagem de documentos HTML, conforme sugerido na Recomendação HTML 2.0 [3].
A gramática formal para a linguagem CSS1 está definida no Apêndice B.
Para que uma folha de estilo possa definir a aparência de um documento, o browser precisa saber que ela existe. A especificação HTML [2] define a maneira de ligar o HTML com as folhas de estilos. Assim, esta seção é apenas informativa, não normativa.
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Cabeçalho é azul</H1>
<P STYLE="color: green">Enquanto o parágrafo é verde.
</BODY>
</HTML>
Este exemplo mostra quatro modos de ligar folhas de estilo com documentos HTML: usando o elemento 'LINK' para indicar uma folha de estilo externa, um elemento 'STYLE' dentro do elemento 'HEAD', uma folha de estilo importada (trazida para dentro do documento HTML) usando a notação CSS1 '@import', e finalmente empregando um atributo 'STYLE' dentro do elemento 'BODY' (neste caso para definir o formato do parágrafo). Esta última opção mistura a definição do estilo com o próprio conteúdo do documento HTML e provoca a perda das vantagens proporcionadas pelas folhas de estilo tradicionais.
O elemento 'LINK' referencia um estilo alternativo que o 'browser' pode usar, enquanto um estilo importado é automaticamente agregado ao restante do estilo definido.
Normalmente, os browser ignoram 'tags' (elementos) que não conheçam. Como resultado, versões antigas de browsers irão ignorar o elemento 'STYLE', embora seu conteúdo irá ser tratado como parte do documento HTML. Durante esta fase de atualização de versões, o conteúdo dos elementos 'STYLE' deve ser escondido usando a definição de comentários SGML:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Como o elemento 'STYLE' é declarado como "CDATA" no 'DTD' (como definido em [2]), os browsers mais recentes não irão considerar a definição de estilo indicada acima como comentário que deve ser removido do documento.
Para reduzir o tamanho das folhas de estilo, os seletores que compartilham as mesmas propriedades podem ser agrupados em listas, separados por vírgulas:
H1, H2, H3 { font-family: helvetica }
De maneira análoga, todas as declarações que definem as propriedades de um seletor também podem ser agrupadas:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Da mesma forma, algumas propriedades possuem sua própria sintaxe de agrupamento:
H1 { font: bold 12pt/14pt helvetica }
Esta última forma de declaração é equivalente à do exemplo anterior.
No primeiro exemplo, a cor do elemento 'H1' foi ajustada para azul. Suponha um elemento 'H1' que possua um outro elemento interno que seja enfatizado:
<H1>O cabeçalho <EM>é</EM> importante !</H1>
Se nenhuma outra cor houver sido atribuída ao elemento 'EM', a atributo enfatizado da palavra 'é' irá herdar a cor do elemento pai, ou seja, também será azul. Outras propriedades de estilos são igualmente herdadas, tais como 'font-family' e 'font-size'.
Para definir uma propriedade 'default' em um documento, esta propriedade deve ser declarada em um elemento do qual todos os demais sejam afilhados. Em documentos HTML, o elemento 'BODY' é útil para esta função:
BODY {
color: black;
background: url(texture.gif) white;
}
Isto irá funcionar mesmo que o autor omita o tag 'BODY' (o que é legal, embora não aconselhável) porque o browser irá acrescentar por si só o tag omitido. No exemplo acima, a cor do texto é definida como 'preto' e o fundo de tela é definido como uma 'figura'. Ainda mais, o fundo será 'branco' caso a figura definida não seja encontrada (veja a seção Propriedades das cores e do 'background' para mais detalhes sobre esta característica).
Algumas propriedades não são herdadas. Freqüentemente é intuitivo o porque deste fato. Por exemplo, a propriedade 'background' não é herdada, embora o padrão de fundo (background) do elemento pai abranja a área sobre sua influência.
Algumas vezes, o valor de uma propriedade é indicado como uma percentagem do valor de uma outra propriedade:
P { font-size: 10pt }
P { line-height: 120% } /* relativo à 'font-size', isto é, 12pt */
Para cada propriedade que permita o uso de valores percentuais, está definido de qual outra propriedade este valor se refere. Elementos filhos do elemento 'P' irão herdar o valor de 'line-height' (ou seja, 12pt), não a percentagem em si.
Para aumentar o poder de controle sobre os elementos, um atributo novo foi adicionado ao HTML [2]: 'CLASS'. Todos os elementos dentro do elemento 'BODY' podem ser agrupados em classes, e estas classes podem ser ligadas à folha de estilo:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Caminho muito verde</H1>
</BODY>
</HTML>
As regras normais de herança são aplicadas aos elementos de uma classe: eles herdam os valores de seus elementos pai dentro da estrutura do documento.
Todos os elementos de uma mesma classe serão endereçados em conjunto quando for omitido o nome do 'tag' no seletor:
.pastoral { color: green } /* todos os elementos da 'classe' pastoral */
Apenas uma classe por seletor pode ser especificada por vez. Ou seja, 'P.pastoral.marine' não é válido como seletor em CSS1 (mesmo os seletores contextuais, descritos a seguir, podem possuir apenas uma classe para cada seletor simples).
CSS fornece muito poder ao atributo 'CLASS', tanto que em muitos casos não importa para qual elemento HTML a classe foi definida -- é possível fazer qualquer elemento emular qualquer outro. O abuso deste poder não é recomendado, porque ele retira a característica estrutural aceita universalmente para os elementos HTML. Uma estrutura baseada em classes apenas é útil dentro de um ambiente bem restrito, onde a definição de cada classe tenha sido aceita por todos.
HTML [2] também teve introduzido o atributo 'ID', o qual deve possuir um único valor para todo o documento. Ele possui uma importância especial quando usado como seletor numa folha de estilo, e deve ser endereçado com o prefixo '#':
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Texto largo</P>
Neste exemplo, o estilo do elemento 'P' é definido pelo valor do atributo 'ID'. O segundo seletor especifica tanto um elemento ('H1') como um valor de 'ID'; por este motivo ele não pode ser aplicado ao elemento 'P'.
Usando o atributo 'ID' como seletor, é possível definir propriedades de estilo com base nos elementos tomados individualmente. Embora as folhas de estilo tenham sido criadas para aumentar a estruturação dos documentos, esta característica permite que autores criem documentos sem usar as vantagens da estruturação de elementos própria da HTML. Deve ser evitado este uso das folhas de estilo.
A característica de herança de atributos economiza digitação para os projetistas de folhas de estilo CSS. Ao invés de definir todas as propriedades para todos os elementos, pode-se definir uma configuração padrão e somente definir explicitamente a lista de exceções. Para atribuir aos elementos 'EM' dentro de um cabeçalho 'H1' uma cor diferenciada, basta especificar:
H1 { color: blue }
EM { color: red }
Quando este estilo for ativado, todo o texto enfatizado, esteja dentro ou fora do 'H1', será mostrado como vermelho. Provavelmente, alguém desejará que apenas os elementos 'EM' internos ao 'H1' estejam em vermelho; isto pode ser definido com:
H1 EM { color: red }
Agora, o seletor passa a ser um conjunto de elementos numa pilha de elementos abertos, e este tipo de seletor é chamado seletor contextual. Este tipo de seletores consiste de vários seletores simples separados por um espaço em branco (todos os seletores descritos até aqui foram seletores simples). Apenas os elementos que satisfazem a condição do último seletor simples (no nosso caso, o elemento 'EM') são processados. Na CSS1, seletores contextuais procuram por relações definidas para seus seletores pais, mas outros relacionamentos (por exemplo, pai-filho) poderão ser introduzidos em revisões posteriores desta Recomendação.
No exemplo anterior, o estilo será adotado apenas para elementos 'EM' que estejam englobados por algum 'H1', em outras palavras, se 'EM' está dentro de um 'H1'.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Agora, o primeiro seletor define o estilo de elementos 'LI' com pelo menos um 'UL' acima deles. Já o segundo seletor define um subconjunto do primeiro, isto é, elementos 'LI' com pelo menos dois 'UL' acima. Ao encontrar um elemento 'LI', o browser resolve o conflito sobre qual destes estilos adotar em favor do segundo seletor, porque ele é mais específico que o primeiro. Veja a seção ordem de encadeamento para mais detalhes sobre este procedimento.
Os seletores contextuais podem envolver vários tipos de elementos, atributos de 'CLASS' ou de 'ID', ou uma combinação deles:
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
O primeiro seletor abrange todos os elementos 'P' que possuam um 'DIV' acima deles. Já o segundo seletor é aplicado a todos os elementos 'H1' que pertençam à classe 'reddish'. O terceiro seletor envolve todos os elementos 'CODE' que estejam abrangidos pelo elemento com 'ID=x78y'. Por fim, o quarto seletor trata de todos os 'H1' subordinados a um 'DIV' que pertença à classe 'sidenote'.
Vários seletores contextuais podem ser agrupados juntos:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Esta definição de estilo é equivalente à:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Os comentários nas folhas de estilo CSS são indicados de maneira similar à adotada na linguagem C [7]:
EM { color: red } /* vermelho !! */
Comentários não podem ser alinhados. Para um browser compatível com CSS1, um comentário é equivalente a um espaço em branco.
Em CSS1, um estilo normalmente é associado a um elemento com base na posição que este elemento ocupa dentro da estrutura hierárquica do documento. Isto é suficiente para uma grande variedade de estilos, mas não atende a alguns efeitos comuns. O conceito de pseudo-classes e de pseudo-elementos veio atender esta área, permitindo que informações exteriores possam influenciar o processo de formatação do documento.
Pseudo-classes e pseudo-elementos podem ser usados como seletores na CSS, mas eles não existem dentro da HTML. Mais exatamente, eles são 'inseridos' pelo browser, sob certas condições, para serem usados como elos de ligação com as folhas de estilo. Eles são referidos como 'classes' e 'elementos' porque esta é uma maneira conveniente de descrever seu comportamento. Mais especificamente, seu comportamento é definido por uma tag fictícia de seqüência.
Pseudo-elementos são usados para especificar sub-partes de elementos, enquanto pseudo-classes permitem às folhas de estilo diferenciar entre tipos diferentes de elementos.
Os browsers normalmente usam cores diferentes para mostrar links ainda não visitados, links ativos e links já visitados. Em CSS1, isto é feito através de pseudo-classes do elemento 'A' (anchor):
A:link { color: red } /* link não visitado */
A:visited { color: blue } /* link visitado */
A:active { color: lime } /* link ativo */
Todos os elementos 'A' com um atributo 'HREF' serão classificados em um, e apenas um, destes grupos (ou seja, as definições das posições locais dos links não serão afetadas). Os browsers podem decidir mover um elemento de um grupo a outro (de 'visitado' para 'não visitado', por exemplo, após um certo tempo). Um 'link ativo' é aquele que está sendo selecionado no momento pelo leitor (está sendo 'clicado').
A formatação de uma pseudo-classe 'anchor' ocorre como se a classe tivesse sido inserida manualmente. Um browser não é obrigado a reformatar todo o documento apenas porque ocorreu a transição no estado da pseudo-classe (de 'não visitado' para 'ativo', por exemplo). Uma folha de estilo pode especificar que a propriedade 'font-size' de um link 'ativo' deva ser maior que um link 'visitado', mas o browser não é obrigado a reformatar dinamicamente o documento quando o leitor seleciona o link 'visitado'.
As propriedades dos seletores de pseudo-classes não são aplicadas às classes normais, e vice-versa. O estilo definido no exemplo abaixo não irá exercer, portanto, qualquer influência sobre a formatação do documento:
A:link { color: red }
<A CLASS=link NAME=target5> ... </a>
Na CSS1, a pseudo-classe 'anchor' não possui influência sobre outros elementos além de 'A'. Portanto, o tipo do elemento pode ser omitido do seletor:
A:link { color: red }
:link { color: red }
Os dois seletores acima irão atuar sobre os mesmos elementos.
Os nomes das pseudo-classes não diferenciam entre letras maiúsculas e minúsculas.
As pseudo-classes podem ser usadas como seletores contextuais:
A:link IMG { border: solid blue }
E ainda, as pseudo-classes podem ser combinadas com as classes normais:
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">link externo</a>
Se o link do exemplo acima já tiver sido visitado, ele irá ser formatado em azul. Note que o nome das classes normais precede o das pseudo-classes no seletor.
Alguns efeitos tipográficos comuns não estão associados com os elementos dentro da estrutura do documento, mas sim com itens tipográficos associados ao ambiente de formatação do documento. Em CSS1, existem dois itens tipográficos que podem ser associados com pseudo-elementos: a primeira linha de um elemento ('first-line'), e sua letra inicial ('first-letter').
núcleo CSS1: Browsers podem ignorar todas as regras associadas a ':first-line' ou ':first-letter' no seletor, ou, de outra maneira, suportar apenas um subconjunto das propriedades destes pseudo-elementos (veja normas de conformidade CSS1).
O pseudo-elemento 'first-line' é usado para aplicar estilos especiais à primeira linha de um elemento quando ela for formatada no ambiente de exibição:
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>A primeira linha de um artigo publicado na Web.
Em um browser baseado apenas em texto, esta formatação resultaria em:
A PRIMEIRA LINHA DE UM artigo publicado na Web.
A seqüência de tags que corresponde a este exemplo é:
<P> <P:first-line> A primeira linha de um </P:first-line> artigo publicado na Web. </P>
O tag de finalização 'P:first-line' é colocado no final da primeira linha a ser mostrada.
O pseudo-elemento 'first-line' pode ser associado apenas a um elemento a nível de bloco.
Este pseudo-elemento é similar a um elemento 'inline', mas com certas restrições. Somente as propriedades a seguir são aplicáveis ao elemento 'first-line': propriedades das fontes, propriedades das cores e do 'background', word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear.
O pseudo-elemento 'first-letter' é usado, por exemplo, para aumentar o tamanho da primeira letra de uma frase, o que é um efeito tipográfico bastante comum. É similar a um elemento 'inline' quando sua propriedade 'float' é ajustada para 'none'; caso contrário, é similar a um elemento flutuante.
Estas são as propriedades aplicáveis ao pseudo-elemento 'first-letter':
propriedades das margens
propriedades de espaçamento
propriedades das bordas
Para fazer com que a letra inicial de um parágrafo tenha altura de duas linhas, você pode usar a seguinte definição de estilo:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
Se um browser baseado em texto possui suporte para o pseudo-elemento 'first-letter', este estilo produzirá um texto formatado como:
___ | HE FIRST few | words of an article in the Economist.
A seqüência de tags que produziria esta saída seria:
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>
Note que o pseudo-elemento 'first-letter' confina o conteúdo ao qual é aplicado (ou seja, o caracter inicial), enquanto que o tag inicial do 'first-line' é colocado imediatamente à direita do tag inicial do elemento ao qual ele é aplicado.
O browser define quais caracteres estão dentro do pseudo-elemento 'first-letter'. Normalmente, as aspas que precedem a primeira letra serão incluídas:
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
Quando o parágrafo inicia com alguma outra pontuação (parênteses ou reticências), ou outros caracteres que não são considerados letras (tais como números e símbolos), o pseudo-elemento 'first-letter' é ignorado e não produzirá nenhum efeito.
Alguns idiomas podem possuir regras específicas sobre como tratar certas combinações de letras. Em alemão, por exemplo, se o conjunto 'ij' aparece no início de uma palavra, ambos devem ser considerados como fazendo parte do pseudo-elemento 'first-letter'.
O pseudo-elemento 'first-letter' somente pode estar associado a um elemento a nível de bloco.
Em um seletor contextual, os pseudo-elementos são permitidos apenas no fim do seletor:
BODY P:first-letter { color: purple }
Os pseudo-elementos podem ser combinados com classes nos seletores:
P.initial:first-letter { color: red }
<P CLASS=initial>Primeiro parágrafo</P>
Este exemplo fará com que seja vermelho o primeiro caracter de todos os elementos 'P' que pertençam à classe 'CLASS=initial'. Quando combinados com classes ou pseudo-classes, os pseudo-elementos devem ser definidos no final do seletor. Pode haver apenas um pseudo-elemento definido em cada seletor.
Vários pseudo-elementos podem ser combinados:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Algum texto que ocupe o mínimo de duas linhas</P>
Neste exemplo, a primeira letra de cada elemento 'P' será verde e terá um tamanho de 24pt. O restante da primeira linha (definida pelo ambiente de exibição) será azul, enquanto o resto do parágrafo será vermelho. Assumindo que uma quebra de linha ocorrerá antes da palavra 'mínimo', a seqüência de tags que produz o mesmo efeito é:
<P> <P:first-line> <P:first-letter> A </P:first-letter>lgum texto que ocupe o </P:first-line> mínimo de duas linhas </P>
Note que o pseudo-elemento 'first-letter' está contido no pseudo-elemento 'first-line'. As propriedades definidas em 'first-line' serão herdadas pelo 'first-letter', mas perderão o efeito se também estiverem definidas no 'first-letter'.
Se um pseudo-elemento quebra a seqüência de definição de um elemento real, os tags extras necessários devem ser regenerados pelo browser. Por exemplo, se um elemento 'SPAN' transpõe um tag </P:first-line>, um conjunto de tags inicial e final do 'SPAN' deve ser inserido para que a seqüência fique correta:
<P> <P:first-line> <SPAN> This text is inside a long </SPAN> </P:first-line> <SPAN> span element </SPAN>
Na CSS, pode haver mais de um estilo influenciando simultaneamente a formatação de um documento. Existem duas razões para que isto seja permitido: modularidade e equilíbrio entre autor e leitor.
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* sobrepõe estilos importados */Algumas vezes irão ocorrer conflitos entre os vários estilos que definem a formatação de um documento. A resolução destes conflitos é baseada na consideração de qual estilo possui maior importância. Por padrão, o estilo do leitor possui importância menor em relação ao estilo do autor. Ou seja, em um conflito deste tipo, será usado o estilo definido pelo autor.
Em caso de conflito com o estilo padrão do browser, a preferência é dada aos estilos definidos pelo autor e pelo leitor.
Os estilos importados são encadeados um com o outro, na mesma ordem em que eles são importados, de acordo com as regras definidas abaixo. Qualquer regra definida num estilo especificado localmente se sobrepõe às regras definidas em estilos importados. Em outras palavras, em relação aos estilos locais, os importados estão num nível mais baixo na ordem de encadeamento. Um estilo importado pode, por sua vez, importar outros estilos obedecendo às mesmas regras de preferência.
Na CSS1, todos os comandos '@import' devem estar no início da folha de estilos, antes de qualquer outra declaração. Isto torna fácil enxergar que as regras locais prevalecem em relação às importadas.
Os projetistas de folhas de estilos podem aumentar a importância de suas declarações:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
No exemplo acima, as três primeiras declarações tiveram sua importância aumentada, enquanto a última declaração permaneceu no seu estado normal.
Uma regra definida pelo leitor com uma declaração 'important' se sobrepõe à mesma regra definida pelo autor com uma declaração normal. Já uma regra do autor com declaração 'important' se sobrepõe à mesma regra declarada pelo leitor também com 'important'.
Conflitos entre regras de estilos são intrínsecos à CSS. Para determinar qual valor atribuir a uma dada combinação elemento/propriedade, deve ser adotado o seguinte algoritmo:
LI {...} /* a=0 b=0 c=1 -> grau = 1 */
UL LI {...} /* a=0 b=0 c=2 -> grau = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> grau = 3 */
LI.red {...} /* a=0 b=1 c=1 -> grau = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> grau = 13 */
#x34y {...} /* a=1 b=0 c=0 -> grau = 100 */
Os pseudo-elemento e as pseudo-classes são contados, respectivamente, como elementos e classes normais.
A pesquisa pelo valor de uma propriedade pode ter encerrada logo que seja encontrada uma regra com importância maior que outra regra aplicada à mesma combinação elemento/propriedade.
Esta estratégia dá aos estilos definidos pelo autor uma importância consideravelmente maior do que à atribuída aos estilos do leitor. Portanto é importante que o leitor possua a capacidade de desligar a influência de certos estilos, por exemplo, através de menus pull-down.
Uma declaração no atributo 'STYLE' de um elemento (veja CSS e HTML para um exemplo) possui a mesma importância que uma declaração com um seletor 'ID' que esteja especificada no final de uma folha de estilo:
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
No exemplo acima, a cor do elemento 'P' será vermelha. Embora o grau de especificação seja o mesmo para as duas declarações, a declaração no atributo 'STYLE' irá prevalecer sobre a do elemento 'STYLE' devido à 5ª regra de encadeamento.
O browser poderá optar por respeitar outros atributos estilísticos da HTML, por exemplo 'ALIGN'. Se este for o caso, estes atributos devem ser traduzidos para as regras CSS correspondentes, com grau de especificação igual a 1. Estas regras são assumidas como estando no início da folha de estilo do autor, e podem ser preteridas por regras estilísticas que aparecem posteriormente na folha de estilo. Numa fase de transição, esta política tornará fácil a coexistência dos atributos estilísticos HTML com as folhas de estilo.
CSS1 adota como modelo de formatação uma seqüência simples de caixas, na qual cada elemento formatado ocupa uma ou mais destas caixas (os elementos que possuem o valor 'none' para a propriedade 'display' não são formatados e, como conseqüência, não resultarão numa caixa). Todas as caixas possuem um conteúdo central com áreas opcionais adjacentes formando as margens, bordas e espaçadores (padding).
O tamanho das áreas das margens, das bordas e do espaçamento são definidas pelas propriedades das margens ('margin', 'top', 'right', 'bottom' e 'left'), das bordas ('border', 'border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-color', 'border-style', 'border-top', 'border-right', 'border-bottom' e 'border-left') e do espaçamento ('padding', 'padding-top', 'padding-left', 'bottom' e 'padding-left').
A área de espaçamento usa o padrão de fundo (background) do próprio elemento (definido pelas propriedades 'background' ('background', 'background-color', 'background-image', 'background-repeat', 'background-attachment' e 'background-position').
A cor e o estilo da borda são definidos pelas propriedades das bordas. As margens sempre são transparentes, portanto sempre prevalece o padrão de fundo definido para o elemento pai.
O tamanho de uma caixa é a soma da largura do elemento (seja texto ou gráfico), com a área de espaçamento mais as áreas das bordas e das margens.
Do ponto de vista do browser, existem dois tipos principais de elementos: o elemento a nível de bloco e os elementos internos.
Elementos que possuem um valor 'display' de 'block' ou 'list-item' são chamados elementos a nível de bloco. Também são considerados a nível de bloco os elementos flutuantes (aqueles com um valor para 'float' diferente de 'none').
O exemplo a seguir ilustra como formatar margens e áreas de espaçamento (padding) para um elemento 'UL' com dois filhos (dois outros elementos aninhados a ele). Para simplificar o diagrama, não foram definidas propriedades para as bordas. Neste exemplo, as letras A até H, e a até h, que representam constantes, não são permitidas na sintaxe CSS1 - são usadas aqui apenas para efeito didático.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* ou seja, texto branco sobre fundo azul */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>Primeiro elemento
<LI>Segundo elemento
</UL>
Tecnicamente, as propriedades das margens e dos espaçamentos não são herdadas. Mas, como o exemplo mostra, a disposição em camadas de um elemento sempre é feita com relação ao seu elemento pai, assim as propriedades destes elementos pai influem sobre os seus filhos.
Se houvessem bordas no exemplo anterior, elas apareceriam entre as margens e as áreas de espaçamento.
O diagrama a seguir introduz alguns termos úteis:
A borda esquerda exterior é a borda extrema de um elemento, incluindo seu espaçamento, borda e margem. A borda externa interior é a borda que limita apenas o conteúdo, excluindo qualquer espaçamento, bordas ou margens. O mesmo vale para o lado direito.
O topo é a borda superior extrema do elemento, englobando o espaçamento e as áreas de borda e margem; ele é definido apenas para elementos internos e flutuantes, não para elementos de bloco não flutuantes. O topo interior limita o conteúdo, não envolvendo qualquer espaçamento, borda ou margem; também ele é definido apenas para elementos internos e flutuantes, não para elementos de bloco não flutuantes. O fundo interior limita a parte inferior do elemento, não envolvendo qualquer espaçamento, borda ou margem.
A largura de um elemento é a largura de sue conteúdo, ou seja, é a distância entre as duas bordas interiores. A altura corresponde à altura do conteúdo, ou seja, entre o topo e fundo interiores.
A largura da margem em elementos flutuantes a nível de blocos indica a distância mínima para as bordas dos elementos adjacentes. Duas ou mais margens verticais contíguas (isto é, sem nenhuma borda, espaçamento ou conteúdo entre elas) são unidas e é usado o maior valor destas margens. Em muitos casos, depois da união destas margens o resultado fica visualmente mais agradável e mais próximo do esperado pelo autor. No exemplo anterior, as margens entre os dois elementos 'LI' são unidas usando os valores máximos da margem inferior do primeiro elemento LI com o da margem superior do segundo elemento.
De maneira análoga, se o espaçamento entre o 'UL' e o primeiro elemento 'LI' (o valor E) fosse zero, as margens do UL e do primeiro LI seriam unidas.
O tamanho e posição horizontal de um elemento são determinados por sete propriedades: margem esquerda ('margin-left'), borda esquerda ('border-left'), espaçamento esquerdo ('padding-left'), largura ('width'), espaçamento direito ('padding-right'), borda direita ('border-right') e margem direita ('margin-right'). A soma dos valores destas sete propriedades sempre é igual à largura do elemento pai.
Por padrão, a largura de um elemento é definida como 'auto'. Se o elemento não é um 'elemento de substituição', então sua largura é calculada de maneira que a soma das sete propriedades já mencionadas seja igual à largura do elemento pai. Se o elemento é um elemento de substituição, sua largura é automaticamente ajustada pela largura própria do elemento que serve como substituição.
Destas sete propriedades, três delas podem ser definidas como 'auto': a margem esquerda, a largura e a margem direita. Para os elementos de substituição, um valor 'auto' encontrado na largura é substituído pela largura intrínseca do elemento de origem.
A largura possui um valor mínimo definido a priori pelo browser (este valor pode variar de elemento para elemento, e ainda ser dependente do valor de outras propriedades). Este valor é adotado pelo browser sempre que o valor definido ou calculado resultar menor do que ele (seja porque tenha sido expressamente definido pelo autor, ou porque as regras indicadas acima o tornaram muito pequeno).
Se apenas uma das propriedades margem esquerda, largura ou margem direita é ajustada para 'auto', então o browser irá impor para esta propriedade um valor tal que faça com que a soma dos valores das sete propriedades mencionadas seja igual à largura do elemento pai.
Se nenhuma destas três propriedades for ajustada para 'auto', então o browser irá impor o valor 'auto' para a propriedade margem direita.
Se mais do que uma destas três propriedades for ajustada para 'auto', e uma delas for a largura, então as outras duas (margem esquerda e margem direita) serão definidas para zero e a largura irá assumir o valor necessário para fazer com que a soma das sete propriedades mencionadas acima seja igual à largura do elemento pai.
Por outro lado, se tanto a margem esquerda como a margem direita forem definidas como 'auto', então para ambas será adotado um mesmo valor de maneira que o elemento fique centralizado em relação ao seu pai.
Em um elemento que seja interno ou flutuante, se o valor 'auto' for indicado para uma das sete propriedades já mencionadas então a ele será atribuído o valor zero.
Ao contrário das margens verticais, as horizontais nunca são unidas umas às outras.
Elementos que possuem a propriedade 'display' com valor 'list-item' são formatados como elementos a nível de bloco, mas são precedidos por um marcador de lista. O tipo do marcador é determinado pelo valor da propriedade 'list-style'. O marcador é colocado de acordo com o valor da propriedade 'list-style':
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>primeiro item da primeira lista
<LI>segundo item da primeira lista
</UL>
<UL CLASS=COMPACT>
<LI>primeiro item da segunda lista
<LI>segundo item da segunda lista
</UL>
Isto resultará em:
* primeiro item da primeira lista
* segundo item da primeira lista
* primeiro item da segunda lista
* segundo item da segunda lista
Em um texto escrito no sentido inverso (da direita para a esquerda), os marcadores estarão do lado direito.
Pelo uso da propriedade 'float', um elemento pode ser declarado como estando fora do fluxo normal dos demais elementos, sendo, então, tratado como um elemento a nível de bloco. Por exemplo, se a propriedade 'float' de uma figura for definida como 'left', então ela será deslocada para a esquerda até atingir ou a margem, ou a área de espaçamento ou a borda de algum outro elemento a nível de bloco. O fluxo normal dos demais elementos fluirá pelo lado direito. As margens, as bordas e as áreas de espaçamento do elemento serão todas obedecidas, e as margens jamais serão fundidas com as dos elementos adjacentes.
O posicionamento de um elemento flutuante está sujeito às seguintes condições (veja elementos a nível de blocos para uma explicação dos termos):
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
Algum texto que não tem outro objetivo senão...
</BODY>
Este exemplo será formatado como:
Note como a margens do elemento 'P' ficam coladas à margem do elemento flutuante 'IMG'.
Existem duas situações onde os elementos flutuantes podem sobrepor a margem, a borda e o espaçamento de outros elementos:
Elementos que não são formatados como elementos a nível de bloco são chamados elementos internos. Um elemento interno pode compartilhar o espaço de uma linha da publicação com outros elementos. Veja este exemplo:
<P>Aparecem <EM>várias</EM> palavras <STRONG>enfatizadas</STRONG>.</P>
O elemento 'P' normalmente é um elemento a nível de bloco, ao passo que os elementos 'EM' e 'STRONG' são elementos internos. Se o elemento 'P' possuir largura suficiente para conter todos os outros elementos em uma mesma linha, então esta linha possuirá dois elementos internos:
Aparecem várias palavras enfatizadas.
Se não houver espaço suficiente numa única linha, o elemento interno será dividido em várias partes para ocupar as linhas seguintes:
<P>Aparecem <EM>várias palavras enfatizadas</EM> aqui.</P>
O exemplo acima seria formatado como:
Aparecem várias palavras enfatizadas aqui.
Se o elemento interno possuir margens, bordas, espaçamentos ou decorações anexadas ao texto, elas não terão nenhuma influência no processo de divisão do elemento:
O esquema acima está distorcido devido ao uso dos caracteres gráficos ASCII. Veja 'the-height-of-lines' para uma descrição sobre como calcular a altura de linhas.
Um elemento substituído é um elemento que no processo de formatação é substituído pelo conteúdo indicado no próprio elemento. Por exemplo, em HTML o elemento 'IMG' é substituído pela imagem indicada pelo atributo 'SRC'. Pode-se imaginar que os elementos substituídos chegam com suas próprias dimensões intrínsecas. Se o valor da propriedade 'width' é 'auto', a largura intrínseca do elemento é usada como a largura a ser formatada para exibição. Se for especificado um valor diferente de 'auto', este valor é usado e o elemento substituído é redimensionado de acordo (o método de redimensionamento depende da mídia adotada para exibição). A propriedade 'height' é usada da mesma maneira.
Os elementos substituídos tanto podem ser elementos internos como elementos a nível de bloco.
Todos os elementos possuem a propriedade 'line-height' que, em princípio, indica a altura total de uma linha de texto. É adicionado espaço extra acima e abaixo do texto da linha para que seja obtida a altura indicada. Por exemplo, se o texto possui altura de 12pt e a 'line-height' é ajustada para '14pt', um espaço extra de 2pt é adicionado, normalmente 1pt acima e 1pt abaixo da linha. Elementos vazios (sem conteúdo) passam pelo mesmo processo de cálculo de espaços que os elementos com conteúdo.
A diferença entre o tamanho da fonte e o valor de 'line-height' é chamada de guia. Metade da guia é chamada de meia-guia. Após a formatação, cada linha irá formar um retângulo.
Se uma linha de texto possui seções com valores diferentes de 'line-height' (porque existem elementos internos na linha), então cada uma destas seções possui sua própria meia-guia acima e abaixo. A altura do retângulo vai do topo da seção mais alta até o fundo da mais baixa. Note que este topo e este fundo não são, necessariamente, tomados do elemento mais alto, uma vez que os elementos podem ser posicionados verticalmente com a propriedade de alinhamento vertical ('vertical-align'). Para formar um parágrafo, cada linha é empilhada verticalmente embaixo da linha anterior.
Note que qualquer espaçamento, borda ou margem acima e abaixo de elementos internos não substituídos não exercem influência sobre a altura da linha. Em outras palavras: se a propriedade 'line-height' possuir valor muito pequeno para acomodar o espaçamento ou a borda, eles irão se sobrepor com o texto das outras linhas.
Elementos substituídos (por exemplo, imagens) em uma linha podem fazer com que a linha aumente de tamanho, caso o topo do elemento substituído (incluindo seus espaçamentos, bordas e margens) esteja acima do da maior seção de texto, ou se o fundo estiver abaixo da menor seção.
No caso normal, quando existe apenas um valor de 'line-height' para todo o parágrafo, e nenhuma imagem grande, a definição acima irá garantir que as bases de linhas consecutivas estão distanciadas exatamente pelo valor de 'line-height'. Isto é importante quando colunas de texto com fontes diferentes precisam ser alinhadas, por exemplo, numa tabela.
Note que isto não evita que o texto de duas linhas adjacentes não se sobreponham. O valor de 'line-height' pode ser menor do que a altura do texto, neste caso o valor da guia será negativo. Isto pode ser útil caso você saiba de antemão que o texto não contem gradientes de subida ou descida (por exemplo, texto apenas em letras maiúsculas não acentuadas), o que permite que as linhas fiquem muito próximas entre si.
O ambiente de exibição ('canvas') é a área do browser usada para exibição dos documentos. Não existem elementos estruturais associados diretamente ao ambiente de exibição, o que provoca duas dúvidas durante a formatação de um documento:
Uma resposta razoável para a primeira questão é que a largura inicial do ambiente de exibição é baseada no tamanho da tela, mas a CSS1 deixa esta questão para ser resolvida pelo próprio browser. Também é razoável esperar que o browser altere a largura do ambiente quando sua janela for redimensionada, mas isto também está fora do escopo da CSS1.
Existem extensões HTML que abrem um precedente para a segunda questão: atributos no elemento 'BODY' podem definir o padrão de fundo (background) da área de exibição. Para das suporte aos objetivos dos projetistas de páginas HTML, CSS1 introduz uma regra especial para determinar o padrão de fundo da área de exibição:
se o valor do padrão de fundo ('background') do elemento 'HTML' não for transparente ('transparent'), então ele deve ser usado. Caso contrário, usar o valor definido na propriedade 'background' de 'BODY'. Se o valor final for transparente ('transparent'), então a formatação está indefinida pelo autor.
Esta regra permite definir:
<HTML STYLE="background: url(http://style.com/marble.png)"> <BODY STYLE="background: red">
Neste exemplo, o ambiente de exibição será preenchido com 'marble'. O padrão de fundo do elemento 'BODY' (o qual pode ou não cobrir todo o ambiente de exibição) será vermelho ('red').
Até surgirem formas novas de indicar o ambiente de exibição, é recomendado que todas as propriedades que definam a formatação do ambiente sejam colocadas no elemento 'BODY'.
No estágio atual de definição das propriedades e seus valores na CSS1, não existe como descrever o comportamento do elemento 'BR'. Em HTML, 'BR' especifica uma quebra de linha entre palavras. Versões futuras da CSS poderão adicionar novos elementos, mas os browsers baseados nesta versão CSS1 devem tratar o elemento 'BR' de maneira diferenciada.
As folhas de estilo definem a visualização de um documento pela atribuição de diversos valores às suas propriedades de estilo. Esta seção lista estas propriedades e seus valores possíveis.
No texto que se segue, os valores permitidos para cada propriedade são listados usando a seguinte sintaxe:
Valor: N | NW | NE
Valor: [ <comprimento> | thick | thin ]{1,4}
Valor: [<família> , ]* <família>
Valor: <url>? <cor> [ / <cor> ]?
Valor: <url> || <cor>
As palavras entre "<" e ">" indicam o tipo do valor. Os tipos mais comuns são <comprimento>, <percentagem>, <url>, <número> e <cor>; eles estão descritos na seção Unidades. Os tipos mais específicos de valores (<família-da-fonte> e <estilo-da-borda>) estão descritos nos tópicos correspondentes.
As outras palavras são palavras-chaves que devem ser usadas tal como aparecem, sem as aspas. A barra (/) e a vírgula (,) também devem ser empregadas tal como estão definidas.
Vários parâmetros indicados em seqüência significa que todos eles devem ser definidos, na ordem em que aparecem. Uma barra (|) separa alternativas: apenas um dos parâmetros deve ser definido. Uma barra dupla (||) significa que tanto o parâmetro A como o B, ou mesmo ambos, podem ser definidos, em qualquer ordem. Colchetes ([]) são usados para agrupar parâmetros. Em ordem de prioridade, uma seqüência de parâmetros vale mais que a barra dupla (||), e a barra dupla vale mais que a barra simples (|). Portanto,
a b | c || d e
é equivalente a
[ a b ] | [ c || [ d e ]]
Cada tipo de valor, palavra-chave ou grupamento ([]) pode vir seguido por um dos seguintes modificadores:
A definição das propriedades das fontes será o uso mais comum dado às folhas de estilo. Infelizmente, não existem termos bem definidos e aceitos universalmente para classificar as fontes, e termos que são aplicados a uma dada família de fontes podem não serem apropriados para alguma outra família. Por exemplo, 'italic' normalmente é usado para definir texto inclinado, o qual também pode ser definido como oblique, slanted, incline, cursive ou kursiv. Portanto, não é um problema simples mapear propriedades para as fontes.
CSS1 define as propriedades 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size' e 'font'.
Devido à inexistência de uma terminologia aceita universalmente para as propriedades das fontes, a definição destas propriedades e seus valores deve ser feita cuidadosamente. Elas devem ser empregadas numa ordem muito bem definida para assegurar que o resultado seja o mais consistente possível entre os vários browsers (assumindo, é claro, que a mesma biblioteca de fontes esteja presentes em todos eles).
(este algoritmo pode ser otimizado para evitar a consulta de todas as propriedades para cada caracter a ser montado)
As regras de ajuste das propriedades indicadas no item (2) são as seguintes:
font-family: [[<família> | <genérica>],]* [<família>
| <genérica>]
Valor padrão: depende da cada browser
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/a
O valor desta propriedade consiste numa relação de nomes específicos de famílias de fontes ou de seus nomes genéricos. Ao contrário de outras propriedades CSS1, os valores na relação de nomes são separados por vírgulas para indicar que eles são alternativos:
BODY { font-family: gill, helvetica, sans-serif }
Existem dois tipos de valores que podem ocorrer na relação de nomes:
É recomendável que os autores de folhas de estilo sempre forneçam uma família genérica como última alternativa.
Nomes que contenham espaços em branco devem ser colocados entre aspas:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
Se as aspas forem omitidas, qualquer espaço anterior ou posterior ao nome da fonte será ignorado, e qualquer seqüência de espaços dentro do nome da fonte será convertido um único espaço em branco.
font-style: normal | italic | oblique
Valor padrão: normal
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/a
A propriedade 'font-style' define se a fonte é normal (algumas vezes chamada de 'romana'), itálica ou oblíqua.
Um valor 'normal' seleciona uma fonte que está classificada como 'normal' na base de dados do browser, enquanto 'oblique' indica uma fonte classificada como 'oblique'. Já um valor 'italic' seleciona uma fonte classifica como 'italic' ou, caso não exista, uma outra classificada como 'oblique'.
Uma fonte que esteja classificada como 'oblique' no banco de dados de um browser é, normalmente, gerada internamente pela inclinação de uma fonte normal.
Fontes que contenham as palavras 'Oblique', 'Slanted' ou 'Incline' em seus nomes são classificadas como 'oblique'. Já as fontes com Italic, Cursive ou Kursiv são classificadas como 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
Neste exemplo, um texto enfatizado que faça parte de algum elemento 'H1' aparece como 'normal'.
font-variant: normal | small-caps
Valor padrão: normal
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/a
Um outro tipo de variação no formato da fonte dentro de uma família é a 'small-caps'. Numa fonte deste tipo, o formato das letras minúsculas é similar ao das letras maiúsculas, diferindo apenas no tamanho.
O valor 'normal' indica uma fonte que não pertença a este tipo. É aceitável, embora não exigido pela CSS1, que uma fonte 'small-caps' seja criada à partir de uma fonte normal onde as letras minúsculas são substituídas pelas letras maiúsculas com tamanho menor. Como último recurso, as letras maiúsculas poderão substituir as minúsculas sem qualquer alteração de tamanho.
O exemplo a seguir produz um elemento 'H3' em 'small-caps', no qual as letras enfatizadas são oblíquas:
H3 { font-variant: small-caps }
EM { font-style: oblique }
Poderão existir outras variações dentro de uma família de fontes, tais como fontes com caracteres antigos, letras condensadas ou expandidas, etc. A CSS1 não possui propriedades para tratar destas fontes.
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900
Valor padrão: normal
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/a
A propriedade 'font-weight' seleciona a intensidade de uma fonte. Na seqüência de valores de '100' a '900', cada número indica uma fonte mais intensa (escura) que o valor anterior. A palavra-chave 'normal' equivale à intensidade '400', enquanto que 'bold' é igual a '700'. Outras palavras-chaves para indicar as intensidades mostraram-se confusas, optando-se pela seqüência numérica.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
Os valores representados por 'bolder' e 'lighter' são usados sempre como referência aos valores herdados do elemento pai:
STRONG { font-weight: bolder }
Elementos filhos herdam a intensidade, não a palavra-chave.
As fontes normalmente possuem uma ou mais propriedades cujos valores são nomes descritivos da sua intensidade. Não existe um padrão universalmente aceito para estes nomes. Seu uso inicial era distinguir fontes de diferentes tonalidades dentro de uma única família. Seu uso por outras famílias de fontes varia bastante; por exemplo, uma fonte que você imagina como sendo pesada (escura) pode ter sido descrita como Regular, Roman, Book, Medium, Semi- ou DemiBold, Bold, ou ainda Black, dependendo de quão escura é a fonte dita 'normal' pelo seu criador. Devido a esta falta de padronização, em CSS1 a intensidade é expressa por valores numéricos, onde o valor '400' indica a fonte 'normal' para aquela família.
Os dois exemplos seguintes mostram este processo. Foram assumidas quatro intensidades na família do exemplo 1: Regular, Medium, Bold, Heavy (do mais claro ao mais escuro). Já no exemplo 2 foram assumidas seis intensidades: Book, Medium, Bold, Heavy, Black, ExtraBlack. Repare que no exemplo 2 decidiu-se não associar a ExtraBlack.
Fontes disponíveis | Associações | Lacunas preenchidas ----------------------+---------------+------------------- "Exemplo 1: Regular" | 400 | 100, 200, 300 "Exemplo 1: Medium" | 500 | "Exemplo 1: Bold" | 700 | 600 "Exemplo 1: Heavy" | 800 | 900
Fontes disponíveis | Associações | Lacunas preenchidas ------------------------+---------------+------------------- "Exemplo 2: Book" | 400 | 100, 200, 300 "Exemplo 2: Medium" | 500 | "Exemplo 2: Bold" | 700 | 600 "Exemplo 2: Heavy" | 800 | "Exemplo 2: Black" | 900 | "Exemplo 2: ExtraBlack" | (nenhuma) |
Desde que a intenção das palavras 'bolder' e 'lighter' é escurecer ou clarear a fonte dentro de sua família, e como a família pode não possuir associações para todos os valores simbólicos, o ajuste do valor de 'bolder' é feito levando a fonte para o próximo valor mais escuro disponível, e 'lighter' para o mais claro. Para ser mais preciso, o significado destas palavras é:
Não há garantia de que sempre haverá uma fonte mais escura (ou mais clara) do que a especificada. Por exemplo, algumas famílias de fontes possuem definidos apenas os valores 'normal' e 'bold', enquanto que outras possuem oito valores diferentes. A única garantia é que a fonte de um dado valor será no mínimo mais escura que a que possui um valor menor, dentro da mesma família.
font-size: <absolute-size> | <relative-size> | <length>
| <percentage>
Valor padrão: medium
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: relativo ao tamanho da fonte no elemento pai
Os valores de comprimento e percentagem não devem ser tomados da tabela de tamanhos de fonte quando for efetuado o cálculo para o elemento.
Não são permitidos valores negativos.
Em todas as outras propriedades, os valores de comprimento 'em' e 'ex' referem-se ao tamanho da fonte do elemento considerado. Nesta propriedade ('font-size'), estas unidades referem-se ao tamanho da fonte do elemento pai.
Note que uma aplicação pode interpretar de várias maneiras um dado valor, em função do contexto. Por exemplo, num cenário VRML uma fonte pode assumir tamanhos diferentes de acordo com a perspectiva em que é visualizada.
Exemplos:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Se o fator de escala de 1,5 estiver sendo usado, as últimas três declarações são idênticas.
font: [ <font-style> || <font-variant> || <font-weight>
]? <font-size> [ / <line-height> ]? <font-family>
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: permitidos para <font-size> e <line-height>
A propriedade 'font' é um atalho para definir 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' e 'font-family' em um único local da folha de estilo.
Veja nos tópicos anteriores a definição dos valores permitidos. Propriedades para as quais não é fornecido nenhum valor assumem seu valor padrão.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
Na segunda atribuição, o tamanho percentual (80%) refere-se ao tamanho da fonte do elemento pai. Na terceira, o tamanho percentual da linha diz referência ao próprio tamanho da fonte do elemento considerado.
Na primeira atribuição, as propriedades 'font-style', 'font-variant' e 'font-weight' estão ausentes, o que significa que todas as três possuirão o valor padrão ('normal'). A quarta atribuição define 'font-weight' em 'bold', 'font-style' em 'italic' e, implicitamente, faz 'font-variant' ser 'normal'.
A quinta atribuição define 'font-variant' ('small-caps'), 'font-size' (120% da fonte do elemento pai), 'line-height' (120% do tamanho da fonte) e 'font-family' ('fantasy'). Deduz-se que o valor 'normal' refere-se às outras duas propriedades: 'font-style' e 'font-weight'.
Estas propriedades descrevem a cor (normalmente chamada foreground color) e o padrão de fundo - background - de um elemento (ou seja, a superfície na qual o elemento é desenhado). O padrão de fundo tanto pode ser constituído de uma única cor como de uma imagem. Também são definidas a posição da imagem, se e como ela será repetida, e quando ela é fixa ou acompanha o rolamento da tela.
A propriedade 'color' é herdada normalmente. Já a propriedade 'background' não é herdada, mas o padrão definido para o elemento pai será visualizado caso nada seja definido.
color: <cor>
Valor padrão: definido pelo browser
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/a
Esta propriedade define a cor do texto de um elemento (foreground color). Uma cor pode ser especificada de várias maneiras.
EM { color: red } /* linguagem normal */
EM { color: rgb(255,0,0) } /* código RGB (0-255) */
Veja em unidades para cores uma descrição dos valores permitidos.
background-color: <cor> | transparent
Valor padrão: transparent
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade define a cor de fundo de um elemento.
H1 { background-color: #F00 }
background-image: <url> | none
Valor padrão: none
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade define a imagem de fundo de um elemento. Quando da definição desta propriedade, pode-se também definir uma cor alternativa que será usada caso a imagem não seja encontrada. Quando a imagem é encontrada, ela se sobrepõe à cor de fundo.
BODY { background-image: url(marble.gif) }
P { background-image: none }
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Valor padrão: repeat
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Quando é especificada uma imagem de fundo, o valor desta propriedade define se e como a imagem é repetida.
Um valor igual a 'repeat' indica que a imagem deve ser repetida tanto horizontal como verticalmente. Já 'repeat-x' ('repeat-y') faz a imagem repetir-se apenas horizontalmente (verticalmente), de maneira a criar uma faixa que se estende de um lado a outro do ambiente de exibição. Quando o valor for definido como 'no-repeat', a imagem não será repetida.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
Neste exemplo, a imagem 'pendant' será repetida apenas verticalmente.
background-attachment: scroll | fixed
Valor padrão: scroll
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Quando uma imagem de fundo é definida, o valor de 'background-attachment' determina se a imagem é fixa em relação à área de exibição ou se ela irá acompanhar o rolamento da tela.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Núcleo CSS1: os browsers podem tratar o valor 'fixed' como 'scroll'. Entretanto, é recomendado que eles interpretem 'fixed' corretamente, ao menos nos elementos 'HTML' e 'BODY', pois não existe maneira dos autores de folhas de estilo definirem uma imagem apenas para os browsers que não suportam o valor 'fixed' (veja normas de conformidade CSS1).
background-position: [<percentage> | <length>]{1,2} | [top |
center | bottom] || [left | center | right]
Valor padrão: 0% 0%
Aplicável a: elementos a nível de bloco e elementos substituídos
Propriedade herdada: não
Valores percentuais: em relação ao tamanho do próprio elemento
Quando a imagem de fundo foi especificada, esta propriedade define sua posição inicial.
O par de valores '0% 0%' indica que o canto superior esquerdo da imagem deve ser colocado no canto superior esquerdo do retângulo que contem o elemento em questão (exclui as áreas de espaçamento, bordas e margens). Já os valores '100% 100%' colocam o canto inferior direito da imagem no canto inferior direito do mesmo retângulo. Com os valores '14% 84%', o ponto da imagem que está 14% à direita do canto superior esquerdo, e 84% abaixo do mesmo, será colocado na posição correspondente do retângulo já mencionado.
Com um par de valores '2cm 2cm', o canto superior esquerdo da imagem é colocado 2cm à direita e 2cm abaixo do canto superior esquerdo do elemento considerado.
Se for fornecido apenas um valor, será assumido que este valor corresponde à posição horizontal; o valor vertical será adotado como sendo 50%. Se existem dois valores definidos, o primeiro sempre indica a posição horizontal. Combinações de percentagens com comprimentos são aceitas ('50% 2cm'). Não são permitidos valores negativos.
Palavras-chave também podem ser usadas para indicar a posição da imagem de fundo, embora elas não possam ser combinadas com percentagens ou comprimentos. As palavras-chave aceitas, e suas interpretações, são as seguintes:
Exemplos:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Se a imagem é fixa em relação ao ambiente de exibição (veja 'background-attachment' acima), ela é posicionada com relação a este ambiente, e não ao elemento.
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
Neste exemplo, a imagem é posicionada no canto inferior direito do ambiente de exibição.
background: <background-color> || <background-image> || <background-repeat>
|| <background-attachment> || <background-position>
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: permitidos para <background-position>
A propriedade 'background' é um atalho para definir os valores das demais propriedades relacionadas ao fundo de exibição em um único lugar da folha de estilos.
Os valores permitidos estão indicados na descrição individual, dada acima, de cada propriedade 'background'.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
A propriedade 'background' sempre define os valores de todas as demais. No exemplo acima, na primeira atribuição foi definido apenas o valor de 'background-color', assim todas as demais assumem seus valores padrões. Já na atribuição seguinte todas as propriedades foram definidas.
word-spacing: normal | <length>
Valor padrão: normal
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/a
O valor indicado por 'length' corresponde ao espaçamento adicional acrescentado ao espaço padrão entre as palavras. Os valores podem ser negativos mas devem atender aos limites intrínsecos de cada browser, o qual possui liberdade de escolher um algoritmo próprio. O espaçamento entre as palavras também pode ser influenciado pelo alinhamento de parágrafos (à esquerda, à direita, centralizado ou justificado), o qual é definido pela propriedade 'text-align'.
H1 { word-spacing: 1em }
Aqui, o espaçamento entre cada palavra do elemento 'H1' será aumentado de '1em'.
Núcleo CSS1.Os browsers podem interpretar como 'normal' qualquer valor de 'word-spacing' (veja normas de conformidade CSS1).
word-spacing: normal | <length>
Valor padrão: normal
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/a
Esta propriedade define o espaço adicional a ser introduzido entre caracteres de uma mesma palavra. Os valores podem ser negativos mas devem atender aos limites intrínsecos de cada browser, o qual possui liberdade de escolher um algoritmo próprio. O espaçamento entre letras também é influenciado pela justificação do texto, o qual é determinado pela propriedade 'align'.
BLOCKQUOTE { letter-spacing: 0.1em }
Neste exemplo, o espaçamento entre as letras do elemento 'BLOCKQUOTE' é aumentado em '0.1em'.
Com o valor 'normal', os browsers são capazes de mudar o espaço entre letras para justificar um texto. Isto não é possível se 'letter-spacing' é definida especificamente pelo valor <length>:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Núcleo CSS1: Os browsers podem interpretar como 'normal' qualquer valor de 'letter-spacing' (veja normas de conformidade CSS1).
text-decoration: none | [ underline || overline || line-through || blink
]
Valor padrão: none
Aplicável a: todos os elementos
Propriedade herdada: não, mas veja a observação
abaixo
Valores percentuais: N/a
Esta propriedade indica quais efeitos são aplicados ao texto de um elemento. Se o elemento não possui texto (tal como 'IMG') ou se é um elemento vazio (tal como '<EM></EM>'), esta propriedade não produz efeito algum. Um valor 'blink' faz o texto piscar.
As cores usadas na aplicação dos efeitos são retiradas da propriedade 'color'.
Esta propriedade não é herdada, mas os elementos devem obedecer ao padrão de seus pais. Ou seja, se um elemento está subscrito esta característica deve passar para seus elementos subordinados. A cor usada no sublinhamento não irá mudar, mesmo que os elementos subordinados possuam valores diferentes para a propriedade 'color'.
A:link, A:visited, A:active { text-decoration: underline }
Neste exemplo, todos os links deverão ser sublinhados (ou seja, todos os elementos 'A' com atributo 'HREF' definido).
Os browsers devem reconhecer a palavra-chave 'blink', porém não estão obrigados a suportar este efeito.
vertical-align: baseline | sub | super | top | text-top | middle | bottom
| text-bottom | <percentage>
Valor padrão: baseline
Aplicável a: elementos internos
Propriedade herdada: não
Valores percentuais: referidos à 'line-height' do próprio elemento
Esta propriedade age sobre a posição vertical do elemento. Um conjunto de palavras chaves diz respeito às atribuições do elemento pai:
Um outro conjunto de valores são relativos à formatação da linha que contem o elemento:
O emprego dos valores 'top' e 'bottom' pode levar a situações insolúveis, nas quais surge um loop entre as interdependências dos elementos.
Os valores percentuais são referidos em relação ao valor da propriedade 'line-height' do próprio elemento (não do elemento pai). Eles colocam a parte inferior do elemento acima da parte inferior do elemento pai, usando o valor especificado para determinar o quanto de elevação aplicar. São aceitos valores negativos. Ou seja, um valor '-100%' irá descer a parte inferior do elemento até encontrar a parte correspondente do próximo elemento. Esta propriedade permite o controle preciso da posição vertical dos elementos (tais como imagens de letras usadas no lugar das próprias letras).
text-transform: capitalize | uppercase | lowercase | none
Valor padrão: none
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: N/a
H1 { text-transform: uppercase }
Este exemplo irá escrever todo o elemento 'H1' em letras maiúsculas.
Núcleo CSS1: browsers podem ignorar a propriedade 'text-transform' (isto é, tratá-la como se fosse 'none') nos casos de caracteres que não façam parte do conjunto de caracteres definidos em Latin-1. O mesmo pode ocorrer para idiomas nos quais a transformação não esteja definida na tabela de conversão Unicode [8].
text-align: left | right | center | justify
Valor padrão: depende de cada browser
Aplicável a: elementos a nível de bloco
Propriedade herdada: sim
Valores percentuais: N/a
Esta propriedade descreve como o texto é alinhado dentro do elemento. O algoritmo de alinhamento a ser empregado varia em função do browser usado e do idioma empregado.
DIV.center { text-align: center }
Como esta propriedade é herdada, todo elemento a nível de bloco que esteja dentro do elemento 'DIV' que possua a classe 'center' ('CLASS=center') será centralizado. Note que os alinhamentos dependem da largura do elemento, não da largura do ambiente de exibição. Se o valor 'justify' não é suportado pelo browser, este irá substituí-lo, normalmente, por 'left' para os idiomas ocidentais.
Núcleo CSS1: Os browsers podem tratar 'justify' tanto como sendo 'left' como 'right', dependendo do direção de escrita do texto ser da 'esquerda para a direita' ou da 'direita para a esquerda', respectivamente.
text-indent: <length> | <percentage>
Valor padrão: 0
Aplicável a: elementos a nível de bloco
Propriedade herdada: sim
Valores percentuais: referentes à largura do elemento pai
Esta propriedade define o tamanho da indentação (deslocamento para a direita) a ser inserido antes da primeira linha formatada. O valor pode ser negativo, mas deve obedecer aos limites impostos por cada browser. Uma indentação não é inserida no meio de um elemento que tenha sido dividido por outro (como o 'BR' no HTML).
Exemplo:
P { text-indent: 3em }
line-height: normal | <number> | <length> | <percentage>
Valor padrão: normal
Aplicável a: todos os elementos
Propriedade herdada: sim
Valores percentuais: referentes ao tamanho da fonte do próprio elemento
Esta propriedade define a distância entre as bases de duas linhas adjacentes.
Quando um valor numérico é especificado, a altura da linha é obtida multiplicando este valor numérico pelo tamanho da fonte. Isto difere de um valor percentual no modo como eles são herdados: com o valor numérico especificado, os elementos subordinados herdam o próprio fator, e não o valor resultante (como é o caso com unidades de percentagem e outras unidades).
Não são permitidos valores negativos.
Como exemplo, as três atribuições a seguir produzem o mesmo resultado.
DIV { line-height: 1.2; font-size: 10pt } /* número */
DIV { line-height: 1.2em; font-size: 10pt } /* tamanho */
DIV { line-height: 120%; font-size: 10pt } /* percentagem */
Um valor 'normal' ajusta a altura da linha para um valor compatível com a fonte que está sendo usada. É recomendado que os browsers usem para o valor 'normal' um número entre 1 e 1,2.
Estas propriedades definem o tamanho e a posição das áreas retangulares que representam os elementos. Veja em modelo de formatação exemplos de como utilizar estas propriedades.
Das propriedades que definem as margens dos elementos, a 'margin' atua simultaneamente sobre todos os lados do elemento considerado, enquanto que as demais propriedades, também relacionadas com as margens, atuam somente na margem especificada.
As propriedades de espaçamento ('padding') indicam quanto espaço colocar entre as bordas do elemento e seu conteúdo (seja ele texto ou imagem). A propriedade 'padding' atua sobre os quatro lados do elemento, ao passo que as demais propriedades de espaçamento agem apenas sobre o lado especificado.
Cada elemento possui quatro bordas, uma de cada lado, que são definidas por três parâmetros: seu comprimento, sua cor e seu estilo.
As propriedades 'width' e 'height' agem sobre o tamanho do retângulo que define o elemento, e as propriedades 'float' e 'clear' podem alterar a sua posição.
margin-top: <length> | <percentage> | auto
Valor padrão: 0
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a margem superior de um elemento:
H1 { margin-top: 2em }
Valores negativos são permitidos, mas estão restritos aos limites especificados por cada browser.
margin-right: <length> | <percentage> | auto
Valor padrão: 0
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a margem direita de um elemento:
H1 { margin-right: 12.3% }
Valores negativos são permitidos, mas estão restritos aos limites especificados por cada browser.
margin-bottom: <length> | <percentage> | auto
Valor padrão: 0
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a margem inferior do elemento:
H1 { margin-bottom: 3px }
Valores negativos são permitidos, mas estão restritos aos limites especificados por cada browser.
margin-left: <length> | <percentage> | auto
Valor padrão: 0
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a margem esquerda do elemento:
H1 { margin-left: 2em }
Valores negativos são permitidos, mas estão restritos aos limites especificados por cada browser.
margin-left: [ <length> | <percentage> | auto ]{1,4}
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade é um atalho para definir as quatro outras propriedades em um único lugar da folha de estilo.
Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens. Se existem dois ou três valores, eles serão tomados na mesma ordem acima, e o(s) valor(es) ausente(s) será(ão) igual(is) ao do(s) lado(s) oposto(s).
BODY { margin: 2em } /* todas definidas em 2em */
BODY { margin: 1em 2em } /* topo e inferior = 1em, direita e esquerda = 2em */
BODY { margin: 1em 2em 3em } /* topo=1em, direita=2em, inferior=3em, esquerda=2em */
A última atribuição do exemplo acima é equivalente a:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* feita igual à margem oposta (direita) */
}
São permitidos valores negativos, mas eles estão sujeitos aos limites impostos por cada browser.
padding-top: <length> | <percentage>
Valor padrão: 0
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a área superior de espaçamento.
BLOCKQUOTE { padding-top: 0.3em }
Valores negativos não são admitidos.
padding-right: <length> | <percentage>
Valor padrão: 0
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a área direita de espaçamento.
BLOCKQUOTE { padding-right: 10px }
Valores negativos não são admitidos.
padding-bottom: <length> | <percentage>
Valor padrão: 0
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a área inferior de espaçamento.
BLOCKQUOTE { padding-bottom: 2em }
Valores negativos não são admitidos.
padding-left: <length> | <percentage>
Valor padrão: 0
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade define a área esquerda de espaçamento.
BLOCKQUOTE { padding-bottom: 20% }
Valores negativos não são admitidos.
padding: [ <length> | <percentage> ]{1,4}
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade é um atalho para a definição das outras quatro propriedades de espaçamento em um único local da folha de estilo.
Com a definição de quatro valores, eles são aplicados, respectivamente, às áreas superior, direita, inferior e esquerda. Se apenas um valor for indicado, ele será usado para as quatro áreas. Se forem fornecidos dois ou três valores, eles serão tomados na mesma ordem acima, e o(s) valor(es) ausente(s) será(ão) igual(is) ao do(s) lado(s) oposto(s).
O padrão de fundo das áreas de espaçamento é definido pela propriedade 'background'.
H1 {
background: white;
padding: 1em 2em;
}
Este exemplo define os espaçamentos verticais (superior e inferior) em '1em', e os horizontais (direito e esquerdo) em '2em'. A unidade 'em' é relativa ao tamanho do elemento fonte: '1em' é igual ao tamanho da fonte em uso.
Não são admitidos valores negativos.
border-top-width: thin | medium | thick | <length>
Valor padrão: medium
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade define a espessura da margem do topo de um elemento. Os valores correspondentes a cada palavra-chave são dependentes do browser usado, mas a correspondência a seguir deve ser obedecida: 'thin' <= 'medium' <= 'thick'.
A espessura definida por esta propriedade é mantida ao longo do documento:
H1 { border: solid thick red }
P { border: solid thick blue }
Neste exemplo, 'H1' e 'P' terão a mesma espessura, independente do tamanho da fonte usada em cada um. Para definir valores relativos, deve ser usada a unidade 'em':
H1 { border: solid 0.5em }
Valores negativos não são aceitos.
border-right-width: thin | medium | thick | <length>
Valor padrão: medium
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade define a espessura da borda direita, sendo equivalente a 'border-top-width'.
border-bottom-width: thin | medium | thick | <length>
Valor padrão: medium
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade define a espessura da borda inferior, sendo equivalente a 'border-top-width'.
border-left-width: thin | medium | thick | <length>
Valor padrão: medium
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade define a espessura da borda esquerda, sendo equivalente a 'border-top-width'.
border-width: thin | medium | thick | <length>
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade é um atalho para definir as quatro propriedades anteriores em um mesmo local da folha de estilos.
Podem ser especificados de um a quatro valores, segundo o indicado a seguir:
H1 { border-width: thin } /* fina fina fina fina */
H1 { border-width: thin thick } /* fina espessa fina espessa */
H1 { border-width: thin thick medium } /* fina espessa média fina */
H1 { border-width: thin thick medium thin } /* fina espessa média fina */
Valores negativos não são permitidos.
border-color: <color>{1,4}
Valor padrão: o valor definido para a propriedade 'color'
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedades define a cor das quatro bordas, podendo serem definidos de um a quatro valores, correspondentes aos mesmos lados da propriedade 'border-width'.
Se nenhuma cor for definida, será usada a cor da propriedade 'color'.
P {
color: black;
background: white;
border: solid;
}
Neste exemplo, a borda será uma linha sólida preta.
border-style: none | dotted | dashed | solid | double | groove | ridge |
inset | outset
Valor padrão: none
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade define o estilo das quatro bordas de um elemento. Até quatro valores podem ser definidos, sendo aplicados seguindo a mesma regra mostrada para a propriedade 'border-width'.
#xy34 { border-style: solid dotted }
Neste exemplo, as bordas horizontais serão linhas sólidas ('solid') e as verticais serão linhas pontilhadas ('dotted').
Como o valor padrão é 'none', as bordas não terão estilos caso esta propriedade não seja especificada.
Os estilos correspondem à:
Núcleo CSS1: os browsers podem interpretar como 'solid' as propriedades 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' e 'outset'.
border-top: <border-top-width> || <border-style> || <color>
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade é um atalho para definir a espessura, a cor e o estilo associados a borda superior de um elemento em um mesmo lugar.
H1 { border-top: thick solid red }
Este exemplo define as características da borda superior do elemento 'H1'. Caso alguma característica deixe de ser especificada, será adotado seu valor padrão.
H1 { border-top: thick solid }
Como a cor não foi especificada no exemplo acima, será usada a mesma cor definida para o próprio elemento com a propriedade 'color'.
Note que enquanto a propriedade 'border-style' aceita até quatro valores, esta propriedade aceita apenas um valor de estilo.
border-right: <border-right-width> || <border-style> || <color>
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade refere-se à borda direita, e é similar à 'border-top'.
border-bottom: <border-bottom-width> || <border-style> || <color>
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade refere-se à borda inferior, e é similar à 'border-top'.
border-left: <border-left-width> || <border-style> || <color>
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade refere-se à borda esquerda, e é similar à 'border-top'.
border: <border-width> || <border-style> || <color>
Valor padrão: não definido
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade é um atalho para definir a mesma espessura, a mesma cor e o mesmo estilo para as quatro bordas em um único local da folha de estilo. Por exemplo, a primeira atribuição abaixo é equivalente às outras quatro:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Ao contrário dos atalhos das propriedades 'margin' e 'padding', esta propriedade não permite indicar valores distintos para as bordas.
Como a especificação das propriedades podem sobrepor características uma das outras, é muito importante prestar atenção na forma como elas são definidas dentro da folha de estilos. Veja este exemplo:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
Neste exemplo, a cor da borda esquerda será preta, enquanto que as demais serão vermelhas. Isto ocorre porque 'border-left' define o estilo e também a cor.
Note que enquanto 'border-width' aceita até quatro valores para a espessura, esta propriedade permite a indicação de apenas um.
width: <length> | <percentage> | auto
Valor padrão: auto
Aplicável a: elementos a nível de bloco e substituídos
Propriedade herdada: não
Valores percentuais: referentes ao elemento pai
Esta propriedade pode ser usada com elementos de texto, mas é mais útil com elementos substituídos, tais como as figuras. O elemento será redimensionado para atender ao valor especificado. Caso a propriedade 'height' esteja especificada como 'auto', o redimensionamento será proporcional (sem deformação).
IMG.icon { width: 100px }
Se tanto a propriedade 'width' como a 'height' forem especificadas como 'auto', o elemento terá suas dimensões originais.
Não são aceitos valores negativos.
Veja modelo de formatação para uma descrição sobre o relacionamento entre esta propriedade com as margens e áreas de espaçamento ('padding').
height: <length> | auto
Valor padrão: auto
Aplicável a: elementos a nível de bloco e substituídos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade diz respeito à altura do elemento, sendo similar à 'width'.
Núcleo CSS1: os browsers podem ignorar esta propriedade (ou seja, tratá-la como 'auto') quando o elemento considerado não é um elemento substituído.
float: left | right | none
Valor padrão: none
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Com o valor 'none', esta propriedade faz o elemento ser mostrado onde ele aparece dentro do texto. Com o valor 'left' o elemento será movido para a esquerda e o texto será disposto do seu lado direito. O similar ocorre com o valor 'right'. Em qualquer caso, o elemento será tratado como sendo a nível de bloco. Veja em elementos flutuantes uma descrição completa deste processo.
IMG.icon {
float: left;
margin-left: 0;
}
Este exemplo coloca todos os elementos 'IMG' com 'CLASS=icon' alinhados ao lado esquerdo do seu elemento pai.
clear: none | left | right | both
Valor padrão: none
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade indica se um elemento permite a existência de elementos flutuantes ao seu redor. Mais especificamente, o valor desta propriedade indica os lados que não aceitam elementos flutuantes.
Um valor 'left' coloca o elemento abaixo de qualquer elemento flutuante que exista no seu lado esquerdo. O valor 'none' permite elementos flutuantes em todos os lados. Exemplo:
H1 { clear: left }
Estas propriedades classificam elementos em mais categorias que as normalmente usadas em HTML.
A propriedade 'list-style' descreve como os itens de uma lista são formatados. Ela pode ser usada em qualquer elemento, e será herdada pelos elementos das hierarquias inferiores da lista. Entretanto, terá efeito apenas em elementos com a propriedade 'display' definida como 'list-item'. Em HTML é o que acontece com o elemento 'LI'.
display: block | inline | list-item | none
Valor padrão: block
Aplicável a: todos os elementos
Propriedade herdada: não
Valores percentuais: N/a
Esta propriedade define se o elemento será ou não mostrado, e como será visualizado no ambiente de exibição (que pode ser uma impressora, um monitor, etc).
Um valor 'block' coloca o elemento em uma nova área de exibição (um retângulo que contem o elemento). Este retângulo será posicionado de acordo com o descrito em modelo de formatação. Normalmente, os elementos tipo 'H1' e 'P' são elementos a nível de bloco. O valor 'list-item' produz efeito similar à 'block', exceto pelo fato de ser adicionado um marcador de lista. Em HTML, 'LI' é um exemplo deste caso.
O valor 'inline' resulta em um novo retângulo interno à linha de exibição do elemento. Este retângulo é formatado de acordo com o seu conteúdo. Caso seja texto ele poderá ocupar várias linhas, sendo criado um retângulo para cada linha. As propriedades das margens, bordas e áreas de espaçamento são aplicáveis ao elemento interno, mas não terão qualquer efeito nas quebras de linha.
Já o valor 'none' desativa a exibição do elemento, inclusive dos seus elementos filhos.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
Esta última atribuição desligada a exibição de imagens.
O valor inicial da propriedade 'display' é 'block', mas os browsers normalmente possuem valores padrões para todos os elementos HTML que seguem o processo sugerido na especificação HTML [2].
Núcleo CSS1: os browsers podem ignorar a propriedade 'display' e usar apenas os seus valores padrões internos. Veja normas de conformidade CSS1.
white-space: normal | pre | nowrap
Valor padrão: normal
Aplicável a: elementos a nível de bloco
Propriedade herdada: sim
Valores percentuais: N/a
Esta propriedade determina como os espaços em branco são tratados dentro de um elemento: pela maneira 'normal' (são agrupados em um único espaço), pela mesma forma do elemento 'PRE' (respeitando todos os espaços individualmente) ou pela forma 'nowrap' (onde a mudança de linha na área de exibição ocorre apenas com o elemento 'BR').
PRE { white-space: pre }
P { white-space: normal }
Embora o valor padrão desta propriedade seja 'normal', os browsers normalmente possuem valores padrões para todos os elementos HTML conforme o sugerido na especificação HTML [2].
Núcleo CSS1. Os browsers podem ignorar a propriedade 'white-space' e usar seus padrões internos.
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman
| lower-alpha | upper-alpha | none
Valor padrão: disc
Aplicável a: elementos com valor 'list-item' na propriedade
'display'
Propriedade herdada: sim
Valores percentuais: N/a
Esta propriedade define a aparência do marcador de lista quando a propriedade 'list-style-image' for 'none' ou se a imagem indicada pelo URL não estiver disponível.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
list-style-image: <url> | none
Valor padrão: none
Aplicável a: elementos com valor 'list-item' na propriedade
'display'
Propriedade herdada: sim
Valores percentuais: N/a
Esta propriedade define a imagem que será usada como um marcador de lista.
UL { list-style-image: url(http://png.com/ellipse.png) }
list-style-position: inside | outside
Valor padrão: outside
Aplicável a: elementos com valor 'list-item' na propriedade
'display'
Propriedade herdada: sim
Valores percentuais: N/a
Com esta propriedade é definida a maneira como o marcador de lista é posicionado em relação ao conteúdo da lista. Para um exemplo de formatação, veja formatação de elementos de lista.
list-style: [disc | circle | square | decimal | lower-roman | upper-roman
| lower-alpha | upper-alpha | none] || [inside | outside] || [<url> |
none]
Valor padrão: não definido
Aplicável a: elementos com valor 'list-item' na propriedade
'display'
Propriedade herdada: sim
Valores percentuais: N/a
Esta propriedade é um atalho para a definir as propriedades anteriores em um único local da folha de estilo.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
A definição de 'list-style' diretamente nos elementos 'LI' pode provocar resultados inesperados:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Como o grau de importância (como definido em ordem de encadeamento) é maior para a primeira atribuição deste exemplo, ela irá se sobrepor à segunda em todos os elementos 'LI', e será usado apenas o estilo 'lower-alpha'. Portanto, é aconselhável definir a propriedade 'list-style' somente em elementos marcados como 'list-item':
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
Neste exemplo, a herança irá transferir o 'list-style' dos elementos 'OL' e 'UL' para os elementos 'LI'.
Um endereço URL pode ser combinado com qualquer outro valor:
UL { list-style: url(http://png.com/ellipse.png) disc }
No exemplo acima, o valor 'disc' será usado quando a imagem não estiver disponível.
O formato de uma unidade de medida é constituído por um sinal positivo ou negativo opcional ('+' ou '-', sendo o padrão '+') seguido imediatamente por um número (com ou sem ponto decimal - não use vírgulas), com todo o conjunto imediatamente seguido por um identificador de unidade (um código com duas letras). Este identificador é opcional caso o número seja '0'.
Existem dois tipos de unidades de comprimento: as relativas e as absolutas. As relativas especificam um número em relação a algum outro. O uso de unidades relativas facilitam o redimensionamento da exibição do elemento quando ocorre mudança de mídia de exibição (por exemplo, de um monitor para uma impressora). O emprego de unidades percentuais (vistas a seguir) e palavras-chave (por exemplo, 'x-large') oferecem vantagens similares.
Estas unidades relativas são suportadas:
H1 { margin: 0.5em } /* ems, a altura do elemento fonte */
H1 { margin: 1ex } /* x-height, a altura da letra 'x' */
P { font-size: 12px } /* pixels */
As unidades relativas 'em' e 'ex' tomam como base o tamanho da fonte do próprio elemento. A única exceção a esta regra é a propriedade 'font-size', onde estas unidades são relativas ao tamanho da fonte do elemento pai.
A unidade 'px', pixel, usada no exemplo acima, é função da resolução da área de exibição, normalmente um monitor.
Os elementos filhos herdam os valores calculados, não os valores indicados:
BODY {
font-size: 12pt;
text-indent: 3em; /* ou seja, 36pt */
}
H1 { font-size: 15pt }
Neste exemplo, o valor de 'text-indent' de 'H1' é 36pt, não 45pt.
O emprego de valores absolutos é conveniente apenas quando as dimensões físicas da mídia de saída são bem conhecidas. As seguintes unidades são aceitas:
H1 { margin: 0.5in } /* polegadas, 1in = 2.54cm */
H2 { line-height: 3cm } /* centímetros */
H3 { word-spacing: 4mm } /* milímetros */
H4 { font-size: 12pt } /* pontos, 1pt = 1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt */
O formato de um valor percentual é composto de caracter de sinal (positivo ou negativo, '+' ou '-', sendo '+' o padrão) seguido imediatamente por um número (com ou sem ponto decimal, não use vírgulas) seguido, também imediatamente, pelo símbolo '%'.
Os valores percentuais sempre são relativos a algum outro valor, por exemplo, uma unidade de medida. Cada propriedade que permita o uso de unidades percentuais também define a qual valor esta unidade se refere. Muito freqüentemente é o tamanho da fonte do próprio elemento:
P { line-height: 120% } /* 120% do tamanho da fonte do elemento */
Em todas as propriedades herdadas na CSS1, se o valor for especificado como uma percentagem, então os elementos filhos herdarão o valor resultante, não o valor da percentagem.
Uma cor é indicada ou por uma palavra-chave ou por um código RGB.
As palavras chaves sugeridas para indicar cores são: 'aqua' , 'black' , 'fuchsia' , 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white' e 'yellow'. Estas 16 cores foram tiradas da paleta de cores VGA do Windows, e seus valores RGB são estão definidos nesta especificação.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
A codificação RGB é usada para a indicação de cores no formato numérico. Todas as atribuições a seguir indicam a mesma cor (vermelho):
EM { color: #F00 } /* #rgb */
EM { color: #FF0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* inteiro entre 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* percentual entre 0.0% - 100.0% */
O formato hexadecimal consiste do símbolo '#' seguido imediatamente por 3 ou 6 caracteres hexadecimais. A notação de 3 dígitos (#rgb) é convertida pelo browser para o formato de 6 dígitos (#rrggbb) pela duplicação de cada caracter, não pela inserção de zeros. Por exemplo, #FB0 torna-se #FFBB00. Isso garante que a cor branca (#FFFFFF) possa ser indicada com a notação simplificada (#FFF), além de remover qualquer dependência da profundidade de cores adotada pelo monitor em uso.
O formato de um valor RGB é 'rgb(' seguido três números separados por vírgulas. Quaisquer destes três números podem estar na faixa de 0-255, ou serem três valores percentuais entre 0% e 100%. Finalmente a notação é terminada por um ')'. São permitidos espaços em branco ao redor dos números.
Valores fora da faixa serão truncados. Desde modo, as três atribuições a seguir são equivalentes:
EM { color: rgb(255,0,0) } /* valor inteiro entre 0 - 255 */
EM { color: rgb(300,0,0) } /* truncado para (255,0,0) */
EM { color: rgb(110%, 0%, 0%) } /* truncado para (100%, 0%, 0%) */
As cores RGB estão especificadas no ambiente sRGB. Podem ocorrer variações entre os browsers na reprodução destas cores, mas o emprego deste ambiente fornece uma definição mensurável, não ambígua e objetiva, de como as cores devem ser geradas - de acordo com um padrão internacional.
Os browsers podem otimizar os recursos usados na produção das cores empregando o método de correção "gamma". sRGB especifica um padrão "gamma" de 2,2 a ser atendido sob condições bem definidas de visualização. Os browsers devem produzir as cores definidas nas folhas de estilos CSS, em um certo dispositivo de saída (monitor, por exemplo) de maneira tal que seja atingido este padrão 2,2 (mais detalhes sobre este assunto podem ser obtidos no Apêndice D. Todo este processo é aplicado apenas às cores indicadas pelas folhas de estilos CSS: as imagens coloridas são reproduzidas com base nas suas próprias informações internas de composição de cores.
Um URL é identificado pela notação:
BODY { background: url(http://www.bg.com/pinkish.gif) }
O formato de um valor URL é 'url(' seguido por espaços em branco opcionais seguidos por apóstrofe (') ou aspas duplas ("), também opcionais, seguidos pelo URL em si (conforme definido em [11]) seguido novamente por pelo apóstrofe ou aspas e espaços adicionais opcionais e terminado por ')'.
Parênteses, vírgulas, espaços, apóstrofes e aspas internos ao URL devem ser precedidos por uma barra invertida (\).
Um URL parcial é interpretado como relativo à localização da folha de estilos, não à localização do documento:
BODY { background: url(yellow) }
Um browser está de acordo com a especificação CSS1 se ele:
Um browser atende aos estilos CSS1 desta Especificação se ele:
Um browser que usa CSS1 para mostrar documentos e produz estilos conforme esta Especificação atende aos padrões de conformidade.
Um browser não precisa implementar todas as funções CSS1: basta atender ao núcleo das especificações. Este núcleo consiste desta Especificação inteira, exceto as partes explicitamente excluídas. Neste documento, estas partes estão identificadas com 'Núcleo CSS1' seguido pela explicação de quais funções podem ser excluídas. Este conjunto de funções excluídas é chamado de 'características avançadas'.
Esta seção apenas define as normas de conformidade com a CSS1. No futuro serão definidos outros níveis para a CSS, os quais poderão exigir dos browsers o atendimento de outras normas para estarem de acordo com estes novos níveis.
Podem existir restrições relacionadas à mídia de apresentação usada: recursos limitados (fontes e cores) e resoluções baixas (as margens podem não aparecer com precisão). Nestes casos o browser deverá usar valores aproximados aos definidos nas folhas de estilos. Diferentes interfaces também podem constituir exceções aceitáveis: um browser VRML pode redimensionar um documento com base na distância virtual do usuário.
Browser podem oferecer escolhas adicionais para leitura de um documento. Por exemplo, pode providenciar opções especiais para deficientes visuais, ou pode prever a opção de desabilitar a função 'blink' em um texto.
A CSS1 não especifica todos os aspectos da formatação. Por exemplo, o browser tem liberdade para implementar os algoritmos de espaçamento de letras.
Esta Especificação recomenda, mas não exige, que um browser:
As normas a seguir descrevem somente as funcionalidades, não a interface a ser adotada.
Esta Recomendação define a CSS nível 1. No futuro serão definidos outros níveis de CSS, com características adicionais. Para assegurar que o browsers compatíveis com CSS1 sejam capazes de entender folhas de estilos de níveis mais elevados, esta seção define o quê um browser deve fazer quando encontra construções que não são válidas em CSS1.
H1 { color: red; rotation: 70deg }
o browser deverá tratá-la como:
H1 { color: red; }IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top" não é permitido para 'float' */
IMG { background: "red" } /* palavras-chave não podem estar entre aspas */
IMG { border-width: 3 } /* falta especificar a unidade da medida */
Neste caso o browser deverá atender apenas à primeira atribuição e agir como se o estilo fosse:
IMG { float: left }
IMG { }
IMG { }
IMG { }@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 {color: blue}
A palavra-chave '@three-dee' não é válida dentro da CSS1. Portanto, toda a atribuição é ignorada (até, e incluindo, a terceira chave direita '}'). O estilo ficará reduzido a:
H1 {color: blue}Uma folha de estilos CSS, em qualquer versão, consiste de uma lista de comandos, podendo existir espaços em branco entre os comandos.
Freqüentemente os estilos estão embutidos nos documentos HTML, a para que eles não sejam vistos pelas versões anteriores de browsers, é conveniente colocá-los dentro de comentários HTML ("<!--" and "-->").
As regras (atribuições) chamadas "at-rules" iniciam-se com uma palavra chave precedida do símbolo '@' (exemplos: '@import', '@page'). Uma palavra chave consiste de letras, algarismos, barras e caracteres especiais (chamados 'escape') definidos mais adiante.
Uma atribuição "at-rule" consiste de tudo que está escrito desde a palavra chave até a ocorrência do primeiro ponto-e-vírgula (;) ou do próximo bloco de atribuição, o que vier primeiro. Um browser compatível com CSS1 (nível 1) que encontre uma atribuição "at-rule" que não seja '@import' ignora totalmente a atribuição encontrada e continua normalmente com as atribuições seguintes. Ele também deve ignorar qualquer atribuição '@import' que não esteja definida logo no início da folha de estilos - isto deve ocorrer mesmo que as atribuições que por ventura estejam antes tenham sido ignoradas. Eis um exemplo:
@import "subs.css";
H1 { color: blue }
@import "list.css";
A segunda ocorrência de '@import' é ilegal para o nível 1 da CSS, assim o browser deve ignorá-la e reduzir a definição do estilo para:
@import "subs.css";
H1 { color: blue }
Um bloco inicia-se com uma chave esquerda ('{') e termina com a chave direita ('}') que corresponde à chave de abertura (todas as chaves devem estar casadas, ou seja, a cada chave esquerda deve, obrigatoriamente, corresponder uma chave direita). Dentro do bloco podem existir quaisquer caracteres, desde que seja atendido o requisito de que todos os parênteses - ( ) -, colchetes - [ ] - e chaves - { } - estejam casados e aninhados. Apóstrofes ' e aspas " também devem ocorrer aos pares, e os caracteres contidos por eles são considerados como 'strings' (veja a definição de 'string' no Apêndice B. A seguir é mostrado o exemplo de um bloco; repare que a chave direita entre aspas não serve como par da chave de abertura do bloco; e que o segundo apóstrofe é um caracter de escape (ele está precedido pela barra invertida) e não atua como apóstrofe de casamento do de abertura:
{ causta: "}" + ({7} * '\'') }
Uma regra composta consiste de uma string definidora (chamada 'selector-string') seguida por uma atribuição em bloco. A string definidora abrange tudo até a primeira chave esquerda {), mas não a inclui. Uma regra composta que inicie com uma string definidora que não seja válida, dentro das normas CSS1, deve ser ignorada.
Por exemplo, um browser encontra esta definição de estilo:
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
A segunda linha contem um string definidora (P[align], UL ) que é ilegal dentro da CSS1. Portanto, o browser deve pular esta regra composta e reduzir o estilo a:
H1 { color: blue }
P EM { font-weight: bold }
As declarações podem ser agrupadas em blocos, os quais começam com uma chave esquerda { e terminam com a chave direita } correspondente. Entre estas chaves estão as declarações, separadas entre si por ponto-e-vírgulas (;).
Uma declaração consiste do nome de uma propriedade seguido por dois-pontos (:) e do seu valor. Pode haver espaços em branco ao redor destas entidades (nome, dois-pontos e valor). Os nomes das propriedades já foram definidos nos tópicos anteriores deste documento. O valor pode consistir de qualquer caracter, porém parênteses (( )), chaves ({ }), colchetes ([ ]), apóstrofe (') e aspas (") devem aparecer sempre aos pares. Os parênteses, colchetes e chaves podem estar aninhados. Os caracteres delimitados por apóstrofes são considerados 'strings'.
Para que no futuro possam ser definidas novas propriedades e valores, os browsers devem ignorar uma propriedade com uma declaração ou valor inválido. Cada propriedade na CSS1 possui suas próprias restrições quando à sintaxe e semântica aceitas para seus valores.
Como exemplo, suponha que um browser encontre este estilo:
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
A segunda declaração da primeira linha possui um valor inválido: 12pt. A segunda declaração da segunda linha refere-se a uma propriedade não definida: font-vendor. Com isso, o browser deve ignorar estas propriedades e entender o estilo como:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Os comentários podem ser inseridos em qualquer local onde possa existir um espaço em branco; eles serão tratados como espaço em branco. A CSS1 define locais adicionais nos quais espaços podem ocorrer (tal como dentro da atribuição de valores); os comentários também podem ser inseridos nestes locais.
As normas a seguir sempre devem ser atendidas:
O atributo "class" usado no HTML permite o uso de mais caracteres para definir seu nome que os permitidos na CSS1. Em CSS1, estes caracteres devem fazer parte de uma seqüência ESC ou então serem definidos pelos seus códigos numéricos Unicode. Exemplo:"B&W?" pode ser escrito como "B\&W\?" ou "B\26W\3F".É esperado que nas novas versões da CSS1 mais caracteres possam ser escritos diretamente.
No Apêndice B é dada a gramática usada na CSS1.
Todos os documentos estão em inglês.
[1] W3C Folhas de estilos na WEB - página de referência do W3C (http://www.w3.org/Style)
[2] "HTML 4.0 Specification" (Especificação HTML 4.0), D. Raggett, A. Le Hors, I. Jacobs, Dezembro 1997. Disponível em http://www.w3.org/TR/REC-html40/.
[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0" ( HTML 2.0), RFC 1866, MIT/W3C, Novembro 1995. Também está disponível no formato HTML (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)
[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the Hypertext Markup Language (Internacionalização da HTML (Hypertext Markup Language)" (ftp://ds.internic.net/rfc/rfc2070.txt).
[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML) (Processamento de Informações - Sistemas de Texto e Escritório - SGML (Standard Generalized Markup Language)
[6] ISO/IEC 10179:1996 Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL) (Tecnologia da Informação - Linguagens de Processamento - DSSSL (Document Style Semantics and Specification Language)
[7] ISO/IEC 9899:1990 Programming languages -- C (Linguagens de Programação - C)
[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0" (Padrão Unicode - Codificação Mundial de Caracteres - Versão 1.0), Addison-Wesley, Volume 1, 1991, Volume 2, 1992
[9] "A Standard Default color Space for the Internet" (Um Ambiente de Cores Padrão Para a Internet), versão 1.10, M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta, 5 Novembro 1996
[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition" (Colorimetria, Segunda Edição), ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738 (Endereçamento URL), CERN, Xerox Corporation, University of Minnesota, Dezembro 1994
[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification" (Especificação PNG - Portable Network Graphics, versão 1.0) (http://www.w3.org/TR/REC-png-multi.html)
[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform" (Correção Gamma na Plataforma Macintosh) (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format Specification, version 3.2" (ICC - Especificação de Formato, versão 3.2), 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
Desde o início da HTML, surgiram várias propostas de folhas de estilos que influenciaram este documento. Dentre elas, merecem menção as propostas de Robert Raisch, Joe English e Pei Wei.
Várias pessoas contribuíram no desenvolvimento da CSS1. Gostaríamos de agradecer especialmente a: Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood and Stephen Zilles.
três pessoal merecem menção especial: Dave Raggett (pelo seu encorajamento e trabalho em HTML3), Chris Lilley (por sua contribuição contínua, especialmente nas áreas de cores e fontes) e Steven Pemberton (por seu poder criativo e organizacional).
(Este apêndice é informativo, não normativo)
A seguinte folha de estilo está escrita conforme a formatação sugerida na especificação HTML 2.0 [3]. Recomenda-se que um estilo similar a este seja empregado como estilo padrão pelos browsers.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* relativo ao elemento pai */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* formatação simples */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* também poderia ser usada 'border-bottom' */
A:link { color: blue } /* link não visitado */
A:visited { color: red } /* link visitado */
A:active { color: lime } /* link ativo */
/* o ajuste das bordas de uma imagem que atua como link
requer seletores contextuais */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(Este apêndice é normativo)
A gramática mínima da CSS (de qualquer nível) que todos devem atender está definida no tópico normas de conformidade. A gramática indicada a seguir define uma linguagem muito menor, a sintaxe da CSS1.
Num certo sentido, entretanto, ela extrapola a sintaxe básica da CSS1: existem restrições adicionais de semântica não expressas nesta gramática. Um browser que esteja em conformidade com a CSS1 também deve atender às regras de compatibilidade futura, a notação das propriedades e seus valores e a notação das unidades. Adicionalmente, a HTML impõe outras restrições, tais como nos valores aceitos no atributo 'CLASS'.
A gramática a seguir é LL(1) (mas note que muitos browsers poderiam não segui-la diretamente, uma vez que ela não expressa as convenções de renderização dos documentos, apenas a sintaxe CSS1). O formato produzido é otimizado para entendimento humano e são empregadas algumas notações abreviadas segundo YACC [15]:
* : 0 ou mais + : 1 ou mais ? : 0 ou 1 | : separa alternativas [] : grupamento
De tudo isto resulta:
stylesheet
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
;
import
: IMPORT_SYM [STRING|URL] ';' /* ou seja, @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
operator
: '/' | ',' | /* vazio */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
| solitary_pseudo_element
;
/* Um "id" é um ID que está associado ao tipo de elemento
** indicado à sua esquerda, como em: P#p007
** Um "solitary_id" é um ID que não está associado,
** como em: #p007
** O mesmo vale para classes e pseudo-classes.
*/
simple_selector
: element_name id? class? pseudo_class? /* ou seja: H1.subject */
| solitary_id class? pseudo_class? /* ou seja: #xyz33 */
| solitary_class pseudo_class? /* ou seja: .author */
| solitary_pseudo_class /* ou seja: :link */
;
element_name
: IDENT
;
pseudo_class /* como em: A:link */
: LINK_PSCLASS_AFTER_IDENT
| VISITED_PSCLASS_AFTER_IDENT
| ACTIVE_PSCLASS_AFTER_IDENT
;
solitary_pseudo_class /* como em: :link */
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class /* como em: P.note */
: CLASS_AFTER_IDENT
;
solitary_class /* como em: .note */
: CLASS
;
pseudo_element /* como em: P:first-line */
: FIRST_LETTER_AFTER_IDENT
| FIRST_LINE_AFTER_IDENT
;
solitary_pseudo_element /* como em: :first-line */
: FIRST_LETTER
| FIRST_LINE
;
/* Existe uma restrição em "id" e "solitary_id" que obriga
** a parte posterior ao sinal "#" ser uma valor de ID
** válido na HTML. Ou seja, "#x77" está certo, mas "#77" não.
*/
id
: HASH_AFTER_IDENT
;
solitary_id
: HASH
;
declaration
: property ':' expr prio?
| /* empty */ /* Previne erros de sintaxe... */
;
prio
: IMPORTANT_SYM /* !important */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | hexcolor | URL | RGB ]
;
/* Uma restrição em relação a 'color' determina que
** deve haver ou 3 ou 6 dígitos hexadecimais depois
** do sinal "#". Ou seja, "#000" é aceito,
** mas "#0000" não.
*/
hexcolor
: HASH | HASH_AFTER_IDENT
;
A seguir está a conversão simbólica dos padrões usados, escrita na notação flex, assumindo uma implementação da flex em 8 bits. Os símbolos não são sensíveis à capitalização das letras (linhas de comando flex com opção '-i').
unicode \\[0-9a-f]{1,4}
latin1 [¡-ÿ]
escape {unicode}|\\[ -~¡-ÿ]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) |
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* ignore whitespace */}
\n {BEGIN(0); /* ignore whitespace */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
Este apêndice é informativo, não normativo.
Os documentos HTML podem conter cerca de 30.000 caracteres diferentes, definidos pela Unicode. A grande maioria dos documentos requerem apenas umas poucas centenas. Muitos conjuntos de fontes também contem apenas umas poucas centenas de símbolos. Junto com o tópico propriedades das fontes, este apêndice explica como é feito o casamento entre os caracteres do documento e o conjunto de símbolos definidos numa fonte.
O conteúdo de um documento HTML é uma seqüência de caracteres e marcações de texto. Para que seja transmitida, esta seqüência é codificada como uma seqüência de bytes, usando um dos vários métodos de codificação possíveis. Depois de transmitido, o documento HTML deve ser decodificado para que os caracteres sejam reconstituídos. Por exemplo, na Europa Ocidental (e no Brasil) o byte 224 é usado para codificar o caracter à, mas em hebreu, é mais comum usar o byte 224 para representar um Aleph. Em japonês, o significado de um byte normalmente depende dos bytes que o precedem. Em alguns dos métodos de codificação disponíveis, um único caracter é codificado usando dois bytes (ou até mais).
O browser descobre como decodificar os bytes olhando o valor do parâmetro charset no cabeçalho HTTP. As codificações (valores de 'charset') mais comuns são ASCII (para inglês), ISO-8859-1 (para Europa Ocidental - e Brasil), ISO-8859-8 (para hebreu) e Shift-JIS (para japonês).
A HTML (veja as referências [2] e [4]) aceita cerca de 30.000 caracteres diferentes, aqueles definidos pela Unicode. Raríssimos documentos irão usar tantos caracteres. A escolha da codificação correta faz com que o documento precise apenas de um byte para representar cada caracter. Mesmo os caracteres que não estejam definidos diretamente dentro da codificação escolhida podem ser inseridos no documento, basta usar seu código numérico: o código 'Π' sempre está associado à letra grega Pi maiúscula (Π), não importa qual seja a codificação definida no cabeçalho HTTP do documento. Isto faz com que o browser esteja preparado para representar qualquer caracter Unicode.
Uma fonte não contem caracteres, ela contem imagens de caracteres, conhecidas como glyphs. As 'glyphs', na forma escalar ou bitmap, constituem um representação particular do caracter. Seja explícita ou implicitamente, cada fonte possui uma tabela associada, a tabela de codificação da fonte, que relaciona cada 'glyph' com o caracter representado por ela. Nas fontes ditas do Tipo 1 ('Type 1'), a tabela é referenciada como sendo uma codificação vetorial.
Na verdade, muitas fontes contem várias 'glyphs' associadas a um mesmo caracter. A decisão de qual destas 'glyphs' usar depende das regras da linguagem ou da preferência do projetista.
Em árabe, por exemplo, todas as letras possuem quatro formatos diferentes, empregados em função do lugar onde a letra está inserida: no início, no meio ou no fim de uma palavra, ou então isoladamente. É o mesmo caracter em todos os casos, e portanto existe apenas uma representação para ele dentro do documento HTML, mas quando visualizado, ele aparecerá diferente a cada vez.
Também existem fontes que permitem ao projetista gráfico escolher qual usar dentre as várias alternativas de representação. Infelizmente, a CSS1 não fornece meios de selecionar estas alternativas: sempre é usado o formato padrão (default) destas fontes.
Para lidar com o problema de uma única fonte não ser suficiente para representar todos os caracteres em um documento, ou mesmo em um único elemento, a CSS1 permite o emprego de coleções de fontes.
Uma coleção de fontes em CSS1 é uma lista de fontes, todas do mesmo estilo e tamanho, que são verificadas em seqüência para ver se uma delas possui uma 'glyph' para um dado caracter. Um elemento que contenha texto em inglês junto com símbolos matemáticos pode precisar de uma coleção de duas fontes, uma contendo letras e dígitos, e outra contendo símbolos matemáticos. Veja o tópico propriedades das fontes para uma descrição detalhada do mecanismo de seleção.
Aqui está um exemplo de uma coleção de fontes adequada para um texto que contem caracteres latinos, japoneses e símbolos matemáticos:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
Os caracteres latinos são retirados da fonte Baskerville (uma fonte que contem apenas caracteres latinos), enquanto os caracteres japoneses são tomados da fonte Mincho, e os símbolos matemáticos vêem da fonte Symbol. Qualquer outro caracter é extraído da fonte genérica 'serif' (esta fonte também é usada quando uma ou mais das outras fontes não está disponível).
Este apêndice é informativo, não normativo.
Veja o tópico Tutorial Gamma da especificação PNG (referência [12]) se você não estiver familiarizado com 'gamma'.
Quando os browsers montam um documento para ser visualizado em um monitor, eles podem assumir o uso de um monitor ideal e desprezar qualquer efeito na aparência causado pela diterização dos pontos. Isto significa que o trabalho mínimo que eles precisam executar nas várias plataformas é:
"Aplicar gamma" significa que cada um dos três valores (R, G e B) devem ser convertidos para R'=Rgamma, G'=Ggamma, B'=Bgamma antes de serem tratados pelo sistema operacional.
Isto pode ser feito rapidamente pela construção de uma tabela de consulta acessada uma vez para cada necessidade do browser, evitando a necessidade de cálculos matemáticos transcendentais para cada atributo colorido:
for i := 0 to 255 do raw := i / 255; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
Este apêndice é informativo, não normativo.
O objetivo da equipe CSS1 tem sido criar um mecanismo simples para adicionar estilos aos documentos HTML. Esta especificação é resultado de um equilíbrio entre a simplicidade necessária para definir estilos na web e as pressões dos autores de documentos HTML para obter um controle maior sobre os efeitos visuais. A CSS1 oferece:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
com esta definição de estilo:
H1 { font-style: small-caps }
<H1>Headline</H1>A CSS1 não oferece:
Nós esperamos ver a CSS1 expandindo-se para várias direções:
Nós não esperamos que CSS se envolva com:
Este apêndice é informativo, não normativo.
Este documento é uma revisão da Recomendação CSS1, publicada em 17 de Dezembro de 1996.
Gostaríamos de agradecer a Komachi Yushi, Steve Byrne, Lim Quinn, Kazuteru Okahashi, Susan Lesch, e Tantek Çelik por sua ajuda na preparação desta versão revisada.
NOTA DO TRADUTOR: No documento original, em inglês, a seguir estão relacionas todas as alterações e erratas feitas em relação à versão de 1996, a qual não foi traduzida para o português. Como todas estas alterações já estão embutidas nesta tradução, não estou reproduzindo-as.