Hojas de estilo
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 la versión original del mismo.
Contenidos
1. Introducción a las hojas de estilo
2. Añadir estilos al HTML
1. Especificación del lenguaje de hojas de estilo por defecto
2. Información de estilo en línea
3. Información de estilo en cabecera: el elemento STYLE
4. Tipos de medios
3. Hojas de estilo externas
1. Hojas de estilo preferentes y alternativas
2. Especificación de hojas de estilo externas
4. Hojas de Estilo en Cascada
1. Cascadas dependientes del medio
2. Herencia y cascada
5. Ocultar datos de estilo a los agentes de usuario
6. Vinculación de hojas de estilo mediante encabezados HTTP
14.1 Introducción a las hojas de estilo
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ás preocupada por el contenido de sus
páginas que por su presentación. A medida que 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áginas web --,
las técnicas para conseguirlo han tenido efectos secundarios negativos. Entre estas técnicas, que
dan buenos resultados para algunas personas, algunas veces, pero no siempre ni para todas las
personas, se incluyen:
La utilización de extensiones propietarias del HTML
Conversión del texto en imágenes
Utilización de imágenes para controlar el espacio en blanco
La utilización de tablas para la organización de las páginas
Escribir programas en lugar de usar HTML
Estas técnicas incrementan considerablemente la complejidad de las páginas web, ofrecen una
flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las
personas con discapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al limitado rango
de mecanismos de presentación del HTML. Con las hojas de estilo es más fácil especificar la
cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el
fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.
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 HTML con el elemento
LINK:
<!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 class="especial">Este párrafo debería tener texto especial verde.
</BODY>
</HTML>
HTML 4 soporta las siguientes características de hojas de estilo:
Colocación flexible de la información de estilo
Al colocar las hojas de estilo en ficheros separados es más fácil reutilizarlas. Algunas veces
es útil incluir instrucciones de representación dentro del documento al que se aplican, ya
sea agrupadas al comienzo del documento, o en atributos de los elementos a lo largo del
cuerpo del documento. Para facilitar la gestión de estilos a nivel de sitio, esta
especificación describe cómo utilizar los encabezados HTTP para especificar qué hojas de
estilo se aplican a un documento.
Independencia de lenguajes de hojas de estilo específicos
Cascada
Esta especificación no liga el HTML con ningún lenguaje de hojas de estilo en particular.
Esto permite que se puedan usar otros lenguajes diferentes, desde los lenguajes más
simples válidos para la mayoría de los usuarios, hasta los más complejos, útiles para una
minoría de usuarios con necesidades muy especializadas. Todos los ejemplos que se
incluyen en lo que sigue se sirven del lenguaje CSS (Hojas de Estilo en Cascada,
Cascading Style Sheets, [CSS1]), pero también son posibles otros lenguajes de hojas de
estilo.
Se llama así a la capacidad que proporcionan algunos lenguajes de hojas de estilo tales
como CSS que permiten que las informaciones de estilo provenientes de varias fuentes
puedan combinarse. Éstas podrían ser, por ejemplo, las guías de estilo de una empresa, los
estilos comunes a un grupo de documentos, y los estilos específicos de un documento en
particular. Al almacenarse independientemente, las hojas de estilo pueden reutilizarse, lo
cual simplifica las tareas de diseño y hace más efectiva la utilización de la memoria caché
de la red. La cascada define una secuencia ordenada de hojas de estilo en la que las reglas
de las últimas hojas tienen una prioridad mayor que las de las primeras. No todos los
lenguajes de hojas de estilo soportan la cascada.
Dependencias de los medios
HTML permite a los autores especificar sus documentos de una manera independiente del
medio. Esto permite a los usuarios acceder a las páginas web usando una amplia gama de
dispositivos y medios, p.ej., pantallas gráficas para ordenadores bajo Windows, Macintosh
OS y X11, dispositivos para aparatos de televisión, teléfonos adaptados y dispositivos
portátiles PDA, navegadores basados en voz, y dispositivos táctiles Braille.
Las hojas de estilo, en contraste, se aplican a medios o grupos de medios específicos. Una
hoja de estilo diseñada para una pantalla puede ser aplicable para 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 los que es aplicable una hoja de estilo dada. Esto
permite a los agentes de usuario evitar la descarga de hojas de estilo que no sean
apropiadas. Los lenguajes de hojas de estilo pueden incluir características para describir
dependencias del medio dentro de una misma hoja de estilo.
Estilos alternativos
Consideraciones de rendimiento
Los autores pueden querer ofrecer a los lectores varias maneras diferentes de ver un
documento. Por ejemplo, una hoja de estilo para representar documentos compactos con
fuentes pequeñas, o una que especifique fuentes más grandes para una lectura más fácil.
Esta especificación permite a los autores especificar una hoja de estilo preferente así como
hojas alternativas que se dirijan a medios o usuarios específicos. Los agentes de usuario
deberían dar a los usuarios la oportunidad de seleccionar una de las hojas de estilo
alternativas o incluso de desactivar las hojas de estilo completamente.
Algunas personas han expresado su preocupación acerca de los posibles problemas de
rendimiento relacionados con las hojas de estilo. Por ejemplo, la obtención de una hoja de
estilo externa puede retrasar la presentación del documento al usuario. Algo parecido
sucede si la cabecera del documento contiene un conjunto muy grande de reglas de estilo.
La propuesta actual resuelve estos problemas, pues permite a los autores incluir
instrucciones de representación dentro de cada elemento HTML. Así, la información de
representación siempre estará disponible en el momento en que el agente de usuario quiera
representar cada elemento.
En muchos casos los autores sacarán partido de una hoja de estilo común a un grupo de
documentos. En este caso, la distribución de reglas de estilo a lo largo del documento
conducirá a un rendimiento peor que si se usara una hoja de estilo vinculada, ya que para la
mayoría de los documentos la hoja de estilo ya estará almacenada en la caché local. La
disponibilidad pública de hojas de estilo de calidad potenciará este efecto.
14.2 Añadir estilos al HTML
Nota. La hoja de estilo por defecto del HTML 4 que se incluye en [CSS2] expresa la información
de estilo por defecto generalmente aceptada para cada elemento. Los autores, así como los
implementadores, pueden encontrar 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 lenguaje simple de hojas de
estilo puede ser suficiente para la mayoría de los usuarios, pero para otras necesidades más
especializadas pueden ser apropiados otros lenguajes. Esta especificación utiliza para los ejemplos
el lenguaje de estilo llamado "Hojas de Estilo en Cascada" ("Cascading Style Sheets", [CSS1]),
abreviado CSS.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
14.2.1 Especificación del lenguaje de hojas de estilo por defecto
Los autores deben especificar el lenguaje de hojas de estilo de la información de estilo asociada
con un documento HTML.
Los autores deberían usar el elemento META para especificar el lenguaje de hojas de estilo por
defecto de un documento. Por ejemplo, para especificar que el valor por defecto es CSS, los
autores deberían poner la siguiente declaración en la sección HEAD de sus documentos:
<META http-equiv="Content-Style-Type" content="text/css">
El lenguaje de hojas de estilo por defecto también puede ser establecido con encabezados HTTP.
La declaración META de arriba es equivalente al encabezado HTTP siguiente:
Content-Style-Type: text/css
Los agentes de usuario deberían determinar el lenguaje de hojas de estilo por defecto de acuerdo
con los siguientes pasos (ordenados de mayor a menor prioridad):
1. Si alguna declaración META especifica "Content-Style-Type", la última de ellas en el flujo
de caracteres determina el lenguaj
Crear cuenta
Comentarios de: Hojas de estilo (0)
No hay comentarios