Le Liste

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 listitem. 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 ) ; }

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.

Esempio:

ul li { list-style-position: inside ; }
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.

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.

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.

Esempio:

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

COMMENTI