Índice
As follas de estilo representan un avanzo fundamental para os deseñadores de páxinas web ao aumentar a sua capacidade de mellorar a aparéncia das páxinas. Nos ambientes científicos nos que se concebeu a Rede, a xente estaba máis interesada polo conteúdo dos seus documentos que pola apresentación. Conforme xente de distintos meios descobria a Rede, as limitacións da HTML converteron-se nunha fonte de frustración continuada e os autores tiveron que evitar as limitacións estilísticas da HTML. Se ben as intencións foron boas -mellorar a apresentación das páxinas web- as técnicas para lográ-lo tiveron efectos colaterais desafortunados. Estas técnicas funcionan para algunha xente, algunhas veces, mais non para toda a xente, todas as veces. Incluen:
Estas técnicas incrementan considerabelmente a complexidade das páxinas web, oferecen unha flexibilidade limitada, sofren de problemas de interoperabilidade e crean dificuldades para as persoas con discapacidades.
As follas de estilo resolven estes problemas ao tempo que ultrapasan o rango tan limitado de mecanismos de apresentación da HTML. As follas de estilo facilitan a indicación da cantidade de espazo en branco entre as liñas de texto, a cantidade en que se indentan as liñas, as cores que se usan para o texto e os fondos, o tamaño e o estilo da letra e moitos outros detalles.
Por exemplo, a corta folla de estilo CSS seguinte (armacenada no ficheiro "especial.css") indica que a cor do texto dun parágrafo é verde e rodea-o cun borde vermello contínuo:
P.especial {
color : green;
border: solid red;
}
Os autores poden vincular esta folla de estilo co seu documento orixe de HTML co elemento LINK :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="especial.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="especial">Este parágrafo deberia ter texto verde especial.
</BODY>
</HTML>
A HTML 4 dá cobertura aos seguintes rasgos das follas de estilo:
As follas de estilo, por contraste, aplican-se a médios ou grupos de médios específicos. Unha folla de estilo pensada para a pantalla pode resultar impresa, mais é de pouca utilidade en navegadores baseados na voz. Esta especificación permite definir as categorias amplas de médos nas que se pode aplicar unha folla de estilo dada. Isto permite que os axentes de usuário eviten recuperar follas de estilo inapropriadas. As linguaxes de follas de estilo poden incluir rasgos para descreber as dependéncias dos meios dentro da mesma folla de estilo
A proposta actual resposta a estas cuestións permitindo-lles aos autores a inclusión de instrucións sobre a representación dentro de cada elemento HTML. A información sobre a representación está entón disponíbel no momento en que o axente de usuário ten que representar cada elemento.
En moitos casos, os autores tentarán aproveitar unha folla de estilo comun para un grupo de documentos. Neste caso, distribuir regras de estilo ao longo do documento fará que o rendimento sexa pior que se se usase unha folla de estilo vinculada, dado que na maioria dos documentos a folla de estilo xa estará presente na memória local. A disponibilidade pública de boas follas de estilo fomentará este efecto.
Nota. A folla de estilo por omisión de exemplo da HTML 4 que se inclui en [CSS2] expresa información de estilo por omisión amplamente aceitada para cada elemento. Os autores e implementadores talvez achen que este é un recurso útil.
Os documentos HTML poden conter regras de follas de estilo directamente dentro deles ou tamén poden importar follas de estilo.
Pode-se usar calquer linguaxe de follas de estilo coa HTML. Unha linguaxe de follas de estilo simples pode chegar para as necesidades da maioria dos usuários, mais outras linguaxes poden ser máis adecuadas para necesidades máis especializadas. Esta especificación usa a linguaxe de estilo "Follas de estilo en cascada" ( [CSS1] ), abreviada como CSS, nos exemplos.
A sintaxe das follas de estilo depende da linguaxe de follas de estilo.
Os autores deben especificar a linguaxe das follas de estilo da información de estilo asociada cun documento HTML.
Os autores deberian usar o elemento META para indicar a linguaxe das follas de estilo por omisión dun documento. Por exemplo, para indicar a omisión para CSS, os autores deberian pór a seguinte declaración na sección HEAD dos seus documentos:
<META http-equiv="Content-Style-Type" content="text/css">
A linguaxe por omisión das follas de estilo tamén se pode indicar mediante cabezallos de HTTP. A declaración META anterior equivale ao cabezallo de HTTP:
Content-Style-Type: text/css
Os axentes de usuário deberian determinar a linguaxe das follas de estilo por omisión dun documento dacordo cos seguintes pasos (de maior a menor prioridade):
Os documentos que incluan elementos que indiquen o atributo style mais que non definan unha linguaxe de follas de estilo por omisión son incorrectos. As ferramentas de creación deberian xerar información de linguaxe de follas de estilo por omisión (normalmente unha declaración META ) para que os axentes de usuário non teñan que confiar nun "text/css" por omisión.
Definicións dos atributos
A sintaxe do valor do atributo style ven determinada pola linguaxe das follas de estilo por omisión . Por exemplo, para o estilo en liña [[CSS2]], utilice a sintaxe de bloco de declaración descrita na sección 4.1.8 (sen chaves como delimitadores).
Este exemplo CSS indica a información sobre a cor e o tamaño da letra para o texto dun parágrafo determinado.
<P style="font-size: 12pt; color: fuchsia">A que as follas de estilo son unha maravilla?
En CSS, as declaracións de propriedades teñen a forma "nome : valor" e separan-se cun ponto e vírgula.
Para especificar a información de estilo para máis de un elemento, os autores deberian usar o elemento STYLE. Para unha flexibilidade óptima, os autores deberian definir os estilos en follas de estilo externas.
<!ELEMENT STYLE - - %StyleSheet -- información de estilo -->
<!ATTLIST STYLE
%i18n; -- lang, dir, para usar co título --
type %ContentType; #requerida -- tipo de conteúdo da linguaxe de estilo --
media %MediaDesc; #IMPLIED -- deseñado para usar con estes meios --
title %Text; #IMPLIED -- título de anúncio --
>
Etiqueta inicial: requerida , Etiqueta final: requerida
Definicións dos atributos
Atributos que se definen noutro sítio
O elemento STYLE permite que os autores poñan regras de folla de estilo no cabezallo do documento. A HTML permite calquer cantidade de elementos STYLE na sección HEAD dun documento.
Os axentes de usuário que non aceiten follas de estilo, ou que non aceiten a linguaxe de follas de estilo que se usa especificamente nun elemento STYLE , deben ocultar os conteúdos do elemento STYLE . É un erro mostrar o conteúdo como parte do texto do documento. Algunhas linguaxes de follas de estilo aceitan sitaxe que oculta o conteúdo de axentes de usuário non conformes.
A sintaxe dos dados de estilo depende da linguaxe das follas de estilo.
Algunhas implementacións de follas de estilo poden permitir unha maior variedade de regras no elemento STYLE que no atributo style . Por exemplo, con CSS poden-se declarar regras dentro dun elemento STYLE para:
As regras da precedéncia e herdanza das regras de estilo dependen da linguaxe das follas de estilo.
A declaración STYLE de CSS seguinte coloca un borde arredor de cada elemento H1 do documento e centra-o na páxina.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
Para especificar que esta información de estilo só se deberia aplicar aos elementos H1 dunha clase determinada, modificamo-lo como segue:
<HEAD>
<STYLE type="text/css">
H1.aminhaclase {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="aminhaclase"> A este H1 afecta-lle o noso estilo </H1>
<H1> A este non lle afecta o noso estilo </H1>
</BODY>
Por último, para limitar o rango da información de estilo a un só caso de H1 , use o atributo id :
<HEAD>
<STYLE type="text/css">
#omeuid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="aminhaclase"> A este H1 non lle afecta </H1>
<H1 id="omeuid"> A este H1 afecta-lle o estilo </H1>
<H1> This H1 is not affected </H1>
</BODY>
Ainda que a información de estilo pode ser indicada para case todo elemento HTML, hai dous elementos, DIV e SPAN , que resultan especialmente úteis ao non imporen nengunha semántica de representación (a parte de nível de bloco frente a en liña ). Ao combiná-los con follas de estilo, estes elementos permiten que os usuários extendan a HTML indefinidamente, en especial cando se usan cos atributos class e id .
No seguinte exemplo usamos o elemento SPAN para indicar que o estilo de letra das primeiras palabras dun parágrafo é versalitas.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">As primeiras</SPAN> palabras deste
parágrafo están en versalitas.
</BODY>
No exemplo seguinte, usamos DIV e o atributo class para indicar a xustificación do texto dunha série de parágrafos que conforman a sección do resumo introdutório dun artigo científico (o "abstract"). Esta información de estilo poderia-se reusar noutras seccións de abstracts indicando 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 Xefe é o noso grande produto de mercado
para o ano que ven. Este informe examina como se debe colocar
Xefe contra os produtos da competéncia.
<P>Xefe substitue a gama Comandante, que permanecerá
na lista de prezos até novo aviso.
</DIV>
</BODY>
A HTML permite que os autores deseñen documentos que se aproveiten das características do médio no que se há-de mostrar o documento (p.ex., pantallas gráficas, monitores de televisión, dispositivos de mao, navegadores baseados na voz, dispositivos tácteis para braille, etc.). Ao especificar o atributo media , os autores permiten que os axentes de usuário carreguen e apliquen as follas de estilo de maneira selectiva. Consulte a lista de descritores de médios recoñecidos.
As seguintes declaracións de exemplo aplican-se aos elementos H1 . Ao se proxectaren nunha reunión de negócios, todos aparecerán en azul. Ao imprimi-los, todos estarán 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 efectos de son às ancoras para o seu uso en saída de voz:
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
O control do meio é de particular interese cando se aplica a follas de estilo externas xa que os axentes de usuário poden aforrar tempo se recuperan da rede só as follas de estilo que se poidan aplicar ao dispositivo actual. Por exemplo, os navegadores baseados na voz poden evitar baixar follas de estilo deseñadas para a sua apresentación visual. Vexa a sección sobre cascadas dependentes do meio para máis información.
Os autores poden separar as follas de estilo dos documentos HTML. Isto oferece vários benefícios:
A HTML permite que os autores asócien calquer cantidade de follas de estilo externas cun documento. A linguaxe das follas de estilo define como interaccionan várias follas de estilo externos (por exemplo, as regras de "cascada" de CSS).
Os autores poden especificar calquer cantidade de follas de estilo mutuamente excluintes, chamadas follas de estilo alternativas. Os usuários poden seleccionar a que prefiran de entre as que dependan das suas preferéncias. Por exemplo, un autor pode especificar unha folla de estilo deseñada para pantallas pequenas e outra para usuários con visión reducida (p.ex., tipos de letra grandes). Os axentes de usuário deberian permitir que os usuários seleccionen de entre follas de estilo alternativas.
O autor pode especificar que unha das alternativas sexa a folla de estilo preferida. Os axentes de usuário deberian aplicar a folla de estilo preferida do autor a non ser que o usuário seleccionase unha alternativa diferente.
Os autores poden agrupar várias follas de estilo alternativas (incluídas as follas de estilo preferidas polo autor) baixo un único nome de estilo. Cando un usuário selecciona un estilo con nome, o axente de usuário debe aplicar todas as follas de estilo con ese nome. Os axentes de usuário non deben aplicar follas de estilo alternativas cun nome de estilo diferente. A sección sobre especificación de follas de estilo externas explica como lle dar nome a un grupo de follas de estilo.
Os axentes de usuário deben respeitar os descritores de médios ao aplicaren calquer folla de estilo.
Os axentes de usuário deberian permitir tamén que os usuários desactiven as follas de estilo do autor de todo, en cuxo caso o axente de usuário non debe aplicar nengunha folla de estilo persistente ou alternativa.
Os autores especifican as follas de estilo externas cos seguintes atributos do elemento LINK :
Os axentes de usuário deberian fornecer a maneira de que os usuários vexan e seleccionen da lista de estilos alternativos. Recomenda-se que se use o valor do atributo title como nome de cada opción.
Neste exemplo, primeiro especificamos unha folla de estilo persistente localizada no ficheiro omeuestilo.css :
<LINK href="omeuestilo.css" rel="stylesheet" type="text/css">
Ao estabelecer o atributo title , converte-se na folla de estilo preferida polo autor:
<LINK href="omeuestilo.css" title="compacto" rel="stylesheet" type="text/css">
Ao adicionar a palabra chave "alternate" ao atributo rel , converte-se nunha folla de estilo alternativa
<LINK href="omeuestilo.css" title="Medio" rel="alternate stylesheet" type="text/css">Para máis información sobre follas de estilo externas, consulte a sección sobre vínculos e follas de estilo externas.
Os autores tamén poden usar o elemento META para indicar a folla de estilo preferida do documento. Por exemplo, para indicar que a folla de estilo preferida é "compacto" (ver o exemplo anterior), os autores poden incluir a seguinte liña en HEAD :
<META http-equiv="Default-Style" content="compacto">
A folla de estilo preferida tamén se pode especificar con cabezallos de HTTP. A declaración META anterior equivale ao cabezallo de HTTP:
Default-Style: "compacto"
Se duas ou máis declaracións META ou cabezallos de HTTP especifican a folla de estilo preferida, a última adquire a precedéncia. Considera-se que os cabezallos de HTTP aparecen antes que o HEAD do documento a estes efectos.
Se dous o máis elementos LINK especifican unha folla de estilo preferida, a primeira adquire a precedéncia.
As follas de estilo preferidas especificadas con META ou con cabezallos de HTTP adquiren a precedéncia sobre as especificadas co elemento LINK .
As linguaxes de follas de estilo en cascada tal e como CSS permiten que se mesture a información sobre estilo de várias fontes. Porén, non todas as linguaxes de follas de estilo admiten a cascada. Para definir unha cascada, os autores especifican unha secuéncia de elementos LINK e/ou STYLE . A información de estilo aparece en cascada na orde na que aparecen os elementos en HEAD .
Nota. Esta especificación non especifica como deben comportar-se en cascada as follas de estila de linguaxes de estilo diferentes. Os autores deberian evitar mesturar linguaxes de follas de estilo.
No exemplo seguinte, especificamos duas follas de estilo alternativas chamadas "compacto". Se o usuário escolle o estilo "compacto", o axente de usuário debe aplicar ambas as duas follas de estilo externas, asi como a folla de estilo persistente "comun.css". Se o usuário escolle o estilo "letras grandes", só se aplicarán a folla de estilo alternativa "letrasgrandes.css" e a persistente "comun.css".
<LINK rel="alternate stylesheet" title="compacto" href="pequeno-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compacto" href="pequeno-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="letras grandes" href="letrasgrandes.css" type="text/css">
<LINK rel="stylesheet" href="comun.css" type="text/css">
Velaqui un exemplo en cascada que envolve ambos os dous elementos LINK e STYLE .
<LINK rel="stylesheet" href="empresa.css" type="text/css">
<LINK rel="stylesheet" href="informetecnico.css" type="text/css">
<STYLE type="text/css">
p.especial { color: rgb(230, 100, 180) }
</STYLE>
Unha cascada pode incluir follas de estilo aplicábeis a médios diferentes. Tanto LINK como STYLE se poden usar co atributo media . O axente de usuário resonsabiliza-se entón de filtrar as follas de estilo que non se apliquen ao médio actual.
No exemplo seguinte, definimos unha cascada na que a folla de estilo "empresa" se fornece en várias versións: unha apropriada para ser impresa, unha para usar sobre unha pantalla e unha para navegadores baseados na voz (útil, por exemplo, para ler correo no coche). A folla de estilo "informetecnico" aplica-se a todos os médos. A regra de cor definida polo elemento STYLE usa-se para imprimir e para a pantalla mais non para a apresentación auditiva.
<LINK rel="stylesheet" media="aural" href="empresa-auditiva.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="empresa-pantalla.css" type="text/css">
<LINK rel="stylesheet" media="print" href="empresa-imprimir.css" type="text/css">
<LINK rel="stylesheet" href="informetecnico.css" type="text/css">
<STYLE media="screen, print" type="text/css">
p.especial { color: rgb(230, 100, 180) }
</STYLE>
Cando o axente de usuário ten que mostrar un documento, necesita achar os valores das propriedades de estilo, p.ex., a família do tipo de letra, o estilo de letra, a altura da liña, a cor do texto, etc. O mecanismo exacto depende da linguaxe das follas de estilo, mais a descrición que segue aplica-se bastante:
O mecanismo de cascada usa-se cando várias regras de estilo se aplican directamente a un elemento. O mecanismo permite que o axente de usuário ordene as regras pola sua especificidade, para determinar que regra aplicará. Se non acha nengunha regra, o paso seguinte depende de se a propriedade de estilo pode ser herdada ou non. Non todas as propriedades se poden herdar. Para esas propriedades a linguaxe de follas de estilo fornece uns valores por omisión para que se usen cando non hai regras explícitas para un elemento determinado.
Se a propriedade pode ser herdada, o axente de usuário examina o elemento que o encerra imediatamente para ver se se lle aplica algunha regra. Este proceso continua até que se acha unha regra aplicábel. Este mecanismo permite que as follas de estilo se especifiquen de maneira compacta. Por exemplo, os autores poden especificar a família do tipo de letra para todos os elementos dentro de BODY cunha única regra que se aplique ao elemento BODY .
Algunhas linguaxes de follas de estilo aceitan sintaxe pensada para que os autores poidan ocultar o conteúdo dos elementos STYLE dos axentes de usuário non conformes.
Este exemplo ilustra como CSS inclui nun comentário o conteúdo dos elementos STYLE para se asegurar de que os axentes de usuário máis antigos, non conformes, non o mostre como texto.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Esta sección só se aplica aos axentes de usuários conformes coas versións de HTTP que definen un cambo de cabezallo Link. Observe-se que HTTP 1.1 tal e como se define en [RFC2616] non inclui un campo de cabezallo Link (vexa a sección 19.6.3).
Aos administradores de servidores web pode-lles resultar útil configurar o servidor de xeito que se aplique unha folla de estilo a un grupo de páxinas. O cabezallo de HTTP Link ten o mesmo efecto que un elemento LINK cos mesmos atributos e valores. Vários cabezallos Link corresponden a vários elementos LINK que aparecesen na mesma orde. Por exemplo,
Link: <http://www.acme.com/empresa.css>; REL=stylesheet
corresponde a:
<LINK rel="stylesheet" href="http://www.acme.com/empresa.css">
É posíbel especificar vários estilos alternativos usando vários cabezallos Link e logo usar o atributo rel para determinar o estilo por omisión.
No exemplo seguinte, aplica-se "compact" por omisión dado que omite a palabra chave "alternate" do atributo rel .
Link: <compact.css>; rel="stylesheet"; title="compacto"
Link: <letrasgrandes.css>; rel="alternate stylesheet"; title="letrasgrandes"
Isto tamén deberia funcionar cando se envian documentos HTML por correo electrónico. Alguns axentes de correo poden alterar a ordenación dos cabezallos [RFC822] . Para evitar que isto afecte a orde de cascada das follas de estilo especificadas polos cabezallos Link, os autores poden usar a concatenación dos cabezallos para fundir nunha várias aparicións do mesmo campo do cabezallo. As aspas só se precisan cando os valores de atributo incluen espazos en branco. Use entidades SGML para referenciar caracteres que doutra maneira non se permiten nos cabezallos de HTTP ou de correo electrónico ou que probabelmente se verán afectados no seu tránsito polos gateways.
Os elementos LINK e META implicados polos cabezallos HTTP definen-se como se aparecesen antes de calquer elemento LINK e META explícito no HEAD do documento.