Ano ang Uri ng Estilo ng Listahan at Paano Ito Gamitin sa Tailwind?

Ang artikulong ito ay maglalarawan:

• Ano ang Uri ng Estilo ng Listahan sa Tailwind CSS?
• Paano Gamitin ang Uri ng Estilo ng Listahan sa Tailwind CSS?

Ano ang Uri ng Estilo ng Listahan sa Tailwind CSS?

Ang uri ng istilo ng listahan ay isang CSS property na ginagamit upang i-customize ang hitsura ng mga marker ng item sa listahan sa mga ordered list

at unordered lists
. Tinutukoy nito ang uri ng bala o istilo ng pagnunumero na gagamitin para sa mga item sa listahan.

---





---






Ang uri ng istilo ng listahan ay naglalaman ng tatlong klase, gaya ng:





listahan-disc

Itinatakda nito ang property na 'list-style-type' sa disc, na nagpapakita ng punong bilog bilang marker para sa mga hindi nakaayos na listahan '

”




listahan-decimal

Itinatakda nito ang property na 'list-style-type' sa decimal, na nagpapakita ng mga numeric decimal value (1, 2, 3, atbp.) bilang mga marker para sa mga order na listahan '

”.

---





---

listahan-wala

Itinatakda nito ang property na 'type-style-type' sa wala, na nangangahulugang walang ipinapakitang marker para sa mga item sa listahan.

Paano Gamitin ang Uri ng Estilo ng Listahan sa Tailwind CSS?

Para magamit ang uri ng istilo ng listahan sa Tailwind CSS, gumawa muna ng HTML program at gamitin ang mga elemento ng listahan sa pamamagitan ng pagtukoy sa “ listahan-disc 'at' listahan-decimal ” mga utility. Pagkatapos, patakbuhin ang HTML program at tingnan ang output para sa pag-verify:





Hakbang 1: Lumikha ng HTML Web Page Gamit ang Mga Listahan ng Item

Una, gumawa ng HTML program at gamitin ang mga elemento ng listahan sa loob nito gamit ang 'list-disc' at 'list-decimal' na mga utility. Halimbawa, ginamit namin ang mga sumusunod na elemento:

< katawan >

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

< ul klase = 'list-disc' >

< na > Listahan ng item 1 < / na >

< na > Listahan ng item 2 < / na >

< na > Listahan ng item 3 < / na >

< / ul >

< br >

< ol klase = 'list-decimal' >

< na > Listahan ng item 1 < / na >

< na > Listahan ng item 2 < / na >

< na > Listahan ng item 3 < / na >

< / ol >

< br >

< ul >

< na > Listahan ng item 1 < / na >

< na > Listahan ng item 2 < / na >

< na > Listahan ng item 3 < / na >

< / ul >

< / div >

< / katawan >

dito,

• Ang una, '
  ” ay inilapat ang klase ng 'list-disc' na nagpapakita ng mga punong marker ng bilog para sa bawat item sa listahan.
  • Ang ikalawa, '
    Ang ” ay may inilapat na klase na “list-decimal” na nagpapakita ng mga numeric decimal value bilang mga marker.
    1. Ang huli '
       ” ay walang anumang uri ng utility na inilapat, kaya gagamitin nito ang default na istilo ng marker ng listahan.

       Hakbang 2: Tingnan ang HTML Web Page

       Pagkatapos, patakbuhin ang HTML program at tingnan ang web page upang i-verify ang output:

       

       Ang output sa itaas ay nagpakita ng mga listahan ayon sa kung saan sila ay naka-istilo.

       Konklusyon

       Ang uri ng istilo ng listahan ay isang CSS property na ginagamit upang i-customize ang hitsura ng mga marker ng item sa listahan sa mga nakaayos at hindi nakaayos na mga listahan. Tinutukoy nito ang uri ng bala o istilo ng pagnunumero na gagamitin para sa mga item sa listahan. Maaari itong gamitin sa Tailwind sa pamamagitan ng pagtukoy sa ' listahan-disc 'at' listahan-decimal ” mga utility. Ipinaliwanag ng artikulong ito ang tungkol sa uri ng istilo ng listahan at ang paggamit nito sa Tailwind.