Come fornire le indicazioni di stile
Finora abbiamo accennato alla sintassi CSS, ma non abbiamo ancora visto come associare le regole CSS a una pagina XHTML. Nei paragrafi che seguono esploreremo le diverse possibilità. Torneremo più avanti sulla sintassi dei CSS.
Fogli di stile esterni
La soluzione che spesso risulta più pratica è quella di creare un file esterno che contenga tutte le indicazioni di stile e che abbia estensione .CSS.
Questo file potrà essere richiamato da tutte le pagine in cui occorre senza la necessità di riscrivere le regole di stile ogni volta. I vantaggi sono molti, ci limitiamo a segnalarne alcuni:
- uniformità formale di tutte le pagine in cui questo file è richiamato;
- facilità di “restyling” delle pagine. Basta modificare il file con le indicazioni di stile per rinnovare completamente l'aspetto di tutte le pagine a cui tale file è applicato.
Ma quale dev'essere la struttura del file .CSS? È molto semplice. Dovete solo inserire le regole di stile, una dopo l'altra, per esempio così:
body {font-size: 10pt;}
a:link {text-decoration: none; color: #006600;}
a:hover {text-decoration: underline; color: #006600;}
a:visited {color: #009900; text-decoration: none;}
table {font-size: 9pt; }
h1 {font-size: 12pt; color: #006600;}
Una volta salvato, il foglio di stile va importato nella pagina XHTML che deve essere formattata. Basterà aggiungere alla sezione <head> della pagina la riga che segue:
<link rel="stylesheet" href="stile.css" type="text/css">
Dove il valore dell’attributo href è il nome del foglio di stile che vogliamo incorporare (in questo caso stile.css). È possibile richiamare in una pagina più fogli di stile esterni. In caso di conflitto, prevalgono le regole del foglio importato per primo.
Fogli di stile interni
Se preferite inserire le indicazioni di stile direttamente all’interno della pagina XHTML da modificare, potete ricorrere al tag <style>, da inserire nella sezione <head> della pagina.
Tutte le regole di stile vanno inserite fra la coppia di tag <style> </style>. Le indicazioni di stile espresse in questo modo saranno valide per tutta la pagina. Facciamo un esempio:
<head> ...
<style type="text/css">
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
h1 { font-size: 12pt; color: #FF0000; }
</style>
</head>
Stili in linea
CSS e XHTML ci permettono anche di specificare le indicazioni di stile “in linea”, cioè all’interno dei normali tag XHTML, utilizzando l’attributo style.
Il valore dell’attributo style sarà proprio la regola di stile, priva, ovviamente, del selettore. Per esempio, per indicare che uno specifico paragrafo deve avere un rientro a sinistra e a destra di 0,50 inch possiamo scrivere:
<p style="margin-left:0.50in; margin-right:0.50"> contenuto del paragrafo </p>
Se volete specificare in linea lo stile di una porzione di testo più corta di un paragrafo potete ricorrere al tag <span>, in questo modo:
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nunc turpis, venenatis non, laoreet at, fringilla nec, purus. Sed sodales.
Sed <span style="font-size: 14pt; color: #6600FF;">turpis</span>.
Vestibulum sagittis justo id metus </p>
Conflitti
In caso di contrasto, con gli stili definiti a livello di pagina o in un file esterno, lo stile in linea prevale su quello indicato a livello di pagina, che, a sua volta, prevale su un foglio di stile in un file esterno. Di qui il nome fogli di stile in sequenza. Come per le proprietà, insomma, vale la regola per cui prevale il più specifico.
In una stessa pagina XHTML si possono usare indicazioni di stile ricorrendo a due o anche a tre metodi diversi. Per esempio, è possibile che, creando un sito web, si definiscano in un foglio di stile esterno elementi comuni a tutte le pagine (questo garantisce una certa uniformità ed evita di ripetere in ogni pagina tutte le indicazioni); nelle singole pagine si indicheranno poi gli elementi di stile specifici per quella singola pagina. Altre indicazioni di stile ancora più specifiche, poi, potranno essere fornite in linea.
Fogli di stile alternativi
Un aspetto interessante dei fogli di stile è che è possibile definire un foglio di stile base e altri fogli di stile “alternativi” che possono essere sostituiti a quello base in caso di necessità. Per la verità solo Firefox supporta questa tecnologia in modo completo, ma dato che si tratta di una funzione interessante (immaginate anche solo la possibilità di fornire un foglio di stile con caratteri più grandi per gli utenti con problemi di vista) ne parleremo un po’.
Cominciamo con lo spiegare come specificare dei fogli di stile alternativi. Basterà assegnare all’attributo rel del tag <link> il valore alternate stylesheet, così:
<link href="stile.css" rel="stylesheet" type="text/css" />
<link href="stileGrande.css" rel="alternate stylesheet" type="text/ css" title="Grande" />
<link href="stilePiccolo.css" rel="alternate stylesheet" type="text/ css" title="Piccolo" />
Ora, se usate Firefox o Opera 7, per aprire una pagina che contiene stili di questo tipo potrete scegliere Visualizza > Stile Pagina o Visualizza > Stile per visualizzare un sottomenu da cui scegliere lo stile alternativo che desiderate, come visibile in figura 2.
Figura 2: cambiare foglio di stile con Firefox (a sinistra) e Opera
Notate che le voci del sottomenu sono costruite usando il valore dell’attributo title del tag <link>.
È possibile utilizzare Javascript per costruire dei collegamenti sulla pagina che vi permettono di cambiare il foglio di stile in uso. Anche se in questo articolo non ci occupiamo di Javascript, vi proponiamo un codice di esempio che funziona con Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Cambia stile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stile.css" rel="stylesheet" type="text/css" title="Normale" />
<link href="stileGrande.css" rel="alternate stylesheet" type="text/css" title="Grande" />
<link href="stilePiccolo.css" rel="alternate stylesheet" type="text/css" title="Piccolo" />
<script language="javascript">
function stileGrande() { document.styleSheets[2].disabled=true; document.styleSheets[1].disabled=false;
}
function stilePiccolo() { document.styleSheets[1].disabled=true; document.styleSheets[2].disabled=false;
}
function stileNormale() { document.styleSheets[1].disabled=true; document.styleSheets[2].disabled=true;
} </script>
</head>
<body> ... ...
<a href="#" onClick="stileGrande();"> Grande</a>
<br/> <a href="#" onClick="stilePiccolo();"> Piccolo</a>
<br/> <a href="#" onClick="stileNormale();"> Normale</a> <br/>
</body>
</html>
Fogli di stile specifici per diversi media
Un altro aspetto interessante dei fogli di stile è la possibilità di cambiare automaticamente il foglio di stile applicato a seconda del media che si sta utilizzando.
Il caso più comune è quello di predisporre un foglio di stile per la visualizzazione a video e uno dedicato alla stampa. Basterà aggiungere l’attributo media al tag <link> che carica il foglio di stile.
<link href="stile.css" rel="stylesheet" type="text/css" media="screen" />
<link href="stileStampa.css" rel="stylesheet" type="text/css" media="print" />
Il foglio di stile definito media="print" è utilizzato anche quando fate l’anteprima di stampa nel browser.
|
