Mikä on List Style Type ja kuinka sitä käytetään Tailwindissä?

Tämä artikkeli havainnollistaa:

• Mikä on Tailwind CSS:n luettelotyylityyppi?
• Kuinka käyttää luettelotyylityyppiä Tailwind CSS:ssä?

Mikä on Tailwind CSS:n luettelotyylityyppi?

List style type on CSS-ominaisuus, jota käytetään mukauttamaan listakohteiden merkkien ulkoasua järjestetyissä luetteloissa

ja järjestämättömissä luetteloissa
. Se määrittää luettelon kohteissa käytettävän luettelomerkin tai numerointityylin.

---





---






Luettelotyylityyppi sisältää kolme luokkaa, kuten:





lista-levy

Se asettaa 'list-style-type' -ominaisuuden levylle, joka näyttää täytetyn ympyrän järjestämättömien luetteloiden merkkinä '

”




lista-desimaali

Se asettaa 'list-style-type' -ominaisuuden desimaaliksi, mikä näyttää numeeriset desimaaliarvot (1, 2, 3 jne.) järjestetyille luetteloille.

”.

---





---

lista-ei mitään

Se asettaa 'list-style-type' -ominaisuuden arvoksi none, mikä tarkoittaa, että luettelokohdille ei näytetä merkkiä.

Kuinka käyttää luettelotyylityyppiä Tailwind CSS:ssä?

Jos haluat käyttää listatyylityyppiä Tailwind CSS:ssä, tee ensin HTML-ohjelma ja hyödynnä siinä olevia listaelementtejä määrittämällä ' lista-levy ' ja ' lista-desimaali ”apuohjelmat. Suorita sitten HTML-ohjelma ja tarkastele tulostetta vahvistusta varten:





Vaihe 1: Luo HTML-verkkosivu luettelokohteiden avulla

Tee ensin HTML-ohjelma ja hyödynnä siinä olevia listaelementtejä 'list-disc'- ja 'list-decimal'-apuohjelmilla. Olemme käyttäneet esimerkiksi seuraavia elementtejä:

< kehon >

< div luokkaa = 'h-screen ml-10' >

< ul luokkaa = 'lista-levy' >

< että > Luettelon kohta 1 < / että >

< että > Luettelon kohta 2 < / että >

< että > Luettelon kohta 3 < / että >

< / ul >

< br >

< ol luokkaa = 'lista-desimaali' >

< että > Luettelon kohta 1 < / että >

< että > Luettelon kohta 2 < / että >

< että > Luettelon kohta 3 < / että >

< / ol >

< br >

< ul >

< että > Luettelon kohta 1 < / että >

< että > Luettelon kohta 2 < / että >

< että > Luettelon kohta 3 < / että >

< / ul >

< / div >

< / kehon >

Tässä,

• Ensimmäinen, '
  ' on 'list-disc'-luokka, joka näyttää täytetyt ympyrämerkit jokaiselle luettelokohdalle.
  • Toinen, '
    ' on käytössä 'list-decimal'-luokka, joka näyttää numeeriset desimaaliarvot markkereina.
    1. Viimeinen '
       ” ei ole käytössä mitään hyödyllisyysluokkaa, joten se käyttää oletusarvoista luettelomerkkityyliä.

       Vaihe 2: Näytä HTML-verkkosivu

       Suorita sitten HTML-ohjelma ja tarkastele verkkosivua varmistaaksesi tulosten:

       

       Yllä oleva tulos on näyttänyt luettelot, joiden mukaan ne on muotoiltu.

       Johtopäätös

       Luettelotyylityyppi on CSS-ominaisuus, jota käytetään mukauttamaan luettelokohdemerkkien ulkoasua järjestetyissä ja järjestämättömissä luetteloissa. Se määrittää luettelon kohteissa käytettävän luettelomerkin tai numerointityylin. Sitä voidaan käyttää Tailwindissä määrittämällä ' lista-levy ' ja ' lista-desimaali ”apuohjelmat. Tässä artikkelissa on selitetty listatyylityypistä ja sen käytöstä Tailwindissä.