2 Introduzione ai CSS2

Sommario

2.1 Una breve guida ai CSS2 per HTML

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.

2.2 Una breve guida ai CSS2 per XML

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:

Esempio di riproduzione   [D]

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:

Esempio di riproduzione   [D]

Aggiungendo altre regole al foglio di stile sarà possibile migliorare ulteriormente la presentazione del documento.

2.3 Il modello di elaborazione CSS2

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:

  1. Analizzare il documento sorgente e creare un albero del documento.
  2. Identificare il tipo di media di destinazione.
  3. Reperire tutti i fogli di stile associati con il documento che sono specificati per il tipo di media di destinazione.
  4. Annotare ciascun elemento dell'albero del documento, assegnando un singolo valore a ciascuna proprietà che è applicabile al tipo di media di destinazione. Alle proprietà sono assegnati valori secondo il meccanismo descritto nella sezione su collegamento a cascata ed eredità.

    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.

  5. A partire dall'albero del documento annotato, generare una struttura di formattazione. Spesso la struttura di formattazione somiglia da vicino all'albero del documento, ma può anche differire in modo significativo, in particolar modo quando gli autori fanno uso di pseudo-elementi e di contenuti generati. In primo luogo, non è necessario che la struttura di formattazione sia "a forma d'albero" -- la natura della struttura dipende dall'implementazione. In secondo luogo, la struttura di formattazione può contenere una quantità maggiore o minore di informazioni rispetto all'albero del documento. Ad esempio, se un elemento nell'albero del documento ha un valore di 'none' per la proprietà 'display', quell'elemento non produrrà nulla nella struttura di formattazione. Un elemento di elenco, al contrario, può generare più informazioni nella struttura di formattazione: il contenuto dell'elemento di elenco e le informazioni sullo stile dell'elenco (p.es., l'immagine di un pallino).

    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).

  6. Trasferire la struttura di formattazione al mezzo di destinazione (p.es., stampare i risultati, mostrarli sullo schermo, riprodurli come discorso, ecc.).

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.

2.3.1 Il canovaccio [canvas]

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.

2.3.2 Il modello di indirizzamento CSS2

Selettori e proprietà CSS2 consentono a dei fogli di stile di riferirsi alle seguenti parti di un documento o di un programma utente:

2.4 Princìpi di progettazione dei CSS

I CSS2, come i CSS1 prima di essi, sono basati su un insieme di princìpi di progettazione: