La maggior parte del contenuto del nostro documento è inserita all'interno di una sequenza regolare di intestazioni di vari livelli, paragrafi ed elenchi (ordinati e non). La formattazione delle intestazioni è già stata definita nelle regole di stile principali del nostro CSS. I paragrafi non hanno alcuna formattazione particolare. Si noti come sia nel caso delle intestazioni che dei paragrafi, i valori dei margini verticali vengono definiti dal foglio di stile predefinito del browser. Tipicamente tali valori sono i seguenti:
Questi valori sono ricavati dal foglio di stile predefinito di Firefox (html.css), che si trova nella directory /res del programma.
Per quanto riguarda gli elenchi, solo alcuni di essi hanno bisogno di una formattazione particolare, che riportiamo di seguito.
Impostiamo due classi (righe 1-6) per definire due tipi di marcatori diversi per un elenco ordinato e non ordinato.
Nel primo caso (classe .literal
) usiamo il valore lower-alpha
della proprietà
list-style-type
per ottenere l'effetto dei marcatori costituiti da lettere minuscole dell'alfabeto.
Nel secondo caso (classe .squared
) usiamo invece il valore square
per avere un marcatore
costituito da un piccolo quadrato.
Nelle righe che vanno dalla 7 alla 14, usiamo il contenuto generato per inserire un
trattino prima del contenuto delle voci dell'elenco con classe .dash
. Ovviamente questo esempio non funziona
in Internet Explorer 7 ed inferiori, quindi siamo costretti ad inserire il trattino nel sorgente. Possiamo osservarne
l'effetto nell'immagine che segue.
Figura 14: L'elenco con le voci con il trattino
[D]