Ayuda del taller sobre variantes de estilo

El pequeño cuadro de menú en la parte derecha le permite seleccionar la hoja de estilos deseada. Esta selección es una pequeña rutina JavaScript (styleswitcher.js) que se ha almacenado en el subdirectorio /js.

Aquí está el fragmento de código para hacer referencia a los distintos estilos y a la rutina en Javascript:


<link rel="stylesheet" type="text/css" href="css/basis1.css" media="screen, projection" title="Estándar">
<link rel="alternate stylesheet" type="text/css" href="css/blue.css" media="screen, projection" title="Bluesteel">
<link rel="alternate stylesheet" type="text/css" href="css/textonly.css" media="screen, projection" title="Invertido">
<link rel="stylesheet" type="text/css" href="css/druck.css" media="print">
<script type="text/javascript" src="js/styleswitcher.js"></script>

Preste atención a la asignación de diferentes "alternate stylesheet" y "title="..."", así como la asignación de ""media="..."".

Los enlaces son los siguientes:


<ul>
<li><a href="#" onclick="setActiveStyleSheet('EStándar'); return false;">Estándar</a></li>
<li><a href="#" onclick="setActiveStyleSheet('Bluesteel'); return false;">Bluesteel</a></li>
<li><a href="#" onclick="setActiveStyleSheet('Invertido'); return false;">Invertido</a></li>
</ul>

Este "switch" proporciona una funcionalidad adicional. En los navegadores modernos, puede elegir también la hoja de estilos desde el mismo navegador, por lo general en el menú "Ver|Estilo de página", que le ofrece los diferentes estilos y una opinión sin ofrecer estilos.

volver a "Variaciones de estilo"

Índice Capítulo 4
contenido material adicional