Come Personalizzare l’aspetto delle liste con i CSS

Attraverso l’utilizzo dei CSS, è possibile personalizzare in diversi modi l’aspetto delle liste HTML. In realtà, le proprietà che andremo ad esaminare non si riferiscono tanto ai tag utilizzati per inserire una lista ordinata (<ol>) o non ordinata (<ul>), ma piuttosto agli elementi che le compongono, ossia gli <li>. Infatti, è solo questo tipo di elemento che trova una rappresentazione effettiva sulla pagina, mentre ol e ul sono semplici dichiarazioni del tipo di lista utilizzato.

Le proprietà dedicate alla formattazione delle liste sono quattro, di cui tre definiscono aspetti specifici, mentre l’ultima, list-style, è una proprietà a sintassi abbreviata.

1. list-style-image: Questa proprietà permette di definire l’URL di un’immagine da utilizzare come marcatore di un list-item. La proprietà è ereditata e si applica agli elementi li, a meno che non si imposti la proprietà display sul valore list-item.

   • Sintassi ed esempi:

     cssCopy code

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


   • Esempi di utilizzo:

     cssCopy code

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


   È consigliabile utilizzare un selettore del discendente, come ul li, per garantire un rigore strutturale e applicare correttamente lo stile agli specifici list-item. Ad esempio:

   cssCopy code

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


   La soluzione ottimale, se si prevede di utilizzare uno stesso stile per tutte le liste, è applicare il selettore direttamente a ul o ol. Nel caso in cui si desideri uno stile diverso, si può utilizzare una classe o un id, come mostrato di seguito:

   cssCopy code

   ul.nome-classe li {list-style-image: url(immagine.png);}


   I valori ammissibili per questa proprietà includono un URL assoluto o relativo che punti a un’immagine, oppure la keyword “none” per indicare che nessuna immagine sarà utilizzata, e il marcatore sarà quello di default.

   list-style-position:

   La proprietà list-style-position consente di stabilire la posizione del marcatore rispetto al testo del list-item. Essa è ereditata e si applica agli elementi li e a quelli per i quali si imposta la proprietà display sul valore list-item.

   • Sintassi ed esempi:
     
     cssCopy code

     selettore {list-style-position: valore;}


     Il valore può essere una delle seguenti due parole chiave:

     • outside: è il valore di default e comporta che il marcatore sia collocato all’esterno del testo.

     • inside: posiziona il marcatore all’interno del testo, diventandone parte integrante. In caso di testo a capo, il marcatore apparirà all’interno del box.

     • Esempi di utilizzo:

       cssCopy code

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


   list-style-type:

   La proprietà list-style-type definisce l’aspetto del marcatore ed è ereditata. Si applica agli elementi li e a quelli per i quali si imposta la proprietà display sul valore list-item.

   • Sintassi ed esempi:
     
     cssCopy code

     selettore {list-style-type: valore;}


     Vi sono molteplici valori possibili, tra cui i principali includono:

     • disc: cerchietto pieno colorato.

     • circle: cerchietto vuoto.

     • square: quadratino.

     • decimal: sistema di conteggio decimale (1, 2, 3, …).

     • 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, …).

     • Altri valori si riferiscono a sistemi di conteggio internazionali.

     • Esempi di utilizzo:

       cssCopy code

       li {list-style-type: square;}
ul {list-style-type: decimal;}


   list-style:

   La proprietà list-style è una forma abbreviata che consente di definire tutti gli aspetti e gli stili di un list-item. È ereditata.

   • Sintassi ed esempi:

     cssCopy code

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


     I valori possibili sono quelli già visti per le proprietà singole. In questa dichiarazione abbreviata, è logico includere solo due delle tre proprietà singole: o si definisce l’aspetto del marcatore con un’immagine o si opta per un marcatore a carattere. Nel caso in cui si forniscano indicazioni per tipo e immagine, prevale l’immagine e il tipo viene ignorato.

     • Esempi di utilizzo:
       
       cssCopy code

       ul li {list-style: square inside;}
li {list-style: outside url(imagine.png);}


   In tutti gli esempi, si consiglia di rispettare la logica degli elementi e di attenersi al buon senso nella definizione degli stili per le liste.