| |
|---|
|
|
Hay muchas maneras de enlazar hojas de estilo a HTML, cada una con sus ventajas y desventajas. Se han introducido nuevos elementos y atributos HTML para permitir la fácil incorporación de hojas de estilo en documentos HTML.
IR A PORTAFOLIO
Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:
La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El atributo opcional TYPE se usa para especificar un tipo de medio --text/css para una hoja de estilo en cascada-- permitiéndole a los navegadores omitir los tipos de hoja de estilo que no soportan. También es una buena idea configurar el servidor para enviar text/css como Content-type para archivos CSS.
Las hoja de estilo externas no debrían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debería consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista de
P { margin: 2em }
podría usarse como una hoja de estilo externa.
La etiqueta <LINK> también toma un atributo opcional MEDIA, que especifica el medio o medios en que debería aplicarse la hoja de estilo. Los valores posibles son
- screen (valor por defecto), para presentación en pantallas de computadoras no-paginadas;
- print, para salida a una impresora;
- projection, para presentaciones en proyectores;
- aural, para sintetizadores de voz;
- braille, para presentación en dispositivos braille;
- tty, para pantalla en celda de caracteres (usando una fuente de inclinación fija);
- tv, para televisores;
- all, para todos los dispositivos de salida.
Medios múltiples se especifican mediante una lista separada por comas, o por el valor all.
Netscape Navigator 4.x ignora incorrectamente cualquier hoja de estilo enlazada o incrustada declarada con valores MEDIA diferentes de screen. Por ejemplo, MEDIA="screen, projection" provocará que la hoja de estilo sea ignorada por Navigator 4.x, aun si el dispositivo de presentación es una pantalla de computadora. Navigator 4.x también ignora hojas de estilo declaradas con MEDIA=all.
El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras que REL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo. La ausencia del atributo TITLE, como en la primera etiqueta <LINK> en el ejemplo define un estilo persistente.
Un estilo preferido es uno que se aplica automáticamente, como en la segunda etiqueta <LINK> en el ejemplo. La combinación de REL=StyleSheet y un atributo TITLE especifica un estilo preferido. Los autores no pueden especificar más de un estilo preferido.
Un estilo alterno se indica por REL="Alternate StyleSheet". La tercera etiqueta <LINK> en el ejemplo define un estilo alterno, que el usuario podría elegir para reemplazar la hoja de estilo preferido.
Note que los navegadores actuales generalmente carecen de la capacidad de elegir estilos alternos.
Un estilo simple también puede ser dado mediante múltiples hojas de estilo:
<LINK REL=StyleSheet HREF="tablas.css" TITLE="Contemporaneo">
<LINK REL=StyleSheet HREF="formas.css" TITLE="Contemporaneo">
En este ejemplo, tres hojas de esilo son combinadas en un estilo "Contemporaneo" que se aplica como una hoja de estilo preferido. Para combinar múltiples hojas de estilo en un estilo único, se debe usar el mismo TITLE con cada hoja de estilo.
Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externo, un autor podría cambiar la apariencia de un sitio completo mediante el cambio de un solo archivo. Además, la mayoría de navegadores guardan en caché las hojas de estilo externas, evitando así una demora en la presentación una vez que la hoja de estilo se ha guardado en caché.
Microsoft Internet Explorer 3 para Windows 95/NT4 no soporta imágenes o colores de fondo(background) en BODY desde hojas de estilo enlazadas. Con este defecto, los autores podrían querer tener otro mecanismo para incluir una imagen o color de fondo, como incrustando o usando el estilo en línea, o usando el atributo BACKGROUND del elemento BODY.
IR A PORTAFOLIO
Una hoja de estilo puede incrustarse en un documento con el elemento STYLE:
<STYLE TYPE="text/css" MEDIA=screen><!-- BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black } .nota { margin-left: 5em; margin-right: 5em } --></STYLE>
La etiqueta <STYLE> se coloca en la cabecera HEAD del documento. El atributo requerido TYPE se usa para especificar un tipo de medio, así como su función con el elemento LINK. En forma similar, los atributos TITLE y MEDIA también pueden especificarse con STYLE.
Los navegadores más antiguos, que ignoran el elemento STYLE normalmente mostrarían su contenido como si fuera parte de BODY, haciendo así visible la hoja de estilo para el usuario. Para evitarlo, el contenido del elemento STYLE está contenido dentro de un comentario SGML (<!-- comentario -->), como en el ejemplo precedente.de arriba.
Debería usarse una hoja de estilo incrustada cuando un único documento tiene un único estilo. Si la misma hoja de estilo se usa en múltiples documentos, entonces sería más apropiada una hoja de estilo externa.
Una hoja de estilo puede ser importada con la sentencia @import de CSS. Esta sentencia puede usarse en un archivo CSS o dentro del elemento STYLE:
<STYLE TYPE="text/css" MEDIA="screen, projection"><!-- @import url(http://www.htmlhelp.com/estilo.css); @import url(/stylesheets/punk.css); DT { background: yellow; color: black } --></STYLE>
Note que otras reglas de CSS pueden aún estar incluidas en el elemento STYLE, pero todas las sentencias @import deben ocurrir al inicio de la hoja de estilo. Cualquier regla especificada en la misma hoja de estilo prevalecerá sobre reglas contradictorias en las hojas de estilo importadas. Por ejemplo, inclusive si una de las hojas de estilo importadas contuviera DT { background: aqua}, los términos de definición aún tendrían un fondo amarillo.
El orden en el que las hojas de estilo son importadas es importante para determinar como trabajan en cascada. En el ejemplo de arriba, si la hoja de estilo importada estilo.css especifica que los elementos STRONG se muestren en rojo y la hoja de estilo punk.css especifica que los elementos STRONG se muestren en amarillo, la última regla prevalecería, y los elementos STRONG serían amarillos.
Las hojas de estilo importadas son útiles para fines de modularidad. Por ejemplo, un sitio puede separar diferentes hojas de estilo por los selectores usados. Puede haber una hoja de estilo simple.css que dé las reglas para elementos comunes como BODY, P, H1y H2. Además, puede haber una hoja de estilo extra.css que de reglas para los elementos menos comnes como CODE, BLOCKQUOTE y DFN. Una hoja de estilo tablas.css puede usarse para definir reglas para elementos tabla. Estas tres hojas de estilo podrían ser incluidas en documentos HTML con la sentencia @import. Las tres hojas de estilo también podrían ser combinadas mediante el elemento LINK.
IR A PORTAFOLIO
Puede usarse estilos en línea mediante el atributo STYLE. El atributo STYLE puede ser aplicado a cualquier elemento BODY (incluyendo el mismo BODY) excepto para BASEFONT, PARAM y SCRIPT. El atributo toma como su valor, cualquier número de declaraciones CSS, donde cada declaración está separada por un punto y coma. Ejemplo:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">Este párrafo usa estilos en rojo con la fuente New Century Schoolbook, si está disponible.</P>
Note que New Century Schoolbook está en comillas simples en el atributo STYLE, ya que las comillas dobles se usan para contener las declaraciones de estilo.
El estilo en línea es mucho más inflexible que los otros métodos. Para suar estilo en línea, se debe declarar un único lenguaje de hojas de estilo para el documento completo usando la extensión de cabecera HTTP Content-Style-Type. Con CSS en línea, un autor debe enviar text/css como la cabecera HTTP Content-Style-Type o incluir la siguiente etiqueta en la cabecera HEAD:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Los estilos en línea pierden muchas de las ventajas de las hojas de estilo al mezclar contenido con presentación. Así mismo, los estilos en línea se aplican implícitamente a todos los medios, ya que no hay un mecanismo para especificar el medio deseado para un estilo en línea. Este método debería usarse con moderación, como cuando se aplica un estilo en todos los medios para una sola ocurrencia de un elemento. Si el estilo debe aplicarse a un único elemento pero solo con cierto medio, use el atributo ID en lugar del atributo STYLE.
IR A PORTAFOLIO
Pocos documentos con estilos CSS se validarán en el nivel HTML 3.2 (Wilbur).
HTML 3.2 no define el elemento SPAN, ni los atributos CLASS, STYLE o ID, y también carece de soporte para los atributos TYPE y MEDIA en los elementos LINK y STYLE.
Estos elementos relacionados con estilos no son negativos para navegadores que no los soportan, ya que son ignorados en forma segura. Los documentos que usen estos elementos y atributos pueden validarse contra >HTML 4.0.
