E' interessante osservare che è possibile applicare uno stesso foglio stile a più pagine html. In tale modo si può formattare allo stesso modo un gruppo di pagine o, addirittura, un intero sito.
Analogamente con questa tecnica si può cambiare la formattazione di tutto un sito (esempio il tipo di font usato per i caratteri) semplicemente modificando poche righe di codice in un foglio stile).
Un'altra possibilità è quella di usare più di un foglio stile per la stessa pagina, in modo da formattare la pagina diversamente a seconda del dispositivo su cui verrà visualizzata o a seconda che debba essere visualizzata su uno schermo o stampata su carta. Ciò può essere ottenuto con l'attributo media usato nel seguente modo:
...
<link rel="stylesheet" media="screen" href="stile_schermo.css">
<link rel="stylesheet" media="print" href="stile_stampa.css">
</head>
Si osservi che, nell'esempio precedente, vengono specificati due fogli stile per la stessa pagina: uno che contiene le regole da applicare per la visualizzazione su schermo (media="screen") e l'altro con quelle per la stampa su carta (media="print").
Il dispositivo che utilizza la pagina (tecnicamente si chiama "user agent", per esempio il nostro browser su un PC desktop) sceglierà quale foglio stile applicare a seconda dei casi.
I valori possibili dell'attributo media sono mostrati nella tabella seguente:
| Valore | Descrizione |
|---|---|
all |
valore di default (il foglio stile si applica in tutti i casi) |
screen |
schermo di computer |
print |
pagina stampata |
projection |
presentazioni e proiezioni |
speech |
dispositivi a sintesi vocale |
braille |
supporti basati sull’uso del braille |
embossed |
stampanti braille |
handheld |
dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche |
tty |
dispositivi a carattere fisso come i terminali |
tv |
visualizzazione su schermi televisivi |
E' anche interessante la possibilità di fornire più fogli stile alternativi per la stessa pagina, permettendo all'utente di scegliere quello che preferisce. Per ottenere questo risultato si fa così:
<link rel="stylesheet" type="text/css" href="http://example.com/css/blue.css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="http://example.com/css/pink.css"
title="pink">
Si noti il nome attribuito ai due fogli stile con l'attributo title. Il primo foglio stile è quello di default, cioè usato in automatico. Il secondo (indicato con alternate stylesheet) può essere selezionato dall'utente in alternativa al primo. Occorre dire però che al momento attuale non tutti i browser offrono la possibilità di cambiare il foglio stile in modo semplice. Spesso è necessario utilizzare a questo scopo delle estensioni esterne.
In Firefox la scelta di fogli stile alternativi (se disponibili per una data pagina) è particolarmente semplice: basta scegliere il fogli stile desiderato da un elenco che si trova in Visualizza/Stile pagina (se la barra dei menu non viene visualizzata, premere prima F10):
Nella stessa pagina web è possibile usare insieme: stili inline, stili incorporati e fogli stile. Nel caso che ci siano più regole per uno stesso elemento, gli stili inline prevalgono sugli stili incorporati e questi ultimi prevalgono sui fogli stile.
Inoltre esiste anche la possibilità da parte dell'utente di sostituire i fogli stile con stili da lui definiti (anche in questo caso è probabilmente necessario ricorrere ad apposite estensioni dei browser principali). Questa possibilità è molto utile per utenti con esigenze particolari (esempio ipovedenti, che necessitano di dimensioni, colori e font particolari).
Questa successione gerarchica di stili e di fogli stile è ciò che viene propriamente definito come cascading style sheet (fogli stile in cascata o CSS). Si noti che, in ultima analisi, l'utente può decidere di applicare i propri file stile alla pagina, modificandone a piacere l'aspetto grafico (CSS applied by the user). Questo risultato, molto utile per coloro che hanno particolari disabilità o problemi visivi, può essere ottenuto con particolari estensioni presenti per i maggiori browser.
Vediamo ora un semplice esempio di fogli stile in cascata:
<html>
<head>
<meta charset="utf-8">
<title>Pagina con foglio stile esterno e incorporati</title>
<link href="fogliostile.css" rel="stylesheet" type="text/css">
<style type="text/css">
h1 { font-size:24px; font-family:arial; color:blue }
</style>
</head>
<body>
<h1>TITOLO UNO </h1>
<p> Paragrafo uno </p>
<h1 style="font-size:20px; font-family:helvetica; color:red"> TITOLO
DUE </h1>
<p class="piccolo"> Paragrafo due </p>
</body>
</html>
Supponiamo che fogliostile.css contenga le regole viste prima:
p { font-size:16px; font-family:arial; color:red }
.piccolo { font-size:12px; font-family:arial; color:red }
In questo caso:
- TITOLO UNO viene formattato secondo le regole definite nel foglio stile incorporato nella pagina (le regole definite nel foglio stile esterno vengono ignorate)
- Paragrafo uno viene formattato secondo le regole definite nel foglio stile css
- TITOLO DUE viene formattato secondo le regole definite dallo stile inline (le regole definite nel foglio stile esterno e in quello incorporato vengono ignorate)
- Paragrafo due viene formattato secondo le regole della classe piccolo definita nel foglio stile css
Segnaliamo anche il validatore di fogli stile CSS online, molto utile per controllare gli errori presenti nei fogli stile.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
