Argomenti
I fogli di stile rappresentano il più 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 stato concepito, le persone erano interessate più ai contenuti dei propri documenti che alla loro presentazione. Nel momento in cui il Web venne scoperto da molta gente di ampie e varie vedute, le limitazioni di HTML erano una fonte di frustrazioni continue e gli autori furono forzatamente costretti ad aggirare tali limiti stilistici. Anche se le intenzioni erano buone -- migliorare la presentazione delle pagine Web -- le tecniche utilizzate hanno avuto effetti collaterali sfortunati. Queste tecniche funzionano per alcune persone, qualche volta, ma non per tutte le persone 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 presentazione 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 caratteri 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 media 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 gli interpreti vocali. Queste specifiche permettono di definire le categorie generiche di media a cui un dato foglio di stile è applicabile. Ciò permette agli interpreti di evitare di recuperare fogli di stile inappropriati. I linguaggi per fogli di stile possono includere caratteristiche per la descrizione di dipendenze dal media all'interno del foglio di stile stesso.
La proposta corrente affronta tali questioni permettendo agli autori di includere istruzioni di presentazione all'interno di ogni elemento HTML. Le informazioni di presentazione restano così sempre disponibili nel momento in cui l'interprete vuole presentare 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 semplice per fogli di stile 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 predefinito per i fogli di stile di un documento. Ad esempio, per impostare CSS come linguaggio predefinito, gli autori dovrebbero inserire nella sezione HEAD dei loro documenti la seguente dichiarazione:
<META http-equiv="Content-Style-Type" content="text/css">
Il linguaggio predefinito per fogli di stile può anche essere impostato mediante le intestazioni HTTP. La precedente dichiarazione META è equivalente all'intestazione HTTP:
Content-Style-Type: text/css
Gli interpreti dovrebbero determinare il linguaggio predefinito per fogli di stile 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 predefinito per fogli di stile sono scorretti. Gli strumenti di authoring dovrebbero generare le informazioni sul linguaggio predefinito per fogli di stile (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 dei fogli di stile per le regole di stile in linea è dato dal linguaggio predefinito per fogli di stile. La sintassi dei dati di stile dipende dal linguaggio utilizzato.
Questo esempio imposta informazioni su colore e dimensioni dei caratteri 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 un singolo 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 media -- 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 presentare il contenuto come parte del testo del 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 possono permettere una maggiore varietà di regole, sia 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 lo scopo delle informazioni di stile a una singola istanza 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 presentazione semantica (a parte "a livello blocco" o "in linea"). Quando combinati con i fogli di stile, questi elementi permettono agli utenti di estendere HTML all'infinito, in particolare quando usati con gli attributi class e id.
Nell'esempio seguente, usiamo l'elemento SPAN per impostare il carattere delle prime 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 prime 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 progettare documenti che traggano vantaggio dalle caratteristiche del media dove il documento sarà presentato (ad es. visualizzatori grafici, schermi televisivi, dispositivi palmari, interpreti 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 istanze saranno di colore blu. In una stampa, tutte le istanze saranno allineate al centro del foglio.
<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 media è particolarmente interessante quando applicato a fogli di stile esterni poiché gli interpreti possono risparmiare tempo recuperando dalla rete solo quei fogli di stile che si applicano al dispositivo corrente. Per esempio, gli interpreti a controllo vocale possono evitare di scaricare fogli di stile disegnati per la presentazione grafica. Si veda il paragrafo sulle cascate dipendenti dal media 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 dei 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 dimensione maggiore). Gli interpreti dovrebbero permettere agli utenti di selezionare tra i vari fogli di stile alternativi.
Gli autori possono specificare che una delle alternative è 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, per primo specifichiamo un foglio di stile persistente locato 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" (vedere l'esempio precedente), gli autori potrebbero includere la seguente linea nella sezione 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 collocate all'inizio della sezione HEAD del documento a questo proposito.
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 una sequenza di elementi LINK e/o STYLE. L'informazione di stile è posta in cascata nell'ordine in cui gli elementi appaiono nella sezione 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 che 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 interpreti vocali (utile, ad esempio, per leggere la posta elettronica in auto). Il foglio di stile "techreport" si applica a tutti i mezzi. La regola di colore definita dall'elemento STYLE è usata per la stampa e lo schermo ma non per la presentazione audio.
<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 presentare un documento, ha bisogno di trovare i valori per le proprietà di stile, ad esempio la famiglia di caratteri, il loro stile, la dimensione, l'altezza della linea, il colore del testo e così via. Il meccanismo esatto dipende dal linguaggio del foglio di stile, ma la descrizione che segue è generalmente applicabile.
Il meccanismo della cascata è usato quando un certo numero di regole di stile è applicato 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 dei fogli di stile fornisce i valori predefiniti da usare quando non ci sono specifiche regole per un particolare elemento.
Se la proprietà può essere ereditata, l'interprete esamina l'elemento accluso per vedere se una regola si applica ad esso. 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 una sintassi volta a permettere agli autori di occultare il contenuto degli elementi STYLE agli interpreti non comformi.
Questo esempio illustra, per i CSS, come escludere un commento dal contenuto degli elementi STYLE per assicurarsi che gli interpreti più vecchi e non comformi non li presentino 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 le gateway.
Gli elementi LINK e META implicati in intestazioni HTTP sono definiti come se occorrano prima di qualsiasi elemento LINK e META esplicito nell'HEAD dei documenti.