Was ist der Listenstiltyp und wie wird er in Tailwind verwendet?

Dieser Artikel soll Folgendes veranschaulichen:

• Was ist der Listenstiltyp in Tailwind CSS?
• Wie verwende ich den Listenstiltyp in Tailwind CSS?

Was ist der Listenstiltyp in Tailwind CSS?

Der Listenstiltyp ist eine CSS-Eigenschaft, die verwendet wird, um das Aussehen von Listenelementmarkierungen in geordneten Listen

und ungeordneten Listen
anzupassen. Es gibt die Art des Aufzählungszeichens oder den Nummerierungsstil an, der für die Listenelemente verwendet werden soll.

---





---






Der Listenstiltyp enthält drei Klassen, wie zum Beispiel:





Listen-Disc

Es setzt die Eigenschaft „list-style-type“ auf „disk“, wodurch ein gefüllter Kreis als Markierung für ungeordnete Listen angezeigt wird.

”




Listendezimalzahl

Es setzt die Eigenschaft „list-style-type“ auf „decimal“, wodurch numerische Dezimalwerte (1, 2, 3 usw.) als Markierungen für geordnete Listen angezeigt werden.

“.

---





---

list-none

Es setzt die Eigenschaft „list-style-type“ auf „none“, was bedeutet, dass für die Listenelemente keine Markierung angezeigt wird.

Wie verwende ich den Listenstiltyp in Tailwind CSS?

Um den Listenstiltyp in Tailwind CSS zu verwenden, erstellen Sie zunächst ein HTML-Programm und verwenden Sie die darin enthaltenen Listenelemente, indem Sie „ Listen-Disc ' Und ' Listendezimalzahl „Dienstprogramme. Führen Sie dann das HTML-Programm aus und sehen Sie sich die Ausgabe zur Überprüfung an:





Schritt 1: Erstellen Sie eine HTML-Webseite mit Listenelementen

Erstellen Sie zunächst ein HTML-Programm und verwenden Sie die darin enthaltenen Listenelemente mithilfe der Dienstprogramme „list-disc“ und „list-decimal“. Beispielsweise haben wir folgende Elemente verwendet:

< Körper >

< div Klasse = „h-screen ml-10“ >

< ul Klasse = „list-disc“ >

< Das > Listenpunkt 1 < / Das >

< Das > Listenpunkt 2 < / Das >

< Das > Listen Sie Punkt 3 auf < / Das >

< / ul >

< br >

< ol Klasse = „list-decimal“ >

< Das > Listenpunkt 1 < / Das >

< Das > Listenpunkt 2 < / Das >

< Das > Listen Sie Punkt 3 auf < / Das >

< / ol >

< br >

< ul >

< Das > Listenpunkt 1 < / Das >

< Das > Listenpunkt 2 < / Das >

< Das > Listen Sie Punkt 3 auf < / Das >

< / ul >

< / div >

< / Körper >

Hier,

• Der erste, '
  Auf „list-disc“ wird die Klasse „list-disc“ angewendet, die gefüllte Kreismarkierungen für jedes Listenelement anzeigt.
  • Der Zweite, '
    Auf „list-decimal“ wird die Klasse „list-decimal“ angewendet, die numerische Dezimalwerte als Markierungen anzeigt.
    1. Das Letzte '
       Auf „“ ist keine Dienstprogrammklasse angewendet, daher wird der standardmäßige Listenmarkierungsstil verwendet.

       Schritt 2: HTML-Webseite anzeigen

       Führen Sie dann das HTML-Programm aus und sehen Sie sich die Webseite an, um die Ausgabe zu überprüfen:

       

       In der obigen Ausgabe wurden die Listen angezeigt, nach denen sie gestaltet wurden.

       Abschluss

       Der Listenstiltyp ist eine CSS-Eigenschaft, die verwendet wird, um das Aussehen von Listenelementmarkierungen in geordneten und ungeordneten Listen anzupassen. Es gibt die Art des Aufzählungszeichens oder den Nummerierungsstil an, der für die Listenelemente verwendet werden soll. Es kann in Tailwind verwendet werden, indem „ Listen-Disc ' Und ' Listendezimalzahl „Dienstprogramme. In diesem Artikel wurde der Listenstiltyp und seine Verwendung in Tailwind erläutert.