I CSS offrono una formattazione di base per le liste. Un elemento con 'display: list-item' genera un box principale per il contenuto dell'elemento e un box per il marcatore. Le proprietà degli liste permettono di specificare il tipo di marcatore (immagine, glifo o numero) e la posizione del marcatore rispetto al box principale (all'esterno o all'interno di esso). Non permettono agli autori di specificare uno stile distinto (font, colori, allineamento ecc.) per il marcatore di lista. Le proprietà dello sfondo si applicano solo al box principale.
Le proprietà 'list-style-type', 'list-style-image', 'list-style-position' e 'list-style'
| Valore: | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit |
|---|---|
| Iniziale: | disc |
| Si applica a: | elementi con 'display: list-item' |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà specifica l'aspetto del marcatore di lista se 'list-style-image' ha valore 'none' o se l'immagine non è reperibile. Il valore 'none' non specifica alcun marcatore. I valori sono:
- disc
- Un cerchio pieno. Valore predefinito in (X)HTML per l'elemento
ul. - circle
- Un cerchio vuoto.
- square
- Un quadrato.
- decimal
- Numeri decimali a partire da 1. Valore predefinito in (X)HTML per l'elemento
ol. - decimal-leading-zero
- Numeri decimali con zero iniziale (01, 02, ecc.).
- lower-roman
- Numeri romani minuscoli (i, ii, ecc.).
- upper-roman
- Numeri romani maiuscoli (I, II, ecc.).
- georgian
- Numerazione tradizionale georgiana (an, ban, ecc.).
- armenian
- Numerazione tradizionale armena.
- lower-latin o lower-alpha
- Lettere minuscole (a, b, ecc.).
- upper-latin o upper-alpha
- Lettere maiuscole (A, B, ecc.).
- lower-greek
- Lettere minuscole greche (alfa, beta, ecc.).
Le specifiche non definiscono come dovrebbero comportarsi i sistemi alfabetici alla fine dell'alfabeto. Per esempio, dopo 26 voci di elenco la resa di 'lower-latin' non è definita. Si raccomanda pertanto, per lunghe liste, di specificare numeri reali.
La proprietà 'list-style-type' può essere usata per specificare il tipo di marcatore quando le liste sono annidate. Esempio:
ul ul, ol ul, dl ul {list-style-type: circle;}
ul ul ul, ol ul ul, dl ul ul {list-style-type: square;}
Per le liste annidate, i browser hanno valori predefiniti differenti.
| Valore: | <uri> | none | inherit |
|---|---|
| Iniziale: | none |
| Si applica a: | elementi con 'display: list-item' |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | l'URI assoluto o 'none' |
Questa proprietà imposta l'immagine da usare come marcatore di elenco, sostituendo il marcatore di 'list-style-type':
ul {list-style-image: url("img.gif");}
| Valore: | inside | outside | inherit |
|---|---|
| Iniziale: | outside |
| Si applica a: | elementi con 'display: list-item' |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | come specificato |
Questa proprietà specifica la posizione del marcatore rispetto al box principale. I valori sono:
- outside
- Il box del marcatore è fuori dal box principale. I CSS non specificano l'esatta posizione.
- inside
- Il box del marcatore è il primo box inline del box principale. I CSS non specificano l'esatta posizione.
ul {list-style-position: inside;}
| Valore: | [<'list-style-type'>] || <'list-style-position'> || <'list-style-image'>] | inherit |
|---|---|
| Iniziale: | vedi proprietà individuali |
| Si applica a: | elementi con 'display: list-item' |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
| Valore calcolato: | vedi proprietà individuali |
La proprietà 'list-style' è una proprietà abbreviata che imposta le tre proprietà precedenti in un'unica dichiarazione:
ul {list-style: square inside;}
Quando si specifica un'immagine come marcatore, è consigliabile usare un valore di ripiego nel caso in cui l'immagine non fosse disponibile:
ul {list-style: url(img.gif) disc;}
Nota sull'attributo start delle liste ordinate
L'attributo start degli liste ordinate è deprecato nella DTD Strict di HTML 4.01 ed XHTML 1.0. Questo
attributo fa in modo che la numerazione riprenda da un determinato punto L'alternativa proposta fa uso del contenuto generato, come
mostrato in questo esempio:
ol {list-style-type: none; counter-reset: item;}
li:before {
counter-increment: item;
content: counter(item)". ";
}
p + ol {list-style-type: none; counter-reset: item2 2;}
p + ol li:before {
counter-increment: item2 1;
content: counter(item2 ) ". ";
}
Purtroppo questa soluzione ha notevoli limiti, che ne pregiudicano completamente la reale efficacia. Le uniche due soluzioni possibili consistono nel aggiungere la numerazione manualmente nel sorgente (1) o usare una DTD Transitional (2), anche se quest'ultima soluzione crea ulteriori problemi per quanto riguarda la conformità ai requisiti della legge Stanca. Tali requisiti prevedono, nel caso di siti di nuova realizzazione, l'uso di una DTD Strict. La DTD Transitional è consentita solo nel caso di un passaggio da un HTML presentazionale ad uno rigoroso, ossia come soluzione temporanea.