Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification" (más información). Puede consultar laversión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozoarroba conclase punto net. Gracias por su colaboración.
Véase elAviso de copyright de la traducción.
Contenidos
Las hojas de estilo representan un avance importante para los diseñadores de páginas web,al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas.En los entornos científicos en que la Web fue concebida, la gente estaba máspreocupada por el contenido de sus páginas que por su presentación. A medidaque la Web era descubierta por un espectro mayor de personas de distintas procedencias,las limitaciones del HTML se convirtieron en fuente de continua frustración,y los autores se vieron forzados a superar las limitaciones estilísticas del HTML.Aunque las intenciones han sido buenas -- mejorar la presentación de las páginasweb --, las técnicas para conseguirlo han tenido efectos secundarios negativos.Entre estas técnicas, que dan buenos resultados para algunas personas, algunasveces, pero no siempre ni para todas las personas, se incluyen:
Estas técnicas incrementan considerablemente la complejidad de laspáginas web, ofrecen una flexibilidad limitada, sufren de problemas deinteroperabilidad, y crean dificultades para las personas condiscapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo quereemplazan al limitado rango de mecanismos de presentación del HTML.Con las hojas de estilo es más fácil especificar la cantidad de espacioentre líneas, el sangrado de las líneas, los colores a utilizar para eltexto y el fondo, el tamaño y estilo de las fuentes, y otros muchosdetalles.
Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero"especial.css") hace que el color del texto de un párrafo sea verde ("green")y lo rodea de un borde rojo ("red") continuo ("solid"):
P.especial {color : green;border: solid red;}Los autores pueden vincular esta hoja de estilo a su documento fuente HTMLcon el elemento
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML> <HEAD> <TITLE>Un documento con una hoja de estilo externa<TITLE> <LINK href="especial.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P>Este párrafo debería tener texto especial verde. </BODY></HTML>
HTML 4 soporta las siguientes características de hojas de estilo:
Las hojas de estilo, en contraste, se aplican a medios o grupos de mediosespecíficos. Una hoja de estilo diseñada para una pantalla puede ser aplicablepara una salida impresa, pero es de poca utilidad para los navegadores basados en voz.Esta especificación le permite definir categorías generales de medios a losque es aplicable una hoja de estilo dada. Esto permite a los agentes de usuarioevitar la descarga de hojas de estilo que no sean apropiadas. Los lenguajesde hojas de estilo pueden incluir características para describir dependenciasdel medio dentro de una misma hoja de estilo.
La propuesta actual resuelve estos problemas, pues permite a los autoresincluir instrucciones de representación dentro de cada elemento HTML. Así,la información de representación siempre estará disponible en el momentoen que el agente de usuario quiera representar cada elemento.
En muchos casos los autores sacarán partido de una hoja de estilo comúna un grupo de documentos. En este caso, la distribución de reglas de estiloa lo largo del documento conducirá a un rendimiento peor que si se usarauna hoja de estilo vinculada, ya que para la mayoría de los documentos lahoja de estilo ya estará almacenada en la caché local. La disponibilidadpública de hojas de estilo de calidad potenciará este efecto.
Nota. La hoja de estilo por defecto del HTML 4 que se incluyeen[CSS2] expresa la información de estilo por defecto generalmenteaceptada para cada elemento. Los autores, así como los implementadores, puedenencontrar en ella un recurso útil.
Los documentos HTML pueden contener reglas de hojas de estilo directamente,o bien pueden importar hojas de estilo.
Se puede usar cualquier lenguaje de hojas de estilo con HTML. Un lenguajesimple de hojas de estilo puede ser suficiente para la mayoría de los usuarios,pero para otras necesidades más especializadas pueden ser apropiados otroslenguajes. Esta especificación utiliza para los ejemplos el lenguaje de estilollamado "Hojas de Estilo en Cascada" ("Cascading Style Sheets",[CSS1]), abreviado CSS.
Lasintaxis de los datos de estilo dependedel lenguaje de hojas de estilo.
Los autores deben especificar el lenguaje de hojas de estilo de lainformación de estilo asociada con un documento HTML.
Los autores deberían usar el elementoMETA para especificar el lenguaje de hojasde estilo por defecto de un documento. Por ejemplo, para especificar que el valorpor defecto es CSS, los autores deberían poner la siguiente declaración en lasecciónHEAD de sus documentos:
<META http-equiv="Content-Style-Type" content="text/css">
El lenguaje de hojas de estilo por defecto también puede ser establecidocon encabezados HTTP. La declaraciónMETA de arriba es equivalenteal encabezado HTTP siguiente:
Content-Style-Type: text/css
Los agentes de usuario deberían determinar el lenguaje de hojas de estilopor defecto de acuerdo con los siguientes pasos (ordenados de mayor a menorprioridad):
Los documentos que incluyan elementos que especifiquen el atributostylepero que no definan un lenguaje de hojas de estilo por defecto son incorrectos.Lasherramientas de creación deberíangenerar información de lenguaje de hojas de estilo por defecto (normalmenteuna declaraciónMETA) de modo que los agentes de usuario no tengan que atenerseal valor por defecto "text/css".
Definiciones de atributos
Lasintaxis del valor del atributostyle viene determinada por ellenguaje de hojas de estilo por defecto. Por ejemplo, paralos estilos [[CSS2]] en línea, se usa la sintaxis de bloque de declaracionesdescrita en la sección 4.1.8 (sin las llaves).
Este ejemplo CSS establece información sobre el color y el tamaño de la fuentedel texto de un párrafo específico.
<P>¿No son maravillosas las hojas de estilo?
En CSS, las declaraciones de propiedades son de la forma "nombre : valor" yestán separadas por un punto y coma.
Para especificar información de estilo en línea para más de un elemento,los autores deberían usar el elementoSTYLE.Para lograr una flexibilidad óptima, los autores deberían definir los estilosen hojas de estilo externas.
<!ELEMENTSTYLE - -%StyleSheet -- información de estilo --><!ATTLIST STYLE%i18n; --lang,dir, para usar con title --type%ContentType; #REQUIRED -- tipo de contenido del lenguaje de estilos --media%MediaDesc; #IMPLIED -- diseñado para usar con estos medios --title%Text; #IMPLIED -- título consultivo -- >
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
Definiciones de atributos
Atributos definidos en otros lugares
El elementoSTYLE permite a los autores poner reglas de hojas de estilo en la
Los agentes de usuario que no soporten hojas de estilo, o que no soportenel lenguaje de hojas de estilo utilizado por un elementoSTYLE en particular, deben ocultar los contenidosdel elementoSTYLE.Es un error representarel contenido como parte del texto del documento. Algunos lenguajes de hojasde estilo soportan sintaxis paraocultar el contenidoa agentes de usuarios no conformes.
Lasintaxis de los datos de estilodepende del lenguaje de hojas de estilo.
Algunas implementaciones de hojas de estilo pueden permitir una gamamás amplia de reglas en el elementoSTYLE que en el atributostyle. Por ejemplo, con CSS,pueden declararse reglas dentro de un elementoSTYLE para:
Las reglas de precedencia y herencia de las reglas de estilo dependendel lenguaje de hojas de estilo.
La siguiente declaración
<HEAD> <STYLE type="text/css"> H1 {border-width: 1px; border: solid; text-align: center} </STYLE></HEAD>Para especificar que esta información de estilo sólo debería aplicarsea los elementosH1 de una clase específica, la modificamos como sigue:
<HEAD> <STYLE type="text/css"> H1.miclase {border-width: 1px; border: solid; text-align: center} </STYLE></HEAD><BODY> <H1> Este H1 está afectado por nuestro estilo </H1> <H1> Este no está afectado por nuestro estilo </H1></BODY>Finalmente, para limitar el alcance de la información de estilo a unasola aparición deH1, establecemos el atributoid:
<HEAD> <STYLE type="text/css"> #miid {border-width: 1px; border: solid; text-align: center} </STYLE></HEAD><BODY> <H1> Este H1 no está afectado </H1> <H1> Este H1 está afectado por el estilo </H1> <H1> Este H1 no está afectado </H1></BODY>Aunque se puede especificar información de estiloprácticamente para cualquier elemento, hay dos elementos,DIV ySPAN, que son particularmente útiles en el sentidode que no imponen ningún significado presentacional (aparte de la distinciónen bloque/en línea).Combinados con hojas de estilo, estos elementos permiten a los usuariosextender el HTML indefinidamente, en especial si se utilizan junto conlos atributosclass eid.
En el siguiente ejemplo, utilizamos el elementoSPAN para especificar que el estilo de fuente de las primeraspalabras de un párrafo sea versalitas ("small-caps").
<HEAD> <STYLE type="text/css"> SPAN.ver-ex { font-variant: small-caps } </STYLE></HEAD><BODY> <P><SPAN>Las primeras</SPAN> palabras de este párrafo van en versalitas.</BODY>En el siguiente ejemplo, utilizamos el elementoDIV y el atributoclass para establecer la justificación del texto de una seriede párrafos que constituyen el abstracto de un artículo científico. Estainformación de estilo podría reutilizarse para otras secciones de abstractoespecificando el valor correspondiente del atributoclass en cualquier otro lugar del documento.
<HEAD> <STYLE type="text/css"> DIV.Abstracto { text-align: justify } </STYLE></HEAD><BODY> <DIV> <P>La gama de productos Gran Jefe es nuestra apuesta para el año que viene. Este informe sienta las bases para confrontar a Gran Jefe con los productos de la competencia. <P>Gran Jefe reemplaza a nuestra gama "Commander", si bien ésta seguirá de momento en catálogo. </DIV></BODY>HTML permite a los autores diseñar documentos que saquen partidode las características de los medios en los que el documento vaya a serrepresentado (p.ej., pantallas gráficas, pantallas de televisión,dispositivos de mano, navegadores basados en voz, dispositivos táctilesBraille, etc.). Al especificar el atributomedia,los autores permiten a los agentes de usuario cargar y aplicar las hojasde estilo de manera selectiva. Consulte la lista dedescriptores de medios reconocidos.
Las siguientes declaraciones de ejemplo se aplican a elementosH1. Cuando se proyecten en una reunión de negocios, todosellos aparecerán en azul. Cuando se impriman, aparecerá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 ejemplo añade efectos de sonido a los vínculos para su uso en salidas por voz:
<STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE></HEAD>El control de medios es particularmente interesante cuando se aplicaa hojas de estilo externas, ya que los agentes de usuario pueden ahorrartiempo si obtienen de la red únicamente aquellas hojas de estilo que seapliquen el dispositivo actual. Por ejemplo, los navegadores basados en vozpueden evitar la descarga de hojas de estilo diseñadas para la representaciónvisual. Veáse la sección sobrecascadas dependientesdel medio para más información.
Los autores pueden separar las hojas de estilo de los documentos HTML.Esto ofrece varias ventajas:
HTML permite a los autores asociar cualquier número de hojas de estiloexternas a un documento. El lenguaje de hojas de estilo define el modo enque interaccionan varias hojas de estilo (por ejemplo, las reglas de "cascada"de CSS).
Los autores pueden especificar cualquiernúmero de hojas de estilo mutuamente excluyentes llamadas hojas de estiloalternativas. Los usuarios pueden seleccionar su hojafavorita según sus preferencias. Por ejemplo, un autor puede especificar una hojade estilo diseñada para pantallas pequeñas y otra para usuarios con poca visión(p.ej., con fuentes grandes). Los agentes de usuario deberían permitir a losusuarios seleccionar las hojas de estilo alternativas.
El autor puede especificar que una delas alternativas es una hoja de estilopreferente.Los agentes de usuario deberían aplicar la hoja de estilo preferente delautor a menos que el usuario haya seleccionado una alternativa diferente.
Los autores pueden agrupar varias hojas de estilo alternativas (incluyendolas hojas de estilo preferentes del autor) bajo unnombre de estilocomún. Cuando un usuario selecciona un nombre de estilo, el agente de usuariodebe aplicar todas las hojas de estilo con ese nombre. Los agentes de usuariono deben aplicar hojas de estilo alternativas con un nombre de estilodiferente. La sección sobreespecificación dehojas de estilo externas explica cómo dar un nombre a un grupo de hojasde estilo.
Los agentes de usuario deben respetar losdescriptores de medios al aplicar cualquier hoja de estilo.
Los agentes de usuario también deberían permitir a los usuariosdeshabilitar completamente las hojas de estilo del autor, en cuyo casoel agente de usuario no debería aplicar ninguna hoja de estilo persistenteni alternativa.
Los autores especifican hojas de estilo externas mediante los siguientesatributos del elementoLINK:
Los agentes de usuario deberían posibilitar a los usuarios ver lalista de estilos alternativos y escoger uno de ellos. Se recomienda queel nombre de cada opción sea el valor del atributotitle.
En este ejemplo, especificamos en primer lugar una hoja de estilopersistente localizada en el ficheromiestilo.css:
<LINK href="miestilo.css" rel="stylesheet" type="text/css">
Si establecemos el atributo
<LINK href="miestilo.css" title="compacto" rel="stylesheet" type="text/css">
Si añadimos la palabra clave "alternate" al atributorel la convertimos en una hoja de estilo alternativa:
<LINK href="miestilo.css" title="Medium" rel="alternate stylesheet" type="text/css">
Para más información sobre hojas de estilo externas, consulte lasección sobrevínculos y hojas de estiloexternas.
Los autores también pueden usar elelementoMETA para establecer la hoja de estilo preferente deldocumento. Por ejemplo, para especificar que la hoja de estilopreferente sea "compacto" (ver el ejemplo precedente), los autores puedenincluir la siguiente línea en elHEAD:
<META http-equiv="Default-Style" content="compacto">
La hoja de estilo preferente también se puede especificar medianteencabezados HTTP. La declaraciónMETA precedente es equivalente a este encabezado HTTP:
Default-Style: "compacto"
Si hay dos o más declaracionesMETA o encabezados HTTP que especifiquenla hoja de estilo preferente, la que prevalece es la última. A estosefectos, se considera que los encabezados HTTP aparecen antes que lasecciónHEAD del documento.
Si hay dos o más elementos
Las hojas de estilo preferentes especificadas con un elementoMETA o con encabezados HTTP prevalecen sobre las especificadascon el elementoLINK.
Los lenguajes de hojas de estilo encascada, tales como CSS,permiten que se pueda combinar la información de varias fuentes. Sin embargo,no todos los lenguajes de hojas de estilo soportan la cascada. Para definiruna cascada, los autores especifican una secuencia de elementos
Nota. Esta especificación no especifica cómo secombinan en cascada hojas de estilo de lenguajes de hojas de estilo distintos.Los autores deberían evitar mezclar lenguajes de hojas de estilo.
En el siguiente ejemplo, especificamos dos hojas de estilo alternativasllamadas "compacto". Si el usuario selecciona el estilo "compacto", el agentede usuario debe aplicar ambas hojas de estilo externas, así como la hojade estilo persistente "comun.css". Si el usuario selecciona el estilo"tipos grandes", sólo se aplicarán la hoja de estilo alternativa "tgrandes.css"y "comun.css".
<LINK rel="alternate stylesheet" title="compacto" href="peq-base.css" type="text/css"><LINK rel="alternate stylesheet" title="compacto" href="peq-extras.css" type="text/css"><LINK rel="alternate stylesheet" title="tipos grandes" href="tgrandes.css" type="text/css"><LINK rel="stylesheet" href="comun.css" type="text/css">
Aquí tenemos un ejemplo de cascada que incluye tanto al elementoLINK como al
<LINK rel="stylesheet" href="empresa.css" type="text/css"><LINK rel="stylesheet" href="informe.css" type="text/css"><STYLE type="text/css"> p.especial { color: rgb(230, 100, 180) }</STYLE>Una cascada puede incluir hojas de estilo aplicables a medios diferentes.TantoLINK como
En el siguiente ejemplo, definimos un cascada en la cual se incluyen variasversiones de la hoja de estilo "empresa": una diseñada para su impresión,otra para la pantalla y otra para navegadores basados en voz (útil, por ejemplo,para leer correo electrónico en el coche). La hoja de estilo "informe" seaplica a todos los medios. La regla de color definida por el elementoSTYLE se usa para impresoras y pantallas, pero no para la representaciónauditiva.
<LINK rel="stylesheet" media="aural" href="empresa-aural.css" type="text/css"><LINK rel="stylesheet" media="screen" href="empresa-screen.css" type="text/css"><LINK rel="stylesheet" media="print" href="empresa-print.css" type="text/css"><LINK rel="stylesheet" href="informe.css" type="text/css"><STYLE media="screen, print" type="text/css"> p.especial { color: rgb(230, 100, 180) }</STYLE>Cuando el agente de usuario quiere representar un documento, necesitaencontrar valores para las propiedades de estilo, p.ej., la familiatipográfica, el tamaño de fuente, la altura de línea, el color del texto,etc. El mecanismo exacto depende del lenguaje de la hoja de estilo, peroen general es válida la descripción siguiente:
Se utiliza el mecanismo de cascada cuando varias reglas de estilose aplican directamente a un mismo elemento. El mecanismo permite alagente de usuario ordenar las reglas según su especificidad para determinarla regla a aplicar. Si no encuentra ninguna regla, el siguiente paso dependede si la propiedad de estilo puede ser heredada o no. No todas las propiedadesse heredan. Para estas propiedades el lenguaje de la hoja de estilo proporcionaunos valores por defecto que son los que se usan cuando no hay reglasexplícitas para un elemento en particular.
Si la propiedad puede ser heredada, el agente de usuario examina elelemento contenedor inmediato para ver si hay alguna regla que se aplique a él.Este proceso continúa hasta que se encuentra alguna regla aplicable. Estemecanismo permite que las hojas de estilo puedan definirse de una manera compacta.Por ejemplo, los autores pueden especificar la familia tipográfica detodos los elementos contenidos enBODY con una sola regla que se aplique alelementoBODY.
Algunos lenguajes de hojas de estilo soportan sintaxis pensada parapermitir a los autores ocultar el contenido de los elementosSTYLE a los agentes de usuario no conformes.
Este ejemplo ilustra cómo comentar en CSS el contenido de los elementosSTYLEpara asegurarse de que los agentes de usuario antiguos y no conformes nolo representarán como texto.
<STYLE type="text/css"><!-- H1 { color: red } P { color: blue} --></STYLE>Esta sección sólo se aplica a los agentes de usuario conformes conlas versiones de HTTP que definan un campo de encabezado Link. Obsérvese queHTTP 1.1, tal y como se define en[RFC2616], no incluye un campo de encabezado Link (ver sección19.6.3).
Los administradores de servidores web pueden creer conveniente configurarun servidor de modo que una hoja de estilo se aplique a un grupo de páginas.El encabezado HTTPLink tiene el mismo efecto que un elementoLINK con los mismos atributos yvalores. Varios encabezadosLink corresponderían a varios elementosLINK que aparecieran en el mismo orden. Por ejemplo,
Link: <http://www.acme.com/empresa.css>; REL=stylesheet
corresponde a:
<LINK rel="stylesheet" href="http://www.acme.com/empresa.css">
Es posible especificar varias hojas de estilo alternativasespecificando varios encabezadosLink, y a continuaciónutilizar el atributorel para determinar elestilo por defecto.
En el ejemplo siguiente, se aplica "compacto" por defecto, ya queomite la palabra clave "alternate" del atributorel.
Link: <compacto.css>; rel="stylesheet"; title="compacto"Link: <tgrandes.css>; rel="alternate stylesheet"; title="tipos grandes"
Esto debería funcionar cuando se envían documentos HTML porcorreo electrónico. Algunos agentes de correo pueden alterar elorden de los encabezados de[RFC822].Para evitar que esto afecte al orden de cascada de las hojas deestilo especificadas con encabezadosLink, los autores puedenusar la concatenación de encabezados para combinar varias apariciones delmismo campo de encabezado. Las comillas sólo se necesitan si los valoresde los atributos contienen algún espacio en blanco. Utilice entidadesSGML para hacer referencia a caracteres que no se permitan en encabezadosde HTML o de correo electrónico, o que sean susceptibles de resultarafectados por el tránsito a lo largo de la red.
Los elementosLINK yMETA declarados implícitamente porencabezados HTTP aparecen antes de cualquier elemento explícitoLINK oMETA en elHEAD del documento.