Sommario
In questa guida, mostreremo come è facile costruire un foglio di stile essenziale. Per seguire gli esempi, occorrerà conoscere appena un po' di HTML (si veda [HTML40]) e qualcosa della terminologia di base dell'editoria da tavolo.
Cominciamo con un piccolo documento HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Note su Bach</TITLE>
</HEAD>
<BODY>
<H1>Note su Bach</H1>
<P>Johann Sebastian Bach fu un compositore prolifico.
</BODY>
</HTML>
Per impostare a blu il colore dell'elemento H1, è possibile scrivere la seguente regola CSS:
H1 { color: blue }
Una regola CSS consiste di due parti principali: selettore ('H1') e dichiarazione ('color: blue'). La dichiarazione ha due parti: proprietà ('color') e valore ('blue'). Benché l'esempio precedente tenti di influenzare soltanto una delle proprietà necessarie alla riproduzione di un documento HTML, possiede in sé i requisiti necessari a costituire un foglio di stile. Combinato con altri fogli di stile (una caratteristica fondamentale dei CSS è che i fogli di stile vengono combinati), determinerà la presentazione finale del documento.
Le specifiche HTML 4.0 definiscono come le regole dei fogli di stile possono essere specificate per documenti HTML: o all'interno del documento HTML o per mezzo di un foglio di stile esterno. Per inserire il foglio di stile all'interno del documento, si usi l'elemento STYLE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Note su Bach</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Note su Bach</H1>
<P>Johann Sebastian Bach fu un compositore prolifico.
</BODY>
</HTML>
Per rendere massima la flessibilità, si raccomanda agli autori di specificare fogli di stile esterni; questi possono essere modificati senza intervenire sul sorgente HTML, e possono essere condivisi tra più documenti. Per creare un collegamento ad un foglio di stile esterno, si può usare l'elemento LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Note su Bach</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>Note su Bach</H1>
<P>Johann Sebastian Bach fu un compositore prolifico.
</BODY>
</HTML>
L'elemento LINK specifica:
Per mostrare la stretta relazione tra un foglio di stile ed un codice di marcatura strutturato, continueremo ad usare in questa guida l'elemento STYLE. Aggiungiamo ora più colori:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Note su Bach</TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Note su Bach</H1>
<P>Johann Sebastian Bach fu un compositore prolifico.
</BODY>
</HTML>
Il foglio di stile contiene adesso due regole: la prima imposta il colore dell'elemento BODY a 'red' [=rosso], mentre la seconda imposta il colore dell'elemento H1 a 'blue'. Dal momento che nessun valore di colore è stato specificato per l'elemento P, esso erediterà il colore dal suo elemento genitore, cioè BODY. L'elemento H1 è anch'esso figlio di BODY, ma la seconda regola sovrascrive il valore ereditato. Nei CSS capitano spesso simili conflitti tra valori differenti. Queste specifiche spiegano come risolverli.
I CSS2 hanno più di 100 proprietà differenti, tra le quali 'color'. Diamo uno sguardo a qualcuna delle altre:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Note su Bach</TITLE>
<STYLE type="text/css">
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1>Note su Bach</H1>
<P>Johann Sebastian Bach fu un compositore prolifico.
</BODY>
</HTML>
La prima cosa da notare è che più dichiarazioni successive sono raggruppate all'interno di un blocco racchiuso da parentesi graffe ({...}) e separate tra loro da un punto e virgola; anche l'ultima dichiarazione può essere seguita da un punto e virgola.
La prima dichiarazione relativa all'elemento BODY imposta la famiglia di font a "Gill Sans". Se tale font non è disponibile, il programma utente [= user agent] (spesso indicato con il termine "browser" [= navigatore]) utilizzerà la famiglia di font 'sans-serif', che è una delle cinque famiglie generiche di font che tutti i programmi utente conoscono. Gli elementi figli di BODY erediteranno il valore della proprietà 'font-family'.
La seconda dichiarazione imposta la dimensione dei caratteri per l'elemento BODY a 12 punti. L'unità "punto" [= point] è comunemente usata nella tipografia orientata alla stampa per indicare la dimensione dei caratteri ed altri valori di lunghezza. E' un esempio di un'unità assoluta che non scala in relazione al contesto.
La terza dichiarazione usa un'unità relativa che scala in rapporto a ciò che la circonda. L'unità "em" si riferisce alla dimensione del font [font, o insiemi di caratteri] dell'elemento. In questo caso il risultato è che i margini intorno all'elemento BODY sono tre volte più ampi della dimensione del font.
I CSS possono essere usati con qualsiasi formato di documento strutturato, per esempio con applicazioni dello eXtensible Markup Language [XML10], il Linguaggio di marcatura estensibile. In effetti XML dipende dai fogli di stile in misura maggiore di HTML, dal momento che gli autori possono creare dei loro propri elementi che i programmi utente non sanno come mostrare.
Ecco un semplice frammento di XML:
<ARTICOLO>
<TITOLO>Federico il Grande incontra Bach</TITOLO>
<AUTORE>Johann Nikolaus Forkel</AUTORE>
<PARA>
Una sera, mentre egli stava preparando il suo
<STRUMENTO>flauto</STRUMENTO> ed i suoi
musicisti si stavano radunando, un funzionario
gli portò un elenco degli stranieri che erano arrivati.
</PARA>
</ARTICOLO>
Per mostrare questo frammento nella forma di un documento, dobbiamo in primo luogo dichiarare quali elementi sono a livello di riga (cioè non causano interruzioni di riga) e quali a livello di blocco (cioè causano interruzioni di riga).
STRUMENTO { display: inline }
ARTICOLO, TITOLO, AUTORE, PARA { display: block }
La prima regola dichiara che STRUMENTO è in riga e la seconda regola, con il suo elenco di selettori separati dalla virgola, dichiara che tutti gli altri elementi sono a livello di blocco.
Un suggerimento per collegare un foglio di stile ad un documento XML è di usare un'istruzione di elaborazione:
<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICOLO>
<TITOLO>Federico il Grande incontra Bach</TITOLO>
<AUTORE>Johann Nikolaus Forkel</AUTORE>
<PARA>
Una sera, mentre egli stava preparando il suo
<STRUMENTO>flauto</STRUMENTO> ed i suoi
musicisti si stavano radunando, un funzionario
gli portò un elenco degli stranieri che erano arrivati.
</PARA>
</ARTICOLO>
Un programma utente visuale potrebbe formattare l'esempio precedente come:
Si noti che la parola "flauto" rimane all'interno del paragrafo, dal momento che essa è il contenuto dell'elemento in riga STRUMENTO.
Il testo, però, non è ancora formattato nel modo che ci si aspetterebbe. Per esempio, la dimensione dei caratteri del titolo dovrebbe essere maggiore di quella del testo rimanente, e si potrebbe voler mostrare il nome dell'autore in corsivo:
STRUMENTO { display: inline }
ARTICOLO, TITOLO, AUTORE, PARA { display: block }
TITOLO { font-size: 1.3em }
AUTORE { font-style: italic }
ARTICOLO, TITOLO, AUTORE, PARA { margin: 0.5em }
Un programma utente visuale potrebbe formattare l'esempio precedente come:
Aggiungendo altre regole al foglio di stile sarà possibile migliorare ulteriormente la presentazione del documento.
Questa sezione presenta un possibile modello di come lavorano i programmi utente che supportano i CSS. Si tratta di un modello puramente teorico; le implementazioni reali possono variare.
In tale modello, un programma utente analizza un sorgente passando attraverso i seguenti passi:
Parte del calcolo dei valori dipende dall'algoritmo di formattazione appropriato per il tipo di media di destinazione. Per esempio, se il mezzo di destinazione è lo schermo, i programmi utente applicano il modello di formattazione visuale. Se il mezzo di destinazione è la pagina stampata, i programmi utente applicano il modello a pagine. Se il mezzo di destinazione è un dispositivo di riproduzione acustica (p.es. un sintetizzatore vocale), i programmi utente applicano il modello di riproduzione acustica.
Si noti che il programma utente CSS non altera l'albero del documento durante questa fase. In particolare, il contenuto generato prodotto da fogli di stile non ritorna all'analizzatore del linguaggio del documento (p.es., per essere rianalizzato).
Il passo 1 è al di fuori dell'àmbito di queste specifiche (si veda, per esempio, [DOM]).
I passi 2-5 sono al centro dell'interesse della maggior parte di queste specifiche.
Il passo 6 è al di fuori dell'àmbito di queste specifiche.
Per tutti i media, il termine canovaccio [canvas] descrive "lo spazio in cui la struttura di formattazione è riprodotta." Il canovaccio si estende all'infinito in ciascuna direzione dello spazio, ma la riproduzione avviene generalmente all'interno di una regione finita del canovaccio, stabilita dal programma utente in base al mezzo di destinazione. Ad esempio, i programmi utente la cui resa è destinata ad uno schermo impongono generalmente una larghezza minima e scelgono una larghezza iniziale, basata sulla dimensione della finestra di visualizzazione. I programmi utente la cui resa è destinata ad una pagina impongono di solito dei vincoli di larghezza e di altezza. I programmi utente vocali possono imporre dei limiti nello spazio acustico, ma non nel tempo.
Selettori e proprietà CSS2 consentono a dei fogli di stile di riferirsi alle seguenti parti di un documento o di un programma utente:
I CSS2, come i CSS1 prima di essi, sono basati su un insieme di princìpi di progettazione:
Compatibilità in avanti e all'indietro. I programmi utente per CSS2 saranno in grado di comprendere i fogli di stile CSS1. I programmi utente per CSS1 saranno in grado di leggere i fogli di stile CSS2 e di tralasciare le parti che non comprendono. Inoltre, i programmi utente privi di supporto per i CSS saranno in grado di mostrare documenti a cui sono applicati degli stili. Naturalmente i miglioramenti stilistici resi possibili dai CSS non saranno riprodotti, ma l'intero contenuto sarà presentato.
Complementarità rispetto a documenti strutturati. I fogli di stile fanno da complemento a documenti strutturati (p.es., HTML ed applicazioni XML), fornendo informazioni stilistiche relative al testo marcato. Dovrebbe essere facile modificare il foglio di stile con poco o nessun impatto sul codice di marcatura.
Indipendenza dal produttore, dalla piattaforma e dal dispositivo. I fogli di stile permettono ai documenti di rimanere indipendenti dal produttore, dalla piattaforma e dal dispositivo. I fogli di stile sono, tra l'altro, di per sé stessi indipendenti dal produttore e dalla piattaforma, ma i CSS2 consentono di destinare un foglio di stile ad un dato gruppo di dispositivi (p.es., stampanti).
Manutenibilità. Collegando i documenti a fogli di stile, i gestori possono semplificare la manutenzione dei siti e conservare la coerenza dello stile attraverso un intero sito. Per esempio, se cambia il colore di sfondo aziendale, è necessario modificare un unico file.
Semplicità. CSS2 è più complesso di CSS1, ma rimane un linguaggio per fogli di stile semplice, che può essere letto e scritto da esseri umani. Le proprietà CSS sono state tenute indipendenti le une dalle altre nella più ampia misura possibile, ed esiste in generale un solo modo per ottenere un certo risultato.
Prestazioni di rete. I CSS forniscono un sistema di codifica compatto per presentare i contenuti. A paragone delle immagini o dei file audio, spesso utilizzati dagli autori per ottenere determinati effetti di resa, i fogli di stile fanno diminuire nella maggior parte dei casi la dimensione dei contenuti. Per di più, è necessario un minor numero di transazioni, il che aumenta ulteriormente le prestazioni di rete.
Flessibilità. I CSS possono essere applicati al contenuto in numerosi modi. La caratteristica chiave è quella di collegare a cascata le informazioni di stile specificate nel foglio di stile predefinito (del programma utente), nei fogli di stile dell'utente, nei fogli di stile collegati, nell'intestazione del documento e negli attributi degli elementi che formano il corpo del documento.
Ricchezza. Dotare gli autori di un ricco insieme di effetti di presentazione aumenta la ricchezza del Web come mezzo di espressione. I progettisti hanno bramato intensamente le funzionalità comunemente disponibili nei programmi di editoria da tavolo e per presentazioni. Alcuni degli effetti di presentazione richiesti vanno in conflitto con l'indipendenza dal dispositivo, ma i CSS2 rappresentano un grande passo in avanti verso la soddisfazione delle richieste dei progettisti.
Legàmi con un linguaggio alternativo. L'insieme delle proprietà dei CSS descritte in queste specifiche forma un modello di formattazione coerente per presentazioni visuali ed acustiche. A tale modello di formattazione è possibile accedere attraverso il linguaggio CSS, ma sono possibili anche legàmi con altri linguaggi. Per esempio, un programma JavaScript può cambiare dinamicamente il valore della proprietà 'color' di un certo elemento.
Accessibilità. Numerose caratteristiche dei CSS renderanno il Web più accessibile agli utenti con disabilità:
Nota. Per maggiori informazioni su come progettare documenti accessibili usando CSS ed HTML, si consulti per favore [WAI-PAGEAUTH].
