Pubblicato il 04/07/14e aggiornato il

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

elenco-puntato

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

elenco-numerato

 

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

elenco-letttere-maiuscole

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

elenco-lettere-minuscole

 

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

elenchi-nidificati

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

elenchi-cerchietti

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://lh4.googleusercontent.com/-6o-hCK6GULw/UiEydedhX2I/AAAAAAAAjTI/_u9YCgNgGwI/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 

elenco-marcatore-immagine

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

elenco-senza-stile

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.





5 commenti :

  1. cia ernesto come hai visto quando apre gimp mi appare quella schermata...fino ad oggi pomeriggio nessun problema....ho fatto anche un ripristino del pc ma nulla da fare

    RispondiElimina
    Risposte
    1. Non te lo so dire. Prova a reinstallare Gimp scaricando l'ultima versione. Prima dell'installazione clicca con il destro del mouse sul file e scegli di controllare la compatibilità per poi installarlo come amministratore
      @#

      Elimina
  2. Ciao Ernesto, ponendo di voler personalizzare il simboletto che appare come elenco puntato del widget Etichette (pallino, trattino ecc..) sostituendolo con un'immagine personalizzata, qual'è la struttura di codice da inserire? Ho fatto qualche tentativo ma riesco solo a modificare lo sfondo... grazie mille!

    RispondiElimina
    Risposte
    1. Seguimi i prossimi giorni che ci faccio un post. Intanto salvo il commento
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.