Volver al índice Hojas de estilo alternativas

Una página web puede tener varias hojas de estilo diferentes enlazadas para que el usuario elija la que prefiera. En Mozilla, el menú "View > Use style" te permite elegir la hoja de estilo. Internet Explorer no permite elegir entre hojas de estilo alternativas, aunque se puede simular este mecanismo a través de JavaScript, como explica Paul Sowden.

Amaya no permite elegir entre hojas de estilo alternativas, ni tampoco hay opciones en los menús para crear las etiquetas correspondientes, pero sí que puedes editar el código fuente para conseguir que funcionen las hojas de estilo en el navegador.

Cuando enlazas una hoja de estilo, Amaya añade a la cabecera (head) la siguiente etiqueta link, en la que el atributo href indica la ubicación y nombre de la hoja de estilo enlazada:

<link xmlns:xlink="http://www.w3.org/1999/xlink" href="nombre_del_archivo.css" rel="stylesheet" type="text/css" />

En Amaya puedes enlazar dos o más hojas de estilo, con lo que el código fuente contendrá tantas etiquetas link como hojas enlazadas:

<link xmlns:xlink="http://www.w3.org/1999/xlink" href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" />

<link xmlns:xlink="http://www.w3.org/1999/xlink" href="nombre_de_archivo_2.css" rel="stylesheet" type="text/css" />

Como el atributo rel tiene el mismo valor (stylesheet), el navegador aplicará las dos hojas de estilo a la página web. Si un elemento está definido en las dos hojas, el navegador hará lo que diga la última hoja de estilo de la lista.

Si lo que quieres es que se aplique una u otra hoja de estilo, pero solamente una de ellas, debes editar el código fuente y dejarlo así:

<link xmlns:xlink="http://www.w3.org/1999/xlink" href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" />

<link xmlns:xlink="http://www.w3.org/1999/xlink" href="nombre_de_archivo_2.css" rel="alternate stylesheet" type="text/css" title="Hoja 2"/>

Debes modificar el atributo rel de las hojas de estilo alternativas (alternate stylesheet) y tienes que definir el atributo title (el nombre aparecerá en el menú "View > Use style" de Mozilla).

La hoja de estilo cuyo atributo rel sea stylesheet será la que se aplique por defecto y en el menú de Mozilla se denominará "Basic Page Style". Si añades también el atributo title a la hoja de estilo por defecto, entonces en el menú de Mozilla la opción "Basic Page Style" hará que no se aplique ninguna hoja de estilo.

Autor: Bartolomé Sintes Marco
Última modificación: 4 de abril de 2003