Personalizzare gli stili degli elenchi con CSS e HTML.

Come realizzare degli elenchi personalizzati con il CSS e l'HTML.

Con l'HTML e il CSS possiamo realizzare degli elenchi in cui inserire testo e non solo. Sono possibili molte personalizzazioni che possono servire per un rendere più originale un elenco in un post oppure per modificare l'aspetto di un elenco in un widget.

In questo articolo vedremo i tag più importanti per realizzare degli elenchi. I due fondamentali sono <ul> e <ol> con le rispettive chiusure </ul> e </ol> e servono rispettivamente per creare un elenco puntato oppure numerato. Ciascun elemento dovrà essere inserito tra gli elementi <li> e </li>.

Il codice seguente incollato in una pagina web

<ul>
 <li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ul>

mostrerà un elenco con questo aspetto

mentre il codice seguente incollato con le stesse modalità 

<ol>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ol>

creerà un elenco numerato di questa forma

 

ELENCHI CON LETTERE

 

Questo codice 

<ol type="A">
<li>Primo elemento.</li>
<li>Secondo elemento.</li>
<li>Terzo elemento.</li>
</ol>

genererà il seguente elenco

con i marcatori dati dalle lettere latine maiuscole. Mentre quest'altro 

<ol type="a">
<li>Primo elemento.</li>
<li>Secondo elemento.</li>
<li>Terzo elemento.</li>
</ol>

porterà a un elenco con lettere minuscole come marcatori

 

ELENCHI NIDIFICATI

 

Si possono creare degli elenchi che contengono altri elenchi. Questo accade soprattutto nei Menù quando a una serie di voci principali sono associate delle voci secondarie a ciascuna di esse. Per nidificare due o più elenchi bisogna inserire un altro elenco completo dei tag di apertura e di chiusura subito prima del tag di chiusura </li> dell'elemento superiore. Questo codice

<ol type="A">
<li>Elemento 1.
<ol type="a">
<li>Elemento 1.1</li>
<li>Elemento 1.2</li>
</ol></li>
<li>Elemento 2.
<ul>
<li>Elemento 2.1</li>
<li>Elemento 2.2</li>
</ul></li>
<li>Elemento 3.</li>
</ol>

produrrà questo risultato



dove i tag di chiusura degli elementi in cui si sono inseriti i sotto elenchi sono stati colorati di viola mentre i codici degli elenchi secondari sono stati evidenziati di giallo.

ELENCHI CON STILE

 

Volendo è possibile realizzare degli elenchi suddivisi in due o più parti utilizzando una tabella anche con l'ausilio di CSS per personalizzare colori di sfondo e di link. Vediamo però come sia possibile mostrare degli elenchi particolari usando il più versatile tag style al posto di type.

Partiamo da questo codice classico generico

<ol style="list-style:disc;">
<li>Primo elemento.</li>
<li>Secondo elemento.</li>
<li>Terzo elemento.</li>
<li>Quarto elemento.</li>
<li>Quinto elemento.</li>
</ol>

dove con il tag list-style è stato inserito disc come attributo per avere i cerchietti come marcatori



Al posto di disc possiamo usare altri attributi con questi risultati

1. disc: un cerchietto pieno
2. circle: un cerchietto vuoto
3. square: un quadratino
4. decimal: sistema decimale 1, 2, 3, ...
5. decimal-leading-zero: sistema decimale ma con due cifre: 01, 02, 03, …
6. lower-roman: cifre romane in minuscolo. i, ii, iii, iv, ...
7. upper-roman: cifre romane in maiuscolo. I, II, III, IV, ...
8. lower-alpha: lettere minuscole. a, b, c, ...
9. upper-alpha: lettere maiuscole. A, B, C, ...
10. lower-greek: lettere greche

Se a un attributo si aggiunge inside l'elenco sarà visualizzato all'interno. Per esempio il tag style="list-style:square inside;" mostrerà un elenco fatto di quadratini con i marcatori all'interno dello stesso contenuto dell'elenco.

ELENCHI CON IMMAGINI COME MARCATORI

 

Possiamo usare una immagine di sfondo per caratterizzare un elenco. Questo codice

<ol style="list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKmBuRrsjZBgo4220tZx07R3D04ixIDFlpDs8Q8AN9U-3q18OWfq9T02s1_oHWpAHN9YsyeKSVRU7GlopgbopYsdmAdvNDphPaXxbBvyA-vVzMNQDGCko9pNZH_uOrQJevt3JICpy-Vnw/s10/check-10x10.png);">
<li>Primo elemento.</li>
<li>Secondo elemento.</li>
<li>Terzo elemento.</li>
<li>Quarto elemento.</li>
<li>Quinto elemento.</li>
</ol>

utilizza il tag list-style-image per mostrare l'immagine il cui URL è colorato di rosso come marcatore e realizza un elenco con questo aspetto 

Ovviamente l'icona utilizzata come esempio può essere sostituita da un'altra. Concludo questo post ricordando che si può anche eliminare lo stile di un elenco. Questo è particolarmente utile quando si abbia un modello con uno stile già predisposto per gli elenchi. In questo modo si potrebbero per esempio visualizzare dei widget di elenchi di immagini con i puntini accanto con un effetto decisamente antiestetico. Questo codice di esempio

<ol style="list-style:none;">
<li>Primo elemento.</li>
<li>Secondo elemento.</li>
<li>Terzo elemento.</li>
<li>Quarto elemento.</li>
<li>Quinto elemento.</li>
</ol>

creerà un elenco senza nessun marcatore con questo aspetto

Se invece si vuole eliminare lo stile da un elenco di un widget dobbiamo per prima cosa trovare l'ID del widget in questione. Poniamo per esempio che l'ID sia HTML1; per eliminare lo stile dall'elenco bisogna incollare nel modello nella sezione dei fogli di stile il codice HTML1 li {list-style:none;}. Può essere fatto anche su Modello > Personalizza > Avanzato > Aggiungi CSS.