Ce este tipul de stil de listă și cum se utilizează în Tailwind?

Acest articol va ilustra:

• Care este tipul de stil de listă în Tailwind CSS?
• Cum se utilizează tipul de stil Listă în Tailwind CSS?

Care este tipul de stil de listă în Tailwind CSS?

Tipul de stil de listă este o proprietate CSS care este utilizată pentru a personaliza aspectul marcatorilor de elemente de listă în liste ordonate

și liste neordonate
. Specifică tipul de marcator sau stilul de numerotare care va fi utilizat pentru articolele din listă.

---





---






Tipul de stil de listă conține trei clase, cum ar fi:





listă-disc

Setează proprietatea „list-style-type” la disc, care afișează un cerc umplut ca marcator pentru listele neordonate „

”




listă-zecimală

Setează proprietatea „list-style-type” la zecimală, care arată valori numerice zecimale (1, 2, 3 etc.) ca marcatori pentru liste ordonate „

”.

---





---

lista-niciuna

Setează proprietatea „list-style-type” la niciunul, ceea ce înseamnă că nu este afișat niciun marcator pentru elementele din listă.

Cum să utilizați tipul de stil Listă în Tailwind CSS?

Pentru a utiliza tipul de stil de listă în Tailwind CSS, mai întâi, creați un program HTML și utilizați elementele listei din acesta specificând „ listă-disc ' și ' listă-zecimală ” utilități. Apoi, rulați programul HTML și vizualizați rezultatul pentru verificare:





Pasul 1: Creați o pagină web HTML utilizând elemente din listă

Mai întâi, creați un program HTML și utilizați elementele listei din el folosind utilitatile „list-disc” și „list-decimal”. De exemplu, am folosit următoarele elemente:

< corp >

< div clasă = „h-screen ml-10” >

< ul clasă = 'list-disc' >

< acea > Lista articolului 1 < / acea >

< acea > Lista articolului 2 < / acea >

< acea > Lista articolului 3 < / acea >

< / ul >

< br >

< ol clasă = 'listă-zecimală' >

< acea > Lista articolului 1 < / acea >

< acea > Lista articolului 2 < / acea >

< acea > Lista articolului 3 < / acea >

< / ol >

< br >

< ul >

< acea > Lista articolului 1 < / acea >

< acea > Lista articolului 2 < / acea >

< acea > Lista articolului 3 < / acea >

< / ul >

< / div >

< / corp >

Aici,

• Primul, '
  ” are aplicată clasa „list-disc” care afișează marcatori de cerc umplut pentru fiecare element din listă.
  • Al doilea, '
    ” are aplicată clasa „list-decimal” care afișează valori numerice zecimale ca markeri.
    1. Ultimul '
       ” nu are aplicată nicio clasă de utilitate, deci va folosi stilul implicit de marcare a listei.

       Pasul 2: Vizualizați pagina web HTML

       Apoi, rulați programul HTML și vizualizați pagina web pentru a verifica rezultatul:

       

       Ieșirea de mai sus a afișat listele în funcție de care au fost stilate.

       Concluzie

       Tipul de stil de listă este o proprietate CSS care este utilizată pentru a personaliza aspectul marcatorilor de elemente din listă în liste ordonate și neordonate. Specifică tipul de marcator sau stilul de numerotare care va fi utilizat pentru articolele din listă. Poate fi folosit în Tailwind specificând „ listă-disc ' și ' listă-zecimală ” utilități. Acest articol a explicat despre tipul de stil de listă și despre utilizarea acestuia în Tailwind.