Wat is lijststijltype en hoe gebruik je het in Tailwind?

Dit artikel illustreert:

• Wat is het lijststijltype in Tailwind CSS?
• Hoe gebruik ik het lijststijltype in Tailwind CSS?

Wat is het lijststijltype in Tailwind CSS?

Lijststijltype is een CSS-eigenschap die wordt gebruikt om het uiterlijk van lijstitemmarkeringen in geordende lijsten

en ongeordende lijsten
aan te passen. Het specificeert het type opsommingsteken of nummeringsstijl dat moet worden gebruikt voor de lijstitems.

---





---






Het type lijststijl bevat drie klassen, zoals:





lijst-schijf

Het stelt de eigenschap 'list-style-type' in op schijf, die een gevulde cirkel weergeeft als de markering voor ongeordende lijsten '

”




lijst-decimaal

Het stelt de eigenschap 'list-style-type' in op decimaal, wat numerieke decimale waarden (1, 2, 3, enz.) weergeeft als de markeringen voor geordende lijsten '

”.

---





---

lijst-geen

Het stelt de eigenschap 'list-style-type' in op none, wat betekent dat er geen markering wordt weergegeven voor de lijstitems.

Hoe gebruik ik het lijststijltype in Tailwind CSS?

Om het lijststijltype in Tailwind CSS te gebruiken, maakt u eerst een HTML-programma en gebruikt u de lijstelementen daarin door de ' lijst-schijf ' En ' lijst-decimaal ' nutsvoorzieningen. Voer vervolgens het HTML-programma uit en bekijk de uitvoer ter verificatie:





Stap 1: maak een HTML-webpagina met behulp van lijstitems

Maak eerst een HTML-programma en gebruik de lijstelementen erin met behulp van de hulpprogramma's 'list-disc' en 'list-decimal'. Zo hebben we de volgende elementen gebruikt:

< lichaam >

< div klas = 'h-scherm ml-10' >

< ul klas = 'lijst-schijf' >

< Dat > Lijst item 1 < / Dat >

< Dat > Lijstitem 2 < / Dat >

< Dat > Lijstitem 3 < / Dat >

< / ul >

< br >

< ol klas = 'lijst-decimaal' >

< Dat > Lijst item 1 < / Dat >

< Dat > Lijstitem 2 < / Dat >

< Dat > Lijstitem 3 < / Dat >

< / ol >

< br >

< ul >

< Dat > Lijst item 1 < / Dat >

< Dat > Lijstitem 2 < / Dat >

< Dat > Lijstitem 3 < / Dat >

< / ul >

< / div >

< / lichaam >

Hier,

• De eerste, '
  ' heeft de klasse 'list-disc' toegepast die gevulde cirkelmarkeringen weergeeft voor elk lijstitem.
  • De seconde, '
    ' heeft de klasse 'list-decimal' toegepast die numerieke decimale waarden als markeringen weergeeft.
    1. De laatste '
       ” heeft geen gebruiksklasse toegepast, dus het zal de standaard lijstmarkeringsstijl gebruiken.

       Stap 2: HTML-webpagina bekijken

       Voer vervolgens het HTML-programma uit en bekijk de webpagina om de uitvoer te verifiëren:

       

       De bovenstaande uitvoer heeft de lijsten weergegeven volgens welke ze zijn opgemaakt.

       Conclusie

       Lijststijltype is een CSS-eigenschap die wordt gebruikt om het uiterlijk van lijstitemmarkeringen in geordende en ongeordende lijsten aan te passen. Het specificeert het type opsommingsteken of nummeringsstijl dat moet worden gebruikt voor de lijstitems. Het kan in Tailwind worden gebruikt door de ' lijst-schijf ' En ' lijst-decimaal ' nutsvoorzieningen. Dit artikel heeft uitleg gegeven over het type lijststijl en het gebruik ervan in Tailwind.