| Versão original: Style sheets | Traduzido por: De Sena Viegas |
Conteúdos
As folhas de estilo representam um dos maiores avanços para os desenhadores das páginas Web, aumentando a sua habilidade no melhoramento da aparência das suas páginas. No ambientes científicos em que se concebeu a Web, as pessoas estavam mais preocupadas com o conteúdo do que propriamente com a sua apresentação. À medida que pessoas dos mais distintos meios iam descobrindo a Web, as limitações do HTML tornavam-se um motivo de constante frustração, tendo os autores sido forçados a ultrapassar as referidas limitações estilísticas. Se bem que as intenções fossem boas – ou seja, melhorar a apresentação das páginas Web -- as técnicas para o conseguir tiveram infelizmente efeitos colaterais. Essas técnicas funcionam por vezes para algumas pessoas, mas não para todas e a tempo inteiro. Elas incluem:
Essas técnicas aumentam consideravelmente a complexidade das páginas Web, oferecem uma flexibilidade limitada, padecem de problemas de interoperacionalidade e criam problemas a pessoas com incapacidades.
As folhas de estilo resolvem esses problemas, ao mesmo tempo que superam o leque limitado dos mecanismos de apresentação em HTML. As folhas de estilo tornam mais fácil especificar a quantidade de espaços em branco entre as linhas do texto, a quantidade de linhas que estão alinhadas de uma forma especial, as cores usadas no texto e os planos de fundo, o tamanho da fonte e o estilo, bem como uma enorme variedade de outros detalhes.
Por exemplo, a folha de estilo CSS que se segue (armazenada no ficheiro “special.css”), define a cor do texto de um parágrafo como sendo verde e rodeia-o com uma margem a vermelho:
P.special {
color : green;
border: solid red;
}
Os autores podem ligar esta folha de estilo ao documento-fonte HTML através do elemento LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">Este parágrafo deverá ter um texto escrito a verde.
</BODY>
</HTML>
O HTML 4 fornece suporte às seguintes propriedades das folhas de estilo:
As folhas de estilo, pelo contrário, aplicam-se a meios ou grupos de meios específicos. Ima folha de estilo que se pretenda usar no ecrã poderá ser aplicável aquando se tiver que imprimir um documento, mas não tem grande utilidade nos navegadores baseados na voz. Esta especificação permite-lhe definir as vastas categorias dos meios à qual uma folha de estilo se aplica. Isto permitirá aos agentes evitar retirar as folhas de estilo inapropriadas. As linguagens das folhas de estilo incluem propriedades que permitem descrever as dependências dos meios dentro dos mesmos.
A actual proposta endereça essas questões, permitindo aos autores incluir instruções relativas à sua exibição A informação a ser exibidas estará dessa forma sempre disponível, sempre que o autor quiser exibir cada um dos elementos.
Em muitos dos casos, os autores poderão tirar vantagem de uma folha de estilo comum a um grupo de documentos. Neste caso, a distribuição de regras de estilo ao longo do documento levará a uma pior performance do que o uso de uma folha de estilo „linkada“, uma vez que a para a maioria dos documentos, a folha de estilo já estará presente na memória local. A disponibilidade pública de boas folhas de estilo encorajará este efeito.
Nota: o exemplo da folha de estilo por defeito para o HTML 4 que foi incluída em [CSS2], expressa a informação do estilo por defeito que é geralmente aceite para cada elemento. Os autores e os implementadores poderão considerar esta informação como sendo um recurso de grande utilidade.
Os documentos HTML podem conter regras de folhas de estilo neles próprios ou importar as referidas.
No HTML pode-se usar qualquer tipo de linguagem de folhas de estilo. Uma linguagem de folhas de estilo simples poderá ser o suficiente para as necessidades da maioria dos utentes, mas outras linguagens poder-se-ão ajustar a necessidades mais específicas. Esta especificação utiliza a linguagem "Folhas de estilo em cascata" nos exemplos ([CSS1]), também conhecida pela abreviatura CSS.
A sintaxe do estilo dos dados depende da linguagem da folha de estilo.
Os autores têm de especificar a linguagem das folhas de estilo da informação do estilo associado a um documento HTML.
Eles deveriam usar o elemento META para definir a linguagem por defeito da folha de estilo do documento. Por exemplo, para defini-la por defeito (default) como sendo CSS, os autores deveriam inserir a seguinte declaração, no elemento HEAD dos seus documentos:
<META http-equiv="Content-Style-Type" content="text/css">
A linguagem da folha de estilo que é definida por defeito poderá ser ainda definida através dos cabeçalhos de HTTP. A declaração META acima mencionada é equivalente ao cabeçalho HTTP:
Content-Style-Type: text/css
Os agentes deveriam definir a linguagem por defeito das folhas de estilo de um documento, de acordo com a seguinte hierarquia (da maior para a menor prioridade):
Os documentos que incluiam elementos que empreguem o atributo style mas que não definam uma linguagem por defeito para as folhas de estilo, estão incorrectos. As ferramentas usadas na criação dos referidos documentos deveriam gerar informação referente à linguagem por defeito contida na folha de estilo (normalmente uma declaração META) de forma a que os agentes não se tenham que basear sempre numa linguagem por defeito do tipo "text/css".
Definições do atributo
A sintaxe do valor do atributo style é determinada pela linguagem por defeito da folha de estilo. Por exemplo, para o estilo “inline” [[CSS2]], use a sintaxe do bloco da declaração descrita na secção 4.1.8 (sem os delimitadores).
Este exemplo em CSS define a informação da cor e do tamanho da fonte do texto de um determinado parágrafo.
<P style="font-size: 12pt; color: fuchsia">Não são maravilhosas, as folhas de estilo?
Em CSS, as declarações das propriedades assumem a forma “name : value” (nome : valor) e são separadas por um ponto e vírgula.
Para especificar ainformação referente ao estilo para mais do que um elemento, os autores deveriam servir-se do elemento STYLE. A fim de optimizar a flexibilidade do documento, os autores deveriam definir os estilos em folhas de estilo externas.
<!ELEMENT STYLE - - %StyleSheet -- informação referente ao estilo --> <!ATTLIST STYLE %i18n; -- lang, dir, associados ao título -- type %ContentType; #REQUIRED – tipo de conteúdo da linguagem de estilo -- media %MediaDesc; #IMPLIED -- concebido para uso associado a estes meios -- title %Text; #IMPLIED -- título consultivo -- >
"tag" de abertura: requerida, "tag" de encerramento: requerida
Definições do atributo
Atributos definidos noutros lugares:
O elemento STYLE permite que os autores coloquem as regras da folha de estilo no cabeçalho do documento. O HTML permite a inserção de um qualquer número de elementos STYLE na secção HEAD do documento.
Os agentes que não suportem folhas de estilo ou a folha de estilo específica usada por um elemnto STYLE, têm que omitir os conteúdos do elemento STYLE. É errado apresentar o conteúdo como parte do texto do documento. Algumas das linguagens presentes nas folhas de estilo suportam a sintaxe que permite omitir o conteúdo dos agentes que não estejam em conformância.
A sintaxe dos dados referentes ao estilo depende da linguagem da folha de estilo.
Algumas implementações das folhas de estilo poderão permitir uma variedade de regras mais ampla no elemento STYLE do que no atributo style. Por exemplo, no caso das CSS, as regras podem ser declaradas no interior de um elemento STYLE para:
As regras relacionadas com a precedência e com a herança do estilo dependem da da linguagem da folha de estilo.
A seguinte declaração de STYLE em CSS define uma margem à volta de cada elemento H1 contido no documento e centra-a na página.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
Para se especificar que este estilo de informação deveria ser apenas aplicado aos elementos H1 de uma determinada classe, nós efectuamos as seguintes alterações:
<HEAD>
<STYLE type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> Este H1 é afectado pelo nosso estilo</H1>
<H1 class="myclass"> Este H1 não é afectado pelo nosso estilo</H1>
</BODY>
Por último, para limitar o campo de domínio da informação do estilo a um único H1, use o atributo id:
<HEAD>
<STYLE type="text/css">
#myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> Este H1 não é afectado </H1>
<H1 id="myid"> Este H1 é afectado pelo estilo </H1>
<H1> Este H1 não é afectado </H1>
</BODY>
Se bem que a informação referente ao estilo possa ser aplicada a quase todos os elementos HTML, dois desses elementos, DIV e SPAN, são particularmente úteis, no sentido em que não exigem nenhuma semântica de representação (à excepção de nível de bloco x inline). Aquando combinados com as folhas de estilo, esses elementos permitem que os utentes extendam o HTML indefinidamente, particularmente nos casos em que se usem os atributos class e id.
No exemplo que se segue, nós usamos o elemento SPAN para definir o estilo da fonte das primeiras palavras de um parágrafo (“small caps”).
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">As primeiras</SPAN> palavras contidas neste
parágrafo em letras minúsculas (“small-caps”).
</BODY>
No exemplo que se segue, nós usamos os atributos DIV e class para definir a justificação do texto para uma série de parágrafos pertencentes ao resumo de introdução de um artigo científico. Esta informação do estilo poderia ser reutilizada noutras secções de introdução aplicando o atributo class noutras partes do documento.
<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>A gama de produtos Chieftain é o nosso produto de mercado para p
ano que vem. Este relatório define a forma como posicionar
a marca Chieftain contra os produtos da concorrência.
<P>Chieftain substitui a gama de produtos Commander, a qual permanecerá na lista de preços até que se determine o contrário.
</DIV>
</BODY>
O HTML permite que os autores concebam documentos que tirem vantagem das características dos meios onde esses documentos vão ser representados (por exemplo, disposições gráficas, dispositivos móveis, navegadores baseados na voz, dispositivos à base do código Braille, etc.). Ao especificar-se o atributo media, os autores permitem que os agentes carreguem e apliquem as folhas de estilo de uma forma selectiva. Consulte por favor a lista dos media descritores que são reconhecidos.
As amostras de declarações que se seguem aplicam-se aos elementos H1. Se projectados numa reunião de negócios, todos os casos aparecerão definidos a azul. Se se imprimirem, todos os casos estarão centrados.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
Este exemplo adiciona efeitos sonoros às âncoras destinadas às saídas de som:
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
O controlo dos meios torna-se particularmente interessante sempre que aplicado afolhas de estilo externas, dado que os agentes poderão poupar tempo ao retirar da rede apenas as folhas de estilo que se aplicam ao actual dispositivo. Por exemplo, os navegadores à base de voz poderão evitar o carregamento das folhas de estilo destinadas a representações visuais. Veja a secção referente aos cascatas dependentes dos meios se quiser obter mais informações.
Os autores podem separar as folhas de estilo dos documentos HTML. Essa acção oferece várias vantagens:
O HTML permite que os autores associem um qualquer número de folhas de estilo externas a um documento. A linguagem da folha de estilo define a forma como as várias folhas de estilo externas interagem entre si (por exemplo, as regras das cascatas em CSS).
Os autores podem especificar um número de folhas de estilo mutuamente exclusivas, as quais se denominam de folhas de estilo alternativas. Os utentes podem seleccionar a sua favorita de entre as que dependam dessa sua preferência. Por exemplo, um autor pode especificar uma folha de estilo concebida para ecrãs pequenos e outra para utentes que possuam uma vista fraca (contendo por exemplo, tipos de letra com uma maior dimensão). Os agentes deveriam permitir que os utentes possam seleccionar as folhas de estilo alternativas.
O autor pode especificar que uma dessas alternativas é a sua folha de estilo preferida. Os agentes deveriam aplicar a folha de estilo que é preferida pelo utente, a menos que o utente tenha seleccionado uma alternativa diferente.
Os autores podem agrupar várias folhas de estilo alternativas (incluindo as folhas de estilo que são preferidas pelo autor) sob um único nome de estilo. Quando um utente seleccionar um estilo designado por um determinado nome, o agente terá que aplicar todas as folhas de estilo com esse nome. Nesse caso, os agentes não terão que aplicar as folhas de estilo alternativas definidas por um nome diferente. A secção Especificando as folhas de estilo externas indica-nos como atribuir um nome a um grupo de folhas de estilo.
Os agentes deverão respeitar os descritores dos meios ao aplicarem qualquer folha de estilo.
Os agentes deveriam ainda permitir que os utentes possam desactivar totalmente as folhas de estilo, em cujo o caso o agente não terá que aplicar nenhuma folha de estilo persistente ou alternativa.
Os autores podem especificar as folhas de estilo externas através dos atributos do elemento LINK:
Os agentes deveriam fornecer uma maneira que os utentes possam ver e seleccionar a folha de estilo a partir de uma lista de folhas de estilo alternativas. O valor do atributo title e recomendado como nome para cada uma das escolhas.
Neste exemplo, nós especificámos primeiro uma folha de estilo persistente, contida no ficheiro mystyle.css:
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
Aplicando-se o atributo title define-se esta folha de estilo como sendo a folha de estilo que é preferida pelo autor:
<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
Adicionando-se a palavra-chave "alternate" ao atributo rel ela torna-se numa folha de estilo alternativa:
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
Para mais informações acerca das folhas de estilo externas, consulte por favor a secção referente às ligações e folhas de estilo externas.
Os autores podem usar ainda o elemento META, a fim de definirem a folha de estilo preferida para o documento. Por exemplo, para se definir a folha de estilo preferida para "compact" (ver o exemplo anterior), os autores podem incluir a seguinte linha no elemento HEAD:
<META http-equiv="Default-Style" content="compact">
A folha de estilo preferida poderá ser ainda especificada através de cabeçalhos HTTP. A declaração META abaixo mencionada é equivalente ao cabeçalho HTTP:
Default-Style: "compact"
Se uma ou mais declarações META ou cabeçalhos HTTP especificarem a folha de estilo preferida, a última terá precedência. Para este fim, considera-se que os cabeçalhos HTTP ocorram antes de HEAD.
Se um ou mais elementos LINK especificarem a folha de estilo preferida, o primeiro terá precedência.
As folhas de estilo preferidas, especificadas através dos elementos META ou dos cabeçalhos HTTP têm precedência sobre as folhas de estilo preferidas especificadas através do elemento LINK.
As linguagens das folhas de estilo em cascata do tipo CSS (a título de exemplo), permitem que a informação do estilo de vários recursos possa ser agrupada. Contudo, nem todas as linguagens de folhas de estilo suportam cascatas. Para definir uma cascata, os autores especificam uma sequência de elementos LINK e/ou STYLE. A informação do estilo é apresentada em cascata, na mesma ordem que os elementos aparecem em HEAD.
Nota: esta especificação não especifica a forma como as folhas de estilo diferentes se comportam em cascata. Os autores deveriam evitar misturar as linguagens de estilo.
No exemplo que se segue, nós especificamos duas folhas de estilo alternativas designadas de “compact”. Se o utente seleccionar o estilo “compact”, o agente terá que aplicar ambas as folhas de estilo externas, bem como a folha de estilo persistente, designada de “common.css”. Se o utente seleccionar o estilo “big print”, ser-se-ão aplicadas apenas a folha de estilo alternativo “bigprint.css” e a foha de estilo persistente “common.css”.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="common.css" type="text/css">
Eis aqui o exemplo de uma cascata envolvendo os elementos LINK e STYLE.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Uma cascata pode incluir folhas de estilo aplicáveis a meios diferentes. Tanto LINK como STYLE podem ser usados com o atributo media. O agente é então responsável pela filtragem das folhas de estilo que não sejam aplicadas ao meio corrente.
No exemplo que se segue, nós definimos uma cascata onde a folha de estilo “corporate” é fornecida em várias versões: uma destinada à impressão, uma destinada ao ecrã e uma destinada a navegadores à base de voz (útil por exemplo, ao ler-se um email no carro). As folhas de estilo “techreport” aplicam-se a todos os meios. A regra da cor definida pelo elemento STYLE é usada para imprimir e para representar-se o documento no ecrã, mas não no caso da apresentação auditiva.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE media="screen, print" type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Sempre que o agente queira exibir um documento, ele necessita de encontrar valores para as propriedades do estilo, por exemplo, a família da fonte, o estilo da fonte, o tamanho, a altura da linha, a cor do texto e por aí adiante. O mecanismo exacto depende da linguagem da folha de estilo, mas a seguinte descrição é aplicável na generalidade:
O mecanismo da cascata é usado quando um número de regras de estilo se aplicar directamente a um elemento na sua totalidade. O mecanismo permite que o agente ordene as regras de acordo com a sua especificidade, a fim de se determinar qual a regra a aplicar. Se não se puder encontrar nenhuma regra, o próximo passo dependerá do facto se a propriedade do estilo poderá ser herdada ou não. Nem todas as propriedades podem ser herdadas. Para essas propriedades, a linguagem da folha de estilo fornece valores por defeito a serem usados sempre que não existam regras explícitas para um determinado elemento.
Se a propriedade puder ser herdada, o agente examina o elemento imediatamente abrangido, a fim de determinar se a regra se aplica a ele. Este processo continua até que seja encontrada uma regra aplicável. Este mecanismo permite que as folhas de estilo possam ser especificadas de uma forma compacta. Por exemplo, os autores podem especificar a família da fonte para todos os elementos contidos em BODY com uma única regra aplicável ao elemento BODY.
Algumas linguagens das fohas de estilo suportam uma sintaxe que permite omitir o conteúdo dos elementos STYLE aos agentes que não estejam em conformidade.
Este exemplo ilustra-nos a forma como se inclui um comentário em CSS, fora do conteúdo dos elementos STYLE, para se assegurar que os agentes mais antigos que não estejam em conformidade não os representem sob a forma de texto.
<STYLE type="text/css">
<!--
H1 { color: red
P { color: blue}
-->
</STYLE>
Esta secção aplica-se apenas aos agentes que estejam em conformidade com as versões de HTTP que definam um campo de cabeçalho “Link”. Note-se que o HTTP 1.1, de acordo com aquilo que foi definido em [RFC2616], não incluí um campo para o cabeçalho “Link” (ver a secção 19.6.3).
Os administradores de servidores da rede poderão achar conveniente configurar o servidor de forma a que uma folha de estilo seja aplicada a um grupo de páginas. O cabeçalho HTTP Link tem o mesmos efeito que o elemento LINK, contendo os mesmos atributos e valores. A cabeçalhos Link múltiplos correspondem elementos LINK, os quais ocorrem na mesma ordem. Por exemplo,
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
corresponde a:
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
é possível especificarem-se várias folhas de estilo alternativas, usando-se cabeçalhos Link múltiplos e posteriormente o atributo rel, a fim de determinar o estilo por defeito.
No exemplo que se segue, "compact" é aplicado por defeito, dado que omite a palavra-chave "alternate", pertencente ao atributo rel.
Link: <compact.css>; rel="stylesheet"; title="compact" Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
Isto também deveria funcionar sempre que os documentos HTML forem enviados por email. Alguns agentes de email poderão alterar a ordenação dos cabeçalhos [RFC822]. Para evitar que tal afecte a ordem da cascata nas folhas de estilo especificadas nos cabeçalhos Link, os autores podem usar o encadeamento dos cabeçalhos, a fim de fundir num só os casos em que se deia a repetição do mesmo campo do cabeçalho. As aspas só são necessárias quando os valores do atributo contiverem espaços em branco. Use as entidades SGML para referenciar caracteres que não sejam de outra forma permitidos no interior de cabeçalhos HTTP ou de email, ou que possam ser de igual forma afectados através do seu trânsito ao longo dos portais ou “gateways”.
Os elementos LINK e META implicados nos cabeçalhos HTTP são definidos como ocorrendo antes de qualquer elemento LINK e META explícitos no HEAD do documento.