CSS  »  Guide  »  Guida CSS di base 

Grazie ai CSS possiamo definire in vari modi l'aspetto delle liste (X)HTML. In realtà tutte le proprietà che andremo ad esaminare si riferiscono non ai canonici tag usati per inserire una lista ordinata (<OL>) o non ordinata (<UL>), ma ai singoli elementi che le compongono, ovvero l'elemento <LI>. In effetti, è solo questo che trova una rappresentazione effettiva sulla pagina, mentre OL e UL sono semplici dichiarazioni del tipo di lista usato.

Le proprietà dedicate alla formattazione delle liste sono quattro. tre definiscono singoli aspetti, l'ultima, list-style, è una proprietà a sintassi abbreviata.

list-style-image

Definisce l'URL di un'immagine da usare come marcatore di un list-item. Proprietà ereditata. Si applica agli elementi LI e a quelli per i quali si imposti la proprietà display sul valore list-item.

Sintassi

<selettore> {list-style-image: url(<url_immagine>);}

Nella definizione della sintassi per tutte queste proprietà avete a disposizione diverse strade. La prima e più semplice è quella di definire lo stile a livello degli elementi lista o list-item:

ul {list-style-image: url(immagine.gif);}
ol {list-style-image: url(immagine.gif);}
li {list-style-image: url(immagine.gif);}

Più correttamente e per un fatto di rigore strutturale (lo stile si applica ai list-item), è preferibile, usando UL o OL, affidarsi ad un selettore del discendente (descendant selector):

ul li {list-style-image: url(immagine.gif);}

La soluzione è ottimale se prevedete di usare sempre uno stesso stile per tutte le liste. Se invece pensate di usare stili diversi, affidatevi alla potenza delle classi, che applicherete di volta in volta secondo le necessità. La sintassi consigliata è questa:

ul.nome_della_classe li {list-style-image: url(immagine.gif);}

Valori

• un URL assoluto o relativo che punti ad un'immagine.
• none. Non viene usata nessuna immagine.

Esempi

Per tutte le proprietà abbiamo preparato il consueto documento con codice ed esempi.

Una considerazione "estetica" di cui tenere conto è la dimensione delle immagini. Devono essere sempre adeguate alla dimensione del testo.

list-style-position

Imposta la posizione del marcatore rispetto al testo del list-item. Proprietà ereditata. Si applica agli elementi LI e a quelli per i quali si imposti la proprietà display sul valore list-item.

Sintassi

<selettore> {list-style-position: <valore>;}

Valori

• outside. Valore di default. E' il comportamento standard: il marcatore è piazzato all'esterno del testo.
• inside. Il marcatore diventa parte integrante del testo e ne rappresenta in un certo senso il primo carattere. Se il testo va a capo il marcatore apparirà all'interno del box.

Esempi

ul li {list-style-position: inside;}
#lista li {list-style-position: outside;}

list-style-type

Definisce l'aspetto del marcatore. Proprietà ereditata. Si applica agli elementi LI e a quelli per i quali si imposti la proprietà display sul valore list-item.

Sintassi

<selettore> {list-style-type: <valore>;}

Valori

La scelta dei valori possibili è lunghissima. Definiamo nei dettagli solo i più importanti, limitandoci a citare quelle che fanno riferimento a sistemi di scrittura non occidentali. Tali valori sono stati inseriti per venire incontro alle esigenze di numerazione di lingue come l'ebraico o il giapponese, che usano sistemi diversi dal nostro.

• disc: un cerchietto pieno colorato. Il colore può essere modificato per tutti i tipi con la proprietà color.
• circle: un cerchietto vuoto.
• square: un quadratino
• decimal: sistema di conteggio decimale 1, 2, 3, ....
• decimal-leading-zero: sistema di conteggio decimale ma con la prima cifra preceduta da 0. 01, 02, 03, ....
• lower-roman: cifre romane in minuscolo. i, ii, iii, iv, .......
• upper-roman: cifre romane in maiuscolo. I, II, III, IV, ....
• lower-alpha: lettere ASCII minuscole. a, b, c, ......
• upper-alpha: lettere ASCII maiuscole. A, B, C, .....
• lower-latin: simile a lower-alpha
• upper-latin: simile a upper-alpha
• lower-greek: lettere minuscole dell'alfabeto greco antico.

Si riferiscono a sistemi di conteggio internazionali i seguenti valori:

hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-hiroha | katakana-hiroha

I diversi tipi di marcatori si riferiscono ciascuno, logicamente, a liste ordinate o non ordinate. Useremmo, ad esempio, square, per un UL e decimal per un OL. In realtà, se si imposta l'aspetto del marcatore con i CSS, l'impostazione definita in (X)HTML viene ignorata. Pertanto, posso avere una lista non ordinata con list-item decimali, come mostra chiaramente l'esempio. Il consiglio è, comunque, di attenervi al buon senso e di rispettare la logica degli elementi.

list-style

Proprietà a sintassi abbreviata con cui si definiscono tutti gli aspetti e gli stili di un list-item. Proprietà ereditata.

Sintassi

<selettore> {list-style: <valore tipo> <valore posizione> <valore immagine>;}

Valori

I valori possibili sono quelli visti in precedenza per le proprietà singole. A rigor di logica solo due delle tre proprietà singole dovrebebro trovare posto in questa dichiarazione abbreviata: per definire l'aspetto del marcatore, infatti, o decido di usare un'immagine o propendo per un marcatore a carattere. Se si inseriscono indicazioni per tipo e immagine, prevale l'immagine e il tipo è ignorato.

Esempi

ul li {list-style: square inside;}
ul.lista1 li {list-style: outside url(imamgine.gif);}

Links

Le impostazioni di base delle liste sono queste e la lezione è al riguardo esaustiva. Se volete capire come esse interagiscono con altri aspetti dei CSS non potete non leggere questo straordinario articolo di Mark Newhouse:

CSS Design: Taming Lists su A List Apart. Rimarrete stupiti di fronte a tanta maestria e agli usi inaspettati di questo elemento. Buona lettura.

Altri articoli

Altre guide

Altre newsletter