Grazie ai CSS possiamo definire in vari modi l'aspetto delle liste HTML. In realtà, tutte le proprietà che andremo ad esaminare si riferiscono non tanto ai tag usati per inserire una lista ordinata (<ol>) o non ordinata (<ul>), ma ai singoli elementi che le compongono, ovvero gli elementi <li>. In effetti è
solo questo tipo di elemento 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 lie a quelli per i quali si imposti la proprietà display sul valore list-item.
Sintassi ed esempi
selettore {list-style-image: url(<url_immagine>);}Nella definizione della sintassi per questa e per le altre proprietà che vedremo nella lezione, possiamo impostare la regola a partire dall'elemento/selettore li:
li {list-style-image: url(immagine.png);}Ma anche usando come selettore l'elemento che definisce la lista, dal momento che la proprietà è ereditata:
ul {list-style-image: url(immagine.png);}
ol {list-style-image: url(immagine.png);}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:
ul li {list-style-image: url(immagine.png);}La soluzione è ottimale se si prevede di usare sempre uno stesso stile per tutte le liste. Se invece si pensa di usare stili diversi, ci si affida alle classi o agli id, che applichiamo di volta in volta secondo le necessità. La sintassi consigliata è questa:
ul.nome-classe li {list-style-image: url(immagine.png);}I valori possono essere rappresentati da:
- un URL assoluto o relativo che punti ad un'immagine;
- la keyword
none: non viene usata nessuna immagine e il marcatore è quello di default.
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 ed esempi
selettore {list-style-position: valore;}Il valore può corrispondere ad una di queste due parole chiave:
outside: valore di default; è il comportamento standard, il marcatore è collocato 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.
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 ed esempi
selettore {list-style-type: valore;}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.
| Valore | Descrizione |
|---|---|
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-hirohaI 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 HTML viene ignorata. Pertanto, posso avere una lista non ordinata con list-item decimali. Il consiglio è, comunque, di attenersi 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 ed esempi
selettore {list-style: valore-tipo
valore-posizione valore-immagine;}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.
ul li {list-style: square inside;}
li {list-style: outside url(imamgine.png);}Approfondimenti
Le liste HTML sono uno degli elementi più utilizzati nel contesto del design di pagine web. Oltre che per il loro utilizzo originario, infatti, hanno trovato applicazione in altri scenari, a partire dalla realizzazione di menu. Ecco una serie di link per approfondire questi aspetti.