Co to jest typ stylu listy i jak go używać w Tailwind?

Ten artykuł zilustruje:

• Jaki jest typ stylu listy w CSS Tailwind?
• Jak używać typu stylu listy w CSS Tailwind?

Jaki jest typ stylu listy w CSS Tailwind?

Typ stylu listy to właściwość CSS używana do dostosowywania wyglądu znaczników elementów listy na listach uporządkowanych

i listach nieuporządkowanych
. Określa typ punktora lub styl numeracji, który ma być używany dla elementów listy.

---





---






Typ stylu listy zawiera trzy klasy, takie jak:





płyta z listą

Ustawia właściwość „list-style-type” na disc, która wyświetla wypełnione kółko jako znacznik nieuporządkowanych list „

”




lista dziesiętna

Ustawia właściwość „list-style-type” na decimal, która pokazuje liczbowe wartości dziesiętne (1, 2, 3 itd.) jako znaczniki uporządkowanych list „

”.

---





---

brak listy

Ustawia właściwość „list-style-type” na none, co oznacza, że ​​dla elementów listy nie jest wyświetlany żaden znacznik.

Jak używać typu stylu listy w CSS Tailwind?

Aby użyć typu stylu listy w Tailwind CSS, najpierw utwórz program HTML i wykorzystaj zawarte w nim elementy listy, określając „ płyta z listą ' I ' lista dziesiętna narzędzia. Następnie uruchom program HTML i przejrzyj dane wyjściowe w celu weryfikacji:





Krok 1: Utwórz stronę internetową HTML za pomocą elementów listy

Najpierw utwórz program HTML i wykorzystaj zawarte w nim elementy listy za pomocą narzędzi „list-disc” i „list-decimal”. Na przykład wykorzystaliśmy następujące elementy:

< ciało >

< dz klasa = 'h-ekran ml-10' >

< ul klasa = „lista-dysk” >

< To > Pozycja listy 1 < / To >

< To > Pozycja listy 2 < / To >

< To > Pozycja listy 3 < / To >

< / ul >

< br >

< ol klasa = „lista dziesiętna” >

< To > Pozycja listy 1 < / To >

< To > Pozycja listy 2 < / To >

< To > Pozycja listy 3 < / To >

< / ol >

< br >

< ul >

< To > Pozycja listy 1 < / To >

< To > Pozycja listy 2 < / To >

< To > Pozycja listy 3 < / To >

< / ul >

< / dz >

< / ciało >

Tutaj,

• Pierwszy, '
  ” ma zastosowaną klasę „list-disc”, która wyświetla wypełnione okrągłe znaczniki dla każdego elementu listy.
  • Drugi, '
    ” ma zastosowaną klasę „list-decimal”, która wyświetla liczbowe wartości dziesiętne jako znaczniki.
    1. Ostatni '
       ” nie ma zastosowanej żadnej klasy narzędzi, więc użyje domyślnego stylu znacznika listy.

       Krok 2: Wyświetl stronę internetową w formacie HTML

       Następnie uruchom program HTML i wyświetl stronę internetową, aby zweryfikować dane wyjściowe:

       

       Powyższe wyjście wyświetliło listy, według których zostały stylizowane.

       Wniosek

       Typ stylu listy to właściwość CSS używana do dostosowywania wyglądu znaczników elementów listy na listach uporządkowanych i nieuporządkowanych. Określa typ punktora lub styl numeracji, który ma być używany dla elementów listy. Można go używać w Tailwind, określając „ płyta z listą ' I ' lista dziesiętna narzędzia. W tym artykule wyjaśniono typ stylu listy i jego użycie w Tailwind.