November 23
i fogli di stile a cascata (CSS) forniscono un modo semplice e veloce per specificare l'aspetto di documenti scritti in un linguaggio di markup. stili CSS sono più spesso applicato alle pagine web scritte in HTML o XHTML. Con l'uso di JavaScript e un collegamento ipertestuale, gli autori web possono consentire ai visitatori del sito di caricare facilmente un foglio di stile alternativo. Questo secondo foglio può essere utilizzato per fornire aspetto cambia utili, come ad esempio una maggiore contrasto tra i colori di primo piano e di sfondo o un aumento dimensioni dei caratteri.
1 Aggiungere i riferimenti dei fogli di stile per l'intestazione della pagina web. Entrambi i fogli di stile devono essere caricati dalla tua pagina web prima che possano essere attivati. Copia e incolla il codice qui sotto tra i tag <head> tag della pagina:
<Link rel = "stylesheet" href = "one.css" title type = "text / css" = "uno">
<Link rel = "alternate stylesheet" "text / css" title href = "two.css" type = = "due">
Sostituire i nomi dei file di esempio con i nomi reali e le posizioni dei tuoi due fogli di stile.
2 Aggiungere JavaScript per controllare la commutazione stile. Il codice qui sotto, previsto per uso pubblico da thesitewizard.com, svolge due funzioni: il passaggio da un foglio di stile ad un altro e impostando un cookie sul computer dell'utente al fine di garantire i carichi del foglio di stile corretto su ogni pagina del sito che visitano. Creare una riga vuota tra i tag <head> del documento, quindi copiare e incollare il seguente codice su quella linea:
<Script type = "text / javascript">
var style_cookie_name = "stile";
var style_cookie_duration = 30;
Funzione switch_style (css_title)
{
// È possibile utilizzare questo script sul vostro sito gratuitamente a condizione
// Non lo fai a distanza presente avviso o l'URL di seguito. script da
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
var i, link_tag;
for (i = 0, link_tag = document.getElementsByTagName ( "link");
i < link_tag.length ; i++ ) {
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
link_tag[i].title) {
link_tag[i].disabled = true ;
if (link_tag[i].title == css_title) {
link_tag[i].disabled = false ;
}
}
set_cookie( style_cookie_name, css_title, style_cookie_duration );
}
}
Funzione set_style_from_cookie ()
{
var = css_title get_cookie (style_cookie_name);
if (css_title.length) {
switch_style( css_title );
}
}
Funzione set_cookie (cookie_name, cookie_value,
lifespan_in_days, valid_domain )
{
// http://www.thesitewizard.com/javascripts/cookies.shtml
var domain_string = valid_domain ?
("; domain=" + valid_domain) : '' ;
document.cookie = cookie_name +
"=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string ;
}
Funzione get_cookie (cookie_name)
{
// http://www.thesitewizard.com/javascripts/cookies.shtml
var cookie_string = document.cookie ;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match (
'(^|;)[\s]*' +
cookie_name +
'=([^;]*)' );
return decodeURIComponent ( cookie_value[2] ) ;
}
return '' ;
}
</ Script>
3 Aggiungere un comando di carico per il tag body. Individuare il tag di apertura <body> nel codice pagina. Sostituire il tag con il seguente codice:
<Body onload = "set_style_from_cookie ()">
4 Aggiungere collegamenti di commutazione di stile. Ora che i fogli di stile e JavaScript sono in atto, creare i collegamenti che chiamano la funzione di commutazione. Questi collegamenti devono essere codificati nel seguente formato:
<A href = "javascript: void (0);" onclick = "switch_style ( 'one'); return false;" name = "tema" id = "uno"> foglio di stile uno </a>
<A href = "javascript: void (0);" onclick = "switch_style ( 'due'); return false;" name = "a tema" id = "due"> foglio di stile due </a>
Posizionare questi link in cui si desidera individuare i comandi di commutazione foglio di stile. Salvare la pagina e visualizzarlo nel browser. Facendo clic sul primo link carica il foglio di stile originale, mentre sul secondo carica l'alternativa.