L'utilizzo dei CSS permette di avere dei fogli di stile alternativi, in modo da lasciare libertà di scelta all'utente finale su quale grafica utilizzare.
La sintassi
Per utilizzare il foglio di stile alternativo bisogna specificare il valore "alternate stylesheet" assegnandolo al parametro rel del tag <LINK> :
Codice HTML:
<HTML>
<HEAD>
<TITLE>Alternate Stylesheet Tutorial</TITLE>
<LINK rel="stylesheet" type="text/css" title="style" href="style.css" >
<LINK rel="alternate stylesheet" type="text/css" title="alternatestyle" href="alternatestyle.css">
</HEAD>
<BODY>
....
</BODY>
</HTML>
Implementazione
Dopo aver aggiunto l'importazione del foglio di stile alternativo nel blocco <HEAD></HEAD> non resta che implementare un sistema che ne permetta l'attivazione. Per far questo si puó ricorrere a vari script dinamici, da PHP a Javascript.
Javascript:
Importiamo il seguente codice Javascript in un file chiamato style.js
Codice:
function Attiva(idstyle) {
var style;
for (i=0; (style = document.getElementsByTagName("link")[i]); i++){
if (style.getAttribute("rel").indexOf("style") != -1 && style.getAttribute("title")) {
style.disabled = true;
if (style.getAttribute("title") == idstyle) style.disabled = false;
}
}
}
ed importiamolo nella nostra pagina html inserendo tra i tag <HEAD></HEAD> il seguente codice
Codice HTML:
<script language="JavaScript" src="percorso/style.js" type="text/JavaScript"></script>
Inseriamo due link (in modo da poter switchare fra lo stile principale e lo stile alternativo a piacimento) utilizzando il seguente codice:
Codice HTML:
<a onclick="Attiva('style'); return false;" href="#"> Style 1 </a>
<a onclick="Attiva('alternatestyle'); return false;" href="#"> Style 2 </a>
Tra le parentesi della funzione Attiva dobbiamo richiamare il nome assegnato al parametro title .
Spero possa essere utile 
Rispondi citando
CSS - Foglio di stile alternativo
Regole di scrittura
Bookmarks