# Hojas de estilo alternativas

Una página web puede tener enlazadas varias hojas de estilo distintas para que el usuario elija cuál se aplica. En Mozilla, el menú "View > Use style" te permite elegir la hoja de estilo a aplicar. 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, por lo que tendrás que utilizar la vista Estructura o editar el código fuente para incorporar hojas de estilo alternativas a una página web.

## Definir hojas de estilo aternativas

En una página web, la etiqueta <link> situada en la cabecera (<head>) indica la ubicación y nombre de la hoja de estilo enlazada mediante el atributo href :

`<link href="nombre_del_archivo.css" rel="stylesheet" type="text/css" />`

Se pueden enlazar dos o más hojas de estilo, con lo que el código fuente contendrá tantas etiquetas <link> como hojas enlazadas:

`<link href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" />`

`<link href="nombre_de_archivo_2.css" rel="stylesheet" type="text/css" />`

Como el atributo rel tiene el mismo valor (stylesheet), el navegador aplica simultáneamente 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.

En Amaya puedes enlazar o borrar enlaces a todas las hojas de estilo utilizando los menús Estilo > Enlazar hoja de estilo y Estilo > Borrar enlace a hoja de estilo.

Para que sean hojas de estilo alternativas, es decir, para que el usuario pueda elegir en el navegador qué hoja de estilo quiere aplicar, es necesario que:

- sólo una de las hojas de estilo tenga el atributo rel="stylesheet" y las demás tengan el atributo rel="alternate stylesheet".
- las hojas de estilo tengan el atributo title, para que en el navegador se pueda elegir entre una u otra.

`<link href="nombre_de_archivo_1.css" rel="stylesheet" type="text/css" title="Hoja 1"/>`

`<link href="nombre_de_archivo_2.css" rel="alternate stylesheet" type="text/css" title="Hoja 2"/>`

Como navegador, Amaya no maneja hojas de estilo alternativas, aunque puedes preparar el código para que las hojas de estilo aternativas funcionen en el navegador. Para ello, empieza enlazando todas las hojas de estilo (en Amaya se aplica la última añadida).. A continuación, modifica el atributo rel y añade o modifica el atributo title.

Puedes editar el código fuente de la página web o utilizar la vista estructura (que se abre con el menú Ver > Estructura). Una vez en la vista estructura, selecciona la etiqueta link y en el menú Atributos, edita los atributos rel y title. Cierra la vista estructura y guarda la página en Amaya (en la vista estructura no puedes guardar la página).

## Hojas de estilo alternativas en Mozilla

La selección de hojas de estilo se realiza en Mozilla mediante el menú "View > Use style". Las opciones de este menú dependen de la versión de Mozilla y de los atributos de las hojas de estilo enlazadas. En las últimas versiones de Mozilla (por lo menos, a partir de la versión 1.8 alpha 4):

- si la hoja (u hojas) de estilo enlazada tiene el atributo rel="stylesheet" , pero no tiene el atributo title, el menú muestra las opciones: "Default Style" y "None". Si eliges None, Mozilla muestra la página sin aplicar la hoja de estilo. Si quieres volver a aplicar la hoja de estilo, elige "Default Style".
- si la hoja (u hojas) de estilo enlazada tiene el atributo rel="stylesheet" y además tiene el atributo title, el menú muestra las opciones: "None" y el título de la hoja de estilo. Si eliges None, Mozilla muestra la página sin aplicar la hoja de estilo. Si quieres volver a aplicar la hoja de estilo, elige la otra opción.
- si una hoja (u hojas) de estilo enlazada tiene el atributo rel="stylesheet" y el resto tiene el atributo rel="alternate stylesheet" (y todas tienen. además tiene el atributo title), el menú muestra las opciones: "None" y todos los títulos de las hojas de estilo. Si eliges None, Mozilla muestra la página sin aplicar la hoja de estilo. Si quieres aplicar cualquier hoja de estilo, elige la opción correspondiente.