Come personalizzare l'aspetto di un elenco.

Come rendere originali le liste e gli elenchi creando delle classi di stile apposite.

Abbiamo già visto come utilizzando i tag <ol> e <ul> si possano creare elenchi rispettivamente numerati e puntati direttamente con l'Editor di Blogger o con Windows Live Writer. Attraverso l'utilizzo di specifici attributi come <ol style="list-style:lower-greek;"> possiamo personalizzare lo stile degli elenchi, dove lower-greek rappresentano le lettere greche minuscole e sono solo un esempio di tutti gli stili di elenchi che si possono ottenere. La personalizzazione degli elenchi può rappresentare un aspetto di originalità per un sito che voglia evidenziare questo elemento.

Usando la sintassi <ol style="list-style-image: url(URL_IMMAGINE);"> si può inserire anche una immagine o icona prima di ogni elemento dell'elenco. Faccio una breve lista dei principali attributi che possono essere inseriti nello stile di un elenco al posto di lower-greek nel tag precedente:

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

Quando vogliamo eliminare uno stile da un elenco dobbiamo aggiungere la riga list-style:none;. Utilizzando questo ultimo tag insieme a counter-reset, counter-increment, la content property e lo pseudo-elemento before possiamo creare degli elenchi personalizzati molto interessanti. Se si va in modalità HTML di un articolo o di una pagina e si incolla questo codice

<style type='text/css'>
.elenco ol{
  counter-reset:li;
  margin-left:0;
  padding-left:0
}
.elenco ol li{
  position:relative;    
  margin:0 0 20px 2em !important;
  padding:4px 8px !important;
  list-style:none;
  *list-style: decimal;
}
.elenco ol li:before{
  content:counter(li);
  counter-increment:li;
  position:absolute;
  top:-8px;
  left:-39px;
  font-family:Trebuchet; /* Famiglia di Font */
  font-size:40px; /* Dimensione dei numeri */
  width:34px;
  margin:0 0 10px 0;
  padding:4px !important;
  color:#191919; /* Colore dei numeri */
  text-align:center;
}
</style>
<div class="elenco">
<ol>
<li>Primo elemento.</li>
<li>Secondo elemento.</li>
<li>Terzo elemento.</li>
<li>Quarto elemento.</li>
<li>Quinto elemento</li>
</ol>
</div>

otterremo questo risultato

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus ultricies urna, quis commodo odio viverra non. Quisque sit amet lectus justo.
2. Duis sit amet lectus arcu. Aenean eu arcu nibh. Sed massa dui, luctus eget sollicitudin non, porta id leo. Fusce pharetra, ante eu rutrum lacinia, sem justo sodales justo, at pellentesque lectus erat non arcu. Praesent feugiat nibh vel tellus molestie quis ullamcorper erat eleifend.
3. Etiam luctus metus id dolor vehicula eget mollis quam tristique. Sed elementum scelerisque turpis et mollis. Quisque auctor, lorem a venenatis ultrices, mi risus condimentum mi, quis iaculis mi nisl eu felis.
4. Morbi ligula nisl, lobortis at dapibus sit amet, ultricies vel metus. Proin hendrerit luctus tempus. Aenean fermentum, elit at auctor faucibus, velit magna convallis tortor, in mattis massa magna at risus.
5. Suspendisse nunc odio, semper eget mattis eget, sagittis sit amet arcu. Ut sed lorem nibh. Quisque euismod, erat sed condimentum euismod, erat ipsum ullamcorper sem, eu pharetra ligula lorem sit amet tortor. Mauris et mauris id lectus venenatis luctus.

I parametri da personalizzare sono colorati di rosso. Se invece usiamo quest'altro codice

<style type='text/css'>
.elenco1 ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.elenco1 ol li{
position:relative;    
margin:0 0 13px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style:decimal;
}
.elenco1 ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0;
left:-2em;
width:27px;
margin-right:8px;
padding:3px 1px 4px 0 !important;
color:#ffffff; /* Colore dei numeri */
font-size:16px; /* Dimensione dei numeri */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFYl75pMpwmIvv8KdOON-NwTcFw-95eXkIL_zSfR-MdCHJX_fji5lbkJHtng7gmgVJvX86ALHtkD3thi_id983kiZCPyzn1r2fDS2hjKavP59kesBDn3DLuP6xz2iY_mgDvN9o1G0M4I/s28/cerchio.png) no-repeat left top; /* Immagine di sfondo */
font-weight:bold;
text-align:center
}
</style>
<div class="elenco1">
<ol>
<li>Primo elemento.</li>
<li>Secondo elemento.</li>
<li>Terzo elemento.</li>
<li>Quarto elemento.</li>
<li>Quinto elemento.</li>
</ol>
</div>

otterremo quest'altro risultato

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus ultricies urna, quis commodo odio viverra non. Quisque sit amet lectus justo.
2. Duis sit amet lectus arcu. Aenean eu arcu nibh. Sed massa dui, luctus eget sollicitudin non, porta id leo. Fusce pharetra, ante eu rutrum lacinia, sem justo sodales justo, at pellentesque lectus erat non arcu. Praesent feugiat nibh vel tellus molestie quis ullamcorper erat eleifend.
3. Etiam luctus metus id dolor vehicula eget mollis quam tristique. Sed elementum scelerisque turpis et mollis. Quisque auctor, lorem a venenatis ultrices, mi risus condimentum mi, quis iaculis mi nisl eu felis.
4. Morbi ligula nisl, lobortis at dapibus sit amet, ultricies vel metus. Proin hendrerit luctus tempus. Aenean fermentum, elit at auctor faucibus, velit magna convallis tortor, in mattis massa magna at risus.
5. Suspendisse nunc odio, semper eget mattis eget, sagittis sit amet arcu. Ut sed lorem nibh. Quisque euismod, erat sed condimentum euismod, erat ipsum ullamcorper sem, eu pharetra ligula lorem sit amet tortor. Mauris et mauris id lectus venenatis luctus.

Anche in questo caso si possono personalizzare parametri e immagine di sfondo. Questi elenchi personalizzati potrebbero essere utilizzati per presentare le cose più diverse da liste di ingredienti di ricette a elenchi di regole, da schede tecniche a bibliografie. I meno esperti possono consultare il post sui codici dei colori per modificare tali parametri.