Una página web se puede vincular a más de una hoja de estilo. Puedes elegir qué enlace o enlace al usuario:
En la página web (<head>), la etiqueta <link /> está asociada con la página de estilo a través del atributo href:
<link href="estilo.css" rel="stylesheet" type="text/css" />Se puede vincular a más de una página, con cada <link /> vamos a declarar una diferente:
<link href="estilo1.css" rel="stylesheet" type="text/css" /><link href="estilo2.css" rel="stylesheet" type="text/css" />En este caso, el navegador realiza ambas hojas de estilos simultáneamente. Si una de las etiquetas aparece repetida, se utilizará la última.
Las hojas de estilo alternativas tienen el atributo de título y tienen un valor diferente, bastará:
<link href="estilo1.css" rel="stylesheet" type="text/css" title="Hoja 1"/><link href="estilo2.css" rel="stylesheet" type="text/css" title="Hoja 2"/>De conformidad con las disposiciones de HTML 4.0, hojas de estilo alternativas deben definirse de las siguientes maneras:
<link href="estilo1.css" rel="stylesheet" type="text/css" title="Hoja 1"/><link href="estilo2.css" rel="alternate stylesheet" type="text/css" title="Hoja 2"/>La selección de hojas de estilo se realiza en Firefox mediante el menú Ver > Estilo de página. Las opciones de este menú dependen de los atributos de las hojas de estilo enlazadas.
La selección de hojas de estilo se realiza en Internet Explorer mediante el menú Ver > Estilo. Las opciones de este menú dependen de los atributos de las hojas de estilo enlazadas.
Google Chrome no permite elegir hojas de estilo alternativas, aunque se pueden instalar extensiones como AltCSS para añadir esta funcionalidad.
Como Internet Explorer 7 y anteriores no permitían seleccionar las hojas de estilo alternativas o desactivar la hoja de estilo, hubo gente que ideó un mecanismo similar pero programado en JavaScript que sí que funcionara en IE. Existen varias maneras de hacerlo y la explicación que se ofrece a continuación está basada en la idea de Paul Sowden. Dado que las versiones de Internet Explorer anteriores a IE8 tienen un uso residual, ya no es necesario recurrir a "trucos" así.
La idea es que al cargar la página, se identifiquen las hojas de estilo alternativas que están declaradas en la página web y asociar eventos a algunos elementos que provoquen el cambio de la hoja de estilo aplicada.
Para que el script se cargue junto con la página, se debe insertar un bloque <script> en la cabecera <head> que apunte al archivo styleswitcher.js, que debe estar en la ruta indicada en el atributo src (descarga styleswitcher.js).
<head> . . . <script type="text/javascript" src="styleswitcher.js"> </script> . . .</head>Las hojas de estilo que vayan a utilizarse se declaran como se hace cuando se definen hojas de estilo alternativas.
<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"/>
Para cada hoja de estilo se debe crear un enlace "ficticio" que no apunte a ningún destino, pero que tenga establecido el atributo de evento onclick (o cualquier otro evento) que llame a la función que se encarga de cambiar la hoja de estilo (el argumento de la función es el atributo title del enlace a la hoja de estilo).
<a onclick="setActiveStyleSheet('Hoja 1'); return false;" href="">Texto</a> <a onclick="setActiveStyleSheet('Hoja 2'); return false;" href="">Texto</a>
Al hacer clic en esos enlaces ficticios, se cambiará automáticamente de hoja de estilo.