CSS - Foglio di stile alternativo

Fenice · 16-06-2008, 11.05.57

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

Biagio Di Stefano · 16-06-2008, 15.23.08

Complimenti Stella, non fa una piega e di sicuro tornerà utile anche a me! Potrebbe essere un buon inizio per fare in modo di attirare altri web designer sul forum! Grazie mille!

shape · 26-06-2008, 18.42.55

Credo proprio che sarà veramente utile a me e non solo... grazie Fenice.

16-06-2008, 11.05.57	#1 (permalink)
Fenice New User Data registrazione: 17-05-2008 Messaggi: 16	CSS - Foglio di stile alternativo 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 __________________ "A photographer is a seeker of the marvelous beauties hidden in the world" - 2007 Stellastyles \| Hide & Seek \| My DeviantART \| Mind The Gap

16-06-2008, 15.23.08	#2 (permalink)
Biagio Di Stefano Administrator Data registrazione: 27-02-2008 Residenza: Salerno Messaggi: 2,132	Complimenti Stella, non fa una piega e di sicuro tornerà utile anche a me! Potrebbe essere un buon inizio per fare in modo di attirare altri web designer sul forum! Grazie mille! __________________ Biagio Di Stefano

26-06-2008, 18.42.55	#3 (permalink)
shape Moderator Data registrazione: 29-05-2008 Residenza: Catanzaro Messaggi: 383	Credo proprio che sarà veramente utile a me e non solo... grazie Fenice. __________________ Non so cosa faccio, ma mi piace farlo! shapebureau

Strumenti discussione
Visualizza versione stampabile Invia questa pagina via e-mail
Modalità visualizzazione
Modalità lineare Modalità ibrida Modalità elencata