Che cos'è il tipo di stile elenco e come utilizzarlo in Tailwind?

Questo articolo illustrerà:

• Qual è il tipo di stile elenco in Tailwind CSS?
• Come utilizzare il tipo di stile elenco in Tailwind CSS?

Qual è il tipo di stile elenco in Tailwind CSS?

Il tipo di stile elenco è una proprietà CSS utilizzata per personalizzare l'aspetto dei marcatori di voci di elenco negli elenchi ordinati

e negli elenchi non ordinati
. Specifica il tipo di punto elenco o lo stile di numerazione da utilizzare per gli elementi dell'elenco.

---





---






Il tipo di stile elenco contiene tre classi, ad esempio:





elenco-disco

Imposta la proprietà 'list-style-type' su disco, che visualizza un cerchio pieno come indicatore per elenchi non ordinati '

'




elenco-decimale

Imposta la proprietà 'list-style-type' su decimal, che mostra i valori numerici decimali (1, 2, 3, ecc.) come indicatori per gli elenchi ordinati '

”.

---





---

lista-nessuna

Imposta la proprietà 'list-style-type' su none, il che significa che non viene visualizzato alcun indicatore per gli elementi dell'elenco.

Come utilizzare il tipo di stile elenco in Tailwind CSS?

Per utilizzare il tipo di stile elenco in Tailwind CSS, per prima cosa crea un programma HTML e utilizza gli elementi dell'elenco in esso specificando ' elenco-disco ' E ' elenco-decimale ” utilità. Quindi, esegui il programma HTML e visualizza l'output per la verifica:





Passaggio 1: creare una pagina Web HTML utilizzando gli elementi dell'elenco

Innanzitutto, crea un programma HTML e utilizza gli elementi dell'elenco in esso contenuti utilizzando le utilità 'list-disc' e 'list-decimal'. Ad esempio, abbiamo utilizzato i seguenti elementi:

< corpo >

< div classe = 'schermo h ml-10' >

< Ul classe = 'elenco-disco' >

< Quello > Voce di elenco 1 < / Quello >

< Quello > Voce di elenco 2 < / Quello >

< Quello > Voce di elenco 3 < / Quello >

< / Ul >

< fratello >

< ol classe = 'lista-decimale' >

< Quello > Voce di elenco 1 < / Quello >

< Quello > Voce di elenco 2 < / Quello >

< Quello > Voce di elenco 3 < / Quello >

< / ol >

< fratello >

< Ul >

< Quello > Voce di elenco 1 < / Quello >

< Quello > Voce di elenco 2 < / Quello >

< Quello > Voce di elenco 3 < / Quello >

< / Ul >

< / div >

< / corpo >

Qui,

• Il primo, '
  ” ha la classe 'list-disc' applicata che visualizza indicatori di cerchi pieni per ogni elemento dell'elenco.
  • Il secondo, '
    ” ha la classe “list-decimal” applicata che visualizza i valori decimali numerici come marcatori.
    1. L'ultimo '
       ” non ha alcuna classe di utilità applicata, quindi utilizzerà lo stile di marcatore elenco predefinito.

       Passaggio 2: visualizza la pagina Web HTML

       Quindi, esegui il programma HTML e visualizza la pagina Web per verificare l'output:

       

       L'output sopra ha mostrato gli elenchi in base ai quali sono stati stilizzati.

       Conclusione

       Il tipo di stile elenco è una proprietà CSS utilizzata per personalizzare l'aspetto dei marcatori di voci di elenco negli elenchi ordinati e non ordinati. Specifica il tipo di punto elenco o lo stile di numerazione da utilizzare per gli elementi dell'elenco. Può essere utilizzato in Tailwind specificando il ' elenco-disco ' E ' elenco-decimale ” utilità. Questo articolo ha spiegato il tipo di stile elenco e il suo utilizzo in Tailwind.