Foglio di stile
Da Naturpedia.
I fogli di stile o fogli di stile a cascata - dall'inglese CSS, Cascading Style Sheets - sono un linguaggio di stile che permette di dare una formattazione ad un documento HTML o XHTML. Gli stili sono applicabili anche a file XML, SVG e simili.
Introduzione
I fogli di stile sono un grande passo avanti per i progettisti di pagine Web: il contenuto è separato dalla sua rappresentazione, i tempi di caricamento delle pagine sono molto più bassi, è possibile creare più layout per tipo di dispositivo (stampanti, browser testuali...) con un'unica pagina HTML.
Agli albori dell'Internet, il Web era usato prevalentemente negli ambienti scientifici, i ricercatori lo usavano per divulgare le proprie conoscenze, non erano interessati alla visualizzazione grafica. Inoltre, i mezzi disponibili (la banda larga è nata in questi ultimi anni) esigevano pagine web leggere. Le tabelle venivano usate come tabelle appunto: per contenere ed organizzare dati.
Con l'introduzione da parte di Netscape del tag <img>, sono nati i primi layout grafici: le tabelle annidate dentro altre tabelle sono state impropriamente usate per 'contenere' le immagini, creando anche layout grafici complessi. Inoltre, la diffusione dell'Internet, la facilità e la gratuità dell'HTML, la nascita di editor WYSIWYG ("What You See Is What You Get", ciò che vedi è ciò che otterrai) che permettavano a chiunque di creare pagine web, ha invaso il Web di pagine piene di grafica inutile e ridondante: sono aumentati i tempi necessari per scaricare le pagine e l'attenzione non si è focalizzata più sulla sostanza ma sulla forma, sull'aspetto delle pagine web.
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:
- L'uso di estensioni proprietarie di HTML
- La conversione del testo in immagini
- L'uso di immagini per il controllo dello spazio bianco
- L'uso di tabelle per l'impaginazione
- La scrittura di programmi in sostituzione dell'uso di HTML
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 ed 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>
Questo paragrafo dovrebbe avere uno speciale testo verde.
</BODY> </HTML>"
HTML 4.0 supporta le seguenti caratteristiche dei fogli di stile:
- Posizionamento flessibile delle informazioni sullo stile — Archiviare i fogli di stile in file separati li rende più facili da riutilizzare. A volte è utile includere istruzioni relative alla presentazione all'interno del documento a cui si applicano, raggruppate alternativamente all'inizio del documento, o negli attributi degli elementi per tutto il corpo del documento. Allo scopo di rendere più facile la gestione dello stile a livello sito, queste specifiche descrivono come usare le intestazioni HTTP per impostare i fogli di stile da applicare a un documento.
- Indipendenza da linguaggi specifici' per fogli di stile — Queste specifiche non legano HTML ad alcun particolare linguaggio per fogli di stile. Ciò permette l'utilizzo di una serie di linguaggi, ad esempio semplici per la maggioranza degli utenti e anche molto più complessi per la minoranza di utenti con esigenze altamente specifiche. Gli esempi inclusi in seguito usano tutti il linguaggio CSS (Cascading Style Sheets, fogli di stile a cascata) [CSS1], ma altri linguaggi per fogli di stile sarebbero ugualmente utilizzabili.
- Cascata — È la possibilità, fornita da alcuni linguaggi per fogli di stile come CSS, di mescolare le informazioni di stile a partire da diverse fonti. Queste potrebbero essere costituite, ad esempio, da linee guida aziendali, stili comuni a un gruppo di documenti o stili specifici di un singolo documento. Memorizzando tutto ciò separatamente, i fogli di stile possono essere riutilizzati, semplificando la scrittura e rendendo più efficace l'uso delle cache di rete. La cascata definisce una sequenza ordinata di fogli di stile, dove le regole degli ultimi fogli hanno la precedenza su quelle precedenti. Non tutti i linguaggio di progrmmazione|linguaggi per fogli di stile supportano le cascate.
- Dipendenza dal media — HTML permette agli autori di scrivere documenti in modo indipendente dal media. Ciò permette agli utenti di accedere alle pagine Web usando una gran varietà di dispositivi e media come, ad esempio, visualizzazioni grafiche per computer Windows, Macintosh OS e X11, dispositivi per televisori, telefoni adattati e dispositivi portatili basati su unità PDA, interpreti vocali e dispositivi tattili basati su braille.
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.
Stili alternativi
Gli autori potrebbero voler offrire ai lettori diversi modi per viualizzare un documento. Ad esempio, un foglio di stile per la presentazione di documenti compatti con caratteri di piccole dimensioni, o uno che specifichi caratteri più grandi per una maggiore leggibilità. Queste specifiche permettono agli autori di specificare un foglio di stile preferito così come alternative che hanno per obiettivo specifici utenti o media. Gli interpreti dovrebbero dare agli utenti l'opportunità di scegliere tra i vari fogli di stile alternativi o di disattivare completamente i fogli di stile.
Alcune persone hanno espresso preoccupazione riguardo gli effetti dei fogli di stile sulle prestazioni. Ad esempio, recuperare un foglio di stile esterno potrebbe ritardare la presentazione completa per l'utente. Una tale situazione si presenta se l'inizio (head) del documento include una serie troppo lunga di regole di stile.
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 incoraggia questo effetto.
Aggiungere stile ad HTML
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.
Impostazione del linguaggio predefinito per i fogli di stile
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/cssGli interpreti dovrebbero determinare il linguaggio predefinito per fogli di stile di un documento seguendo i seguenti passi (con importanza decrescente):
Se qualsiasi dichiarazione META specifica il "Content-Style-Type" (tipo di stile del contenuto), l'ultima parte della stringa determina il linguaggio predefinito per fogli di stile. Altrimenti, se qualsiasi intestazione HTTP specifica il "Content-Style-Type" l'ultima parte della stringa determina il linguaggio predefinito per fogli di stile . Altrimenti, il linguaggio predefinito per fogli di stile è "text/css". 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.
Informazioni sullo stile in linea
Definizioni degli attributi
style = style [CN] Questo attributo specifica le informazioni di stile per l'elemento corrente. 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.
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.
Informazioni sullo stile nell'intestazione: l'elemento STYLE
<!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
type = content-type [CI] Questo attributo specifica il linguaggio dei fogli di stile per il contenuto degli elementi e sovrascrive il linguaggio predefinito. Il linguaggio per fogli di stile è specificato come un tipo di contenuto (ad es. "text/css"). Gli autori devono fornire un valore per questo attributo, per il quale non c'è valore predefinito. media = media-descriptors [CI] Questo attributo specifica il media a cui l'informazione di stile è destinata. Può essere un singolo descrittore di media oppure una lista di descrittori separati tra di loro da virgole. Il valore predefinito per questo attributo è "screen" (schermo). Attributi definiti altrove
lang (informazioni sulla lingua), dir (direzione del testo) title (titolo dell'elemento) 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:
Tutte le istanze di uno specifico elemento HTML (ad es. tutti gli elementi P, tutti gli elementi H1, ecc.) Tutte le istanze di un elemento HTML appartenenti a una specifica classe (cioè, il cui attributo class è impostato su un qualche valore). Singole istanze di un elemento HTML (cioè, il cui attributo id è impostato su un qualche valore). 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>
Questo H1 è influenzato dal nostro stile
Questo non lo è
</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>
Questo H1 non è influenzato
Questo H1 è influenzato dallo stile
Questo H1 non è influenzato
</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 logica (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>Le prime parole 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>
<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.
</BODY>
Tipi di media
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.
Fogli di stile esterni
Gli autori possono separare i fogli di stile dai documenti HTML. Ciò offre svariati benefici:
Gli autori e gli amministratori di siti Web possono condividere i fogli di stile per un gran numero di documenti (e siti). Gli autori possono cambiare il foglio di stile senza che ciò richieda modifiche al documento. Gli interpreti possono scaricare i fogli di stile selettivamente (basandosi sulle descrizioni del media).
Fogli di stile preferiti e alternativi
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 autori possono anche specificare dei fogli di stile persistenti che l'interprete deve applicare in aggiunta a qualsiasi foglio di stile alternativo.
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.
Specificare i fogli di stile esterni
Gli autori specificano i fogli di stile esterni con i seguenti attributi dell'elemento LINK:
Impostare il valore di href sulla locazione del file del foglio di stile. Il valore di href è un URI. Impostare il valore dell'attributo type per indicare il linguaggio della risorsa (foglio di stile) collegata. Questo permette all'interprete di evitare di scaricare un foglio di stile per un linguaggio non supportato. Specificare che il foglio di stile è persistente, preferito o alternativo: Per rendere un foglio di stile persistente, impostare l'attributo rel a "stylesheet" e non impostare l'attributo title. Per rendere un foglio di stile preferito, impostare l'attributo rel a "stylesheet" e dare un nome al foglio di stile con l'attributo title. Per specificare un foglio di stile alternativo, impostare l'attributo rel a "alternate stylesheet" e dare un nome al foglio di stile con l'attributo title. 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.
Fogli di stile a cascata
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>
Cascate dipendenti dai media
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> 14.4.2 Ereditarietà e cascata 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.
Occultare i dati di stile agli interpreti HTML
Alcuni linguaggi per fogli di stile supportano una sintassi volta a permettere agli autori di occultare il contenuto degli elementi STYLE agli interpreti non conformi.
Questo esempio illustra, per i CSS, come escludere un commento dal contenuto degli elementi STYLE per assicurarsi che gli interpreti più vecchi e non conformi non li presentino come testo.
<STYLE type="text/css"> </STYLE>
Collegarsi ai fogli di stile tramite intestazione HTTP
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.
 |
Salva in PDF
