Impostare la presentazione delle liste con i CSS

24 giugno 2013

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.

ValoreDescrizione
discun cerchietto pieno colorato; il colore può essere modificato per tutti i tipi con la proprietà color
circleun cerchietto vuoto
squareun quadratino
decimalsistema di conteggio decimale 1, 2, 3, …
decimal-leading-zerosistema di conteggio decimale ma con la prima cifra preceduta da 0 (01, 02, 03, …)
lower-romancifre romane in minuscolo (i, ii, iii, iv, …)
upper-romancifre romane in maiuscolo (I, II, III, IV, …)
lower-alphalettere ASCII minuscole (a, b, c, …)
upper-alphalettere ASCII maiuscole (A, B, C, …)
lower-latinsimile a lower-alpha
upper-latinsimile a upper-alpha
lower-greeklettere 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 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);}

Esempi.

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.

Tutte le lezioni

1 ... 27 28 29 ... 33

Se vuoi aggiornamenti su Impostare la presentazione delle liste con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Impostare la presentazione delle liste con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy