L'HTML offre un modo flessibile per creare elenchi annidati attraverso i suoi elenchi ordinati e non ordinati. Questi possono essere annidati uno dentro l'altro un numero illimitato di volte per aiutare a organizzare i dati gerarchici, come le intestazioni di capitoli e sottocapitoli in un documento online. Con l'aiuto di un certo codice CSS, gli elenchi annidati possono essere disegnati per soddisfare le esigenze personalizzate, dando attributi globali all'elenco o usando uno stile diverso per ogni livello del nido.

Tipi di lista

Esistono due tipi di elenchi che è possibile utilizzare in HTML e un elemento dell'elemento di elenco che definisce gli elementi per entrambi. Il primo tipo di lista è un elenco non ordinato, che viene chiamato dal

tag. Questo fornisce un elenco puntato, sebbene sia possibile rimuovere i punti elenco all'interno del CSS impostando il tipo di elenco in "nessuno". Il secondo è un elenco ordinato, chiamato con

, che restituisce una lista numerata. Tra i tag di apertura e di chiusura, definisci ogni voce di elenco. Per esempio:

• Elemento dell'elenco 1
• Voce di elenco 2

Elenco annidato

Per creare un elenco annidato, è necessario chiamare un secondo

o
prima di un dato
1. il tag è stato chiuso. Assicurati di chiudere correttamente l'elenco annidato. Ad esempio, per creare un elenco ordinato nidificato all'interno di un elenco non ordinato, utilizzare il seguente codice:
   • Elemento dell'elenco 1
     1. Voce di elenco secondario 1
     2. Voce di elenco secondario 2
     3. Voce di elenco secondario 3
   • Voce di elenco 2

   Assicurati di chiudere ogni voce dell'elenco e ogni lista con il codice di chiusura, ad esempio

,

e .

Dichiarazione di CSS

Se si desidera personalizzare l'aspetto dell'elenco nidificato, è necessario utilizzare CSS, che sta per "Cascading Style Sheet". L'estetica e il posizionamento del CSS sono solitamente contenuti in un foglio di stile separato, che viene chiamato tra i tag head con codice simile al seguente:

Il CSS può anche essere dichiarato "In linea", che significa nello stesso attributo HTML stesso, come questo:

I CSS incorporati hanno la precedenza sul codice nel foglio di stile.

Nel foglio di stile

Il codice CSS deve essere scritto in un formato specifico per funzionare correttamente. Nel foglio di stile, dichiara il codice per ogni attributo nel seguente formato:

ul {

attributo: valore;

}

Ciò darebbe lo styling alla lista non ordinata. Per dare uno stile a un nidificato

• , usa il seguente codice:

  li li {

  attributo: valore;

  }

  Questo definisce il codice per la voce di lista di due strati in profondità. Assicurati che tutte le linee "attributo: valore" finiscano con un punto e virgola e assicurati che le parentesi graffe circondino l'elemento che stai definendo.