Argomenti
I fogli di stile rappresentano un importante passo avanti per i progettisti di pagine Web, poiché espandono le loro possibilità di curare l'aspetto delle pagine. Negli ambienti scientifici in cui il Web era nato, si è preoccupati più del contenuto che della resa dei documenti. Nel momento in cui un pubblico dalle caratteristiche più varie ha scoperto il Web, le limitazioni di HTML erano una fonte di frustrazioni continue e gli autori erano obbligati ad aggirare tali limiti stilistici. Anche se le intenzioni erano buone -- migliorare la resa delle pagine Web -- le tecniche utilizzate hanno avuto effetti collaterali sfortunati. Tali tecniche funzionano per qualcuno, qualche volta, ma non per tutti e sempre. Esse includono:
Queste tecniche accrescono considerevolmente la complessità delle pagine Web, offrono una flessibilità limitata, soffrono di problemi di interoperabilità e creano barriere per le persone disabili.
I fogli di stile risolvono questi problemi nello stesso momento in cui sostituiscono la serie limitata di meccanismi di resa in HTML. I fogli di stile rendono semplice specificare la spaziatura delle righe, i rientri, i colori usati per il testo e gli sfondi, il corpo e lo stile dei font e una moltitudine di altri dettagli.
Ad esempio, il breve foglio di stile CSS che segue (presente nel file "special.css"), imposta sul verde il colore del testo di un paragrafo e lo circonda con un bordo continuo rosso:
P.special {
color : green;
border: solid red;
}
Gli autori possono collegare questo foglio di stile al loro documento sorgente HTML con l'elemento LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">Questo paragrafo dovrebbe avere uno speciale testo verde.
</BODY>
</HTML>
HTML 4.0 supporta le seguenti caratteristiche dei fogli di stile:
I fogli di stile, per contro, si applicano a mezzi specifici o a gruppi di media. Un foglio di stile destinato all'uso su schermo potrebbe essere applicabile alla stampa, ma sarebbe alquanto inutile per i navigatori vocali. Queste specifiche permettono di definire le categorie generiche di mezzi a cui un dato foglio di stile è applicabile. Ciò permette agli interpreti di evitare di scaricare fogli di stile inappropriati. I linguaggi per fogli di stile possono includere elementi per la descrizione di dipendenze dal mezzo all'interno dello stesso foglio di stile.
La proposta corrente affronta tali questioni permettendo agli autori di includere istruzioni sulla resa all'interno di ogni elemento HTML. Le informazioni sulla resa restano così sempre disponibili nel momento in cui l'interprete vuole rendere ogni elemento.
In molti casi, gli autori trarranno vantaggio da un foglio di stile comune per un gruppo di documenti. In questo caso, distribuire le regole di stile lungo il documento porterebbe in realtà a prestazioni peggiori rispetto all'uso di un foglio di stile collegato, poiché per la maggior parte dei documenti il foglio di stile sarebbe già presente nella cache locale. La disponibilità pubblica di buoni fogli di stile incoraggerà questo effetto.
Nota. L'esempio di foglio di stile predefinito per HTML 4.0 incluso in [CSS2] esprime informazioni di stile predefinito generalmente accettate per ogni elemento. Gli autori e gli implementatori allo stesso modo potrebbero trovare qui una risorsa molto utile.
I documenti HTML possono contenere regole di stile direttamente al loro interno o possono importare i fogli di stile.
Si può usare qualsiasi linguaggio per fogli di stile con HTML. Un linguaggio per fogli di stile semplice dovrebbe soddisfare i bisogni della maggior parte degli utenti, ma altri linguaggi potrebbero essere più indicati per usi maggiormente specializzati. Queste specifiche usano il linguaggio per fogli si stile "Cascading Style Sheets" ([CSS1]), CSS in breve, per gli esempi.
La sintassi dei dati di stile dipende dal linguaggio utilizzato.
Gli autori devono specificare il linguaggio usato per le informazioni di stile associate ad un documento HTML.
Gli autori dovrebbero utilizzare l'elemento META per impostare il linguaggio per fogli di stile predefinito di un dato documento. Ad esempio, per scegliere CSS come linguaggio predefinito, gli autori dovrebbero inserire nella HEAD dei loro documenti la seguente dichiarazione:
<META http-equiv="Content-Style-Type" content="text/css">
Il linguaggio per fogli di stile predefinito può anche essere impostato con le intestazioni HTTP. La precedente dichiarazione META è equivalente all'intestazione HTTP:
Content-Style-Type: text/css
Gli interpreti dovrebbero determinare il linguaggio per fogli di stile predefinito di un documento seguendo i seguenti passi (con importanza decrescente):
I documenti che includono elementi che impostano l'attributo style ma che non definiscono un linguaggio per fogli di stile predefinito sono scorretti. Gli strumenti di authoring dovrebbero generare le informazioni sul linguaggio per fogli di stile predefinito (tipicamente una dichiarazione META) in modo che gli interpreti non debbano confidare in "text/css" come linguaggio predefinito.
Definizioni degli attributi
L'attributo style specifica le informazioni di stile per un singolo elemento. Il linguaggio delle regole di stile in linea è dato dal linguaggio per fogli di stile predefinito. La sintassi dei dati di stile dipende dal linguaggio utilizzato.
Questo esempio imposta informazioni su colore e corpo per il testo in un paragrafo specifico.
<P style="font-size: 12pt; color: fuchsia">Non sono favolosi, i fogli di stile?
In CSS, le dichiarazioni di proprietà hanno la forma "nome : valore" e sono separati dal punto e virgola.
L'attributo style può essere utilizzato per applicare un particolare stile a uno specifico elemento HTML. Se lo stile sarà riutilizzato per diversi elementi, gli autori dovrebbero utilizzare l'elemento STYLE per raggruppare tali informazioni. Per una flessibilità ottimale, gli autori dovrebbero definire gli stili in fogli di stile esterni.
<!ELEMENT STYLE - - %StyleSheet -- informazioni di stile --> <!ATTLIST STYLE %i18n; -- lang, dir, da usare con title -- type %ContentType; #REQUIRED -- tipo di contenuto del linguaggio di stile -- media %MediaDesc; #IMPLIED -- progettato per l'uso con questi mezzi -- title %Text; #IMPLIED -- titolo di riferimento -- >
Tag iniziale: richiesto, Tag finale: richiesto
Definizioni degli attributi
Attributi definiti altrove
L'elemento STYLE consente agli autori di inserire le regole di stile nell'intestazione del documento. HTML permette qualsiasi numero di elementi STYLE nella sezione HEAD di un documento.
Gli interpreti che non supportano i fogli di stile, o che non supportano lo specifico linguaggio per fogli di stile usato da un elemento STYLE, devono occultare i contenuti dell'elemento STYLE. È un errore rendere il contenuto come parte del testo di un documento. Alcuni linguaggi per fogli di stile supportano sintassi per nascondere il contenuto agli interpreti non conformi.
La sintassi dei dati di stile dipende dal linguaggio utilizzato.
Alcune implementazioni dei fogli di stile potrebbero permettere una maggiore varietà di regole nell'elemento STYLE che nell'attributo style. Ad esempio, con CSS, le regole possono essere dichiarate all'interno di un elemento STYLE per:
Le regole per le precedenze tra regole di stile ed eredità dipendono dal linguaggio per fogli di stile.
La seguente dichiarazione STYLE CSS pone un bordo attorno a ogni elemento H1 nel documento e lo centra nella pagina.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
Per specificare che queste informazioni di stile dovrebbero applicarsi solo agli elementi H1 di una specifica classe, si modifichi come segue:
<HEAD>
<STYLE type="text/css">
H1.miaclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miaclass"> Questo H1 è influenzato dal nostro stile </H1>
<H1> Questo non lo è </H1>
</BODY>
Infine, per limitare l'oggetto delle informazioni di stile a una singola occorrenza di H1, si imposti l'elemento id:
<HEAD>
<STYLE type="text/css">
#miaid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miaclass"> Questo H1 non è influenzato </H1>
<H1 id="miaid"> Questo H1 è influenzato dallo stile </H1>
<H1> Questo H1 non è influenzato </H1>
</BODY>
Sebbene le informazioni di stile possano essere impostate per quasi tutti gli elementi HTML, due elementi, DIV e SPAN, sono particolarmente utili dal momento che non impongono alcuna semantica di resa (a parte "a livello blocco" o "in linea"). Quando combinati con i fogli di stile, questi elementi permettono agli utenti di estendere HTML indefinitamente, in particolare quando usati con gli attributi class e id.
Nell'esempio seguente, usiamo l'elemento SPAN per impostare il carattere delle primissime parole di un paragrafo in minuscolo.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">Le primissime parole </SPAN> di
questo paragrafo sono minuscole.
</BODY>
Nel seguente esempio, usiamo DIV e l'attributo class per impostare la giustificazione del testo per una serie di paragrafi, che costituiscono la sezione introduttiva di un articolo scientifico. Queste informazioni di stile possono essere riutilizzate per altre sezioni introduttive impostando l'attributo class altrove nel documento.
<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>La linea Chieftain è la nostra ammiraglia per
l'anno prossimo. Questo testo spiega come posizionare
Chieftain in relazione ai prodotti concorrenti.
<P>Chieftain rimpiazza la serie Commander, che resterà
in listino fino a ulteriori comunicazioni.
</DIV>
</BODY>
HTML permette agli autori di disegnare documenti che traggano vantaggio dalle caratteristiche del mezzo da cui il documento deve essere reso (ad es. visualizzatori grafici, schermi televisivi, dispositivi palmari, navigatori vocali, dispositivi tattili basati su braille, ecc.). Specificando l'attributo media, gli autori permettono agli interpreti di caricare e applicare i fogli di stile selettivamente. Si prega di consultare la lista dei descrittori dei media riconosciuti.
Le seguenti dichiarazioni di esempio si applicano agli elementi H1. In una proiezione per un incontro di affari, tutte le loro occorrenze saranno blu. In una stampa, tutte le occorrenze saranno centrate.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
Questo esempio aggiunge effetti sonori alle ancore per l'uso in output vocale:
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
Il controllo del mezzo è particolarmente interessante quando applicato a fogli di stile esterni poiché gli interpreti possono risparmiare tempo scaricando dalla rete solo quei fogli di stile che si applicano al dispositivo corrente. Per esempio, i navigatori a controllo vocale possono evitare di scaricare fogli di stile disegnati per la resa grafica. Si veda il paragrafo sulle cascate dipendenti dal mezzo per maggiori informazioni.
Gli autori possono separare i fogli di stile dai documenti HTML. Ciò offre svariati benefici:
HTML permette agli autori di associare qualsiasi numero di fogli di stile esterni a un documento. Il linguaggio per fogli di stile definisce come fogli di stile esterni multipli interagiscono (ad esempio, le regole di "cascata" CSS).
Gli autori possono specificare un certo numero di fogli di stile mutuamente esclusivi chiamati fogli di stile alternativi. Gli utenti possono selezionare il loro preferito tra questi in base ai loro gusti. Per esempio, un autore potrebbe specificare un foglio di stile disegnato per piccoli schermi e un altro per utenti con difficoltà di vista (es. caratteri di corpo maggiore). Gli interpreti dovrebbero permettere agli utenti di operare una selezione tra i fogli di stile alternativi.
Gli autori possono specificare che una delle alternative costituisce il foglio di stile preferito. Gli interpreti dovrebbero applicare il foglio di stile preferito dall'autore a meno che l'utente abbia selezionato una differente alternativa.
Gli autori possono raggruppare diversi fogli di stile alternativi (inclusi i fogli di stile preferiti dall'autore) sotto un singolo nome di stile. Quando un utente sceglie uno stile con un dato nome, l'interprete deve applicare tutti i fogli di stile con quel nome. Gli interpreti non devono applicare fogli di stile alternativi con un nome di stile diverso. Il paragrafo sulla specificazione di fogli di stile esterni spiega come assegnare un nome a un gruppo di fogli di stile.
Gli interpreti devono rispettare i descrittori dei media all'atto dell'applicazione di un foglio di stile.
Gli interpreti devono anche permettere agli utenti di disabilitare interamente i fogli di stile dell'autore, nel qual caso l'interprete non deve applicare alcun foglio di stile, persistente o alternativo.
Gli autori specificano i fogli di stile esterni con i seguenti attributi dell'elemento LINK:
Gli interpreti dovrebbero dar modo agli utenti di visionare e scegliere dalla lista di stili alternativi. Si raccomanda il valore dell'attributo title come nome di ogni scelta.
In questo esempio, specifichiamo in partenza un foglio di stile permanente presente nel file mystyle.css:
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
Impostare l'attributo title rende questo il foglio di stile preferito dall'autore:
<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
Aggiungere la parola chiave "alternate" all'attributo rel lo rende foglio di stile alternativo:
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
Per maggiori informazioni sui fogli di stile esterni, si prega di consultare il paragrafo su collegamenti e fogli di stile esterni.
Gli autori possono anche usare l'elemento META per impostare il foglio di stile preferito per il documento. Per esempio, per impostare il foglio di stile preferito su "compact" (cfr. l'esempio precedente), gli autori potrebbero includere la seguente linea nell'HEAD:
<META http-equiv="Default-Style" content="compact">
Il foglio di stile preferito può anche essere specificato con le intestazioni HTTP. La dichiarazione META vista sopra è equivalente all'intestazione HTTP:
Default-Style: "compact"
Se due o più dichiarazioni META o intestazioni HTTP specificano il foglio di stile preferito, l'ultimo assume la precedenza. Le intestazioni HTTP sono supposte occorrere prima della HEAD del documento a questo riguardo.
Se due o più elementi LINK specificano un foglio di stile preferito, il primo assume la precedenza.
I fogli di stile preferiti specificati con META o intestazioni HTTP hanno precedenza su quelli specificati con l'elemento LINK.
I linguaggi per fogli di stile a cascata quali CSS permettono di unire informazioni di stile provenienti da diverse fonti. Comunque, non tutti i linguaggi per fogli di stile supportano le cascate. Per definire una cascata, gli autori specificano la sequenza degli elementi LINK e/o STYLE. L'informazione di stile è posta in cascata nell'ordine in cui gli elementi appaiono nell'HEAD.
Nota. Queste specifiche non determinano come i fogli di stile in diversi linguaggi supportano le cascate. Gli autori dovrebbero evitare di mescolare i linguaggi per fogli di stile.
Nel seguente esempio, specifichiamo due fogli di stile alternativi nominati "compact": se l'utente seleziona lo stile "compact", l'interprete deve applicare entrambi i fogli di stile esterni, così come il foglio di stile persistente "common.css". Se l'utente seleziona lo stile "big print", solo il foglio di stile alternativo "bigprint.css" e il foglio di stile persistente "common.css" saranno applicati.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="common.css" type="text/css">
Questo è un esempio di cascata che implica sia l'elemento LINK sia quello STYLE.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Una cascata potrebbe includere fogli di stile applicabili a media differenti. Sia LINK che STYLE possono essere usati con l'attributo media. È compito dell'interprete filtrare quei fogli di stile che non si applicano al medium corrente.
Nel seguente esempio, definiamo una cascata in cui il foglio di stile "corporate" è fornito in diverse versioni: una indicata per la stampa, una per l'uso su schermo e una per navigatori vocali (utile, ad esempio, per controllare la posta elettronica in auto). Il foglio di stile "techreport" si applica a tutti i mezzi. Le regole di colore definite dall'elemento STYLE sono usate per la stampa e lo schermo ma non per la resa auditiva.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Quando l'interprete vuole rendere un documento, ha bisogno di trovare valori per le proprietà di stile, ad esempio la famiglia di caratteri, il loro stile, il corpo, l'altezza della linea, il colore del testo e così via. Il meccanismo esatto dipende dal linguaggio per fogli di stile, ma la descrizione che segue è generalmente applicabile:
Il meccanismo della cascata è usato quando un certo numero di informazioni di stile si applica direttamente a un elemento. Il meccanismo permette agli interpreti di ordinare le regole per specificità, di determinare quale regola applicare. Se nessuna regola è disponibile, il passo successivo dipende dal fatto che le proprietà di stile possano essere ereditate o meno. Non tutte le proprietà possono essere ereditate. Per tali proprietà il linguaggio per fogli di stile fornisce valori predefiniti da usare quando non ci sono regole specifiche per un certo elemento.
Se la proprietà può essere ereditata, l'interprete esamina l'elemento nelle immediate vicinanze per controllare se una regola si applica a quello. Questo processo continua fino al reperimento di una regola applicabile. Questo meccanismo permette ai fogli di stile di essere specificati in modo compatto. Per esempio, gli autori possono specificare la famiglia di caratteri per tutti gli elementi all'interno del BODY (corpo) con una singola regola che si applica all'elemento BODY.
Alcuni linguaggi per fogli di stile supportano sintassi volta a permettere agli autori di occultare il contenuto degli elementi STYLE agli interpreti non compatibili.
Questo esempio illustra, per CSS, come escludere come commento il contenuto degli elementi STYLE per assicurarsi che gli interpreti più vecchi e non compatibili non li rendano come testo.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Gli amministratori di server Web potrebbero trovare conveniente configurare il server così che un foglio di stile venga applicato a un gruppo di pagine. L'intestazione HTTP Link descritta in [RFC2068], paragrafo 19.6.1.2, ha lo stesso effetto di un elemento LINK con gli stessi attributi e valori. Intestazioni multiple Link corrispondono a elementi multipli LINK occorrenti nello stesso ordine. Ad esempio,
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
corrisponde a:
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
È possibile specificare diversi stili alternativi usando intestazioni Link multiple e poi usare l'attributo rel per determinare lo stile predefinito.
Nel seguente esempio, "compact" è applicato come predefinito poiché omette la parola chiave "alternate" per l'attributo rel.
Link: <compact.css>; rel="stylesheet"; title="compact" Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
Ciò dovrebbe ugualmente funzionare quando i documenti HTML sono inviati via posta elettronica. Alcuni interpreti di posta elettronica possono alterare l'ordine delle intestazioni [RFC822]. Per evitare che ciò influisca sull'ordine di cascata per i fogli di stile specificati tramite intestazioni Link, gli autori possono usare la concatenazione delle intestazioni per unificare diverse occorrenze del campo della stessa intestazione. Le virgolette sono necessarie solo quando i valori degli attributi includono spazi. Usare le entità SGML per riferirsi a caratteri che non sarebbero altrimenti permessi all'interno delle intestazioni HTTP o di posta elettronica, o che saranno probabilmente influenzati dal transito attraverso gateway.
Gli elementi LINK e META implicati in intestazioni HTTP sono definiti come se occorressero prima di qualsiasi elemento LINK e META esplicito nell'HEAD del documento.