Какво е List Style Type и как да го използвате в Tailwind?

Тази статия ще илюстрира:

• Какъв е типът стил на списък в Tailwind CSS?
• Как да използвам типа стил на списък в CSS на Tailwind?

Какво представлява типът стил на списък в Tailwind CSS?

Типът стил на списък е свойство на CSS, което се използва за персонализиране на външния вид на маркерите на елементи от списъка в подредени списъци

и неподредени списъци
. Той определя вида на символа или стила на номериране, който да се използва за елементите от списъка.

---





---






Типът стил на списък съдържа три класа, като например:





списък-диск

Той задава свойството „list-style-type“ на disc, което показва запълнен кръг като маркер за неподредени списъци

”




списък-десетичен

Той задава свойството „list-style-type“ на decimal, което показва числови десетични стойности (1, 2, 3 и т.н.) като маркери за подредени списъци

”.

---





---

списък-няма

Той задава свойството „list-style-type“ на none, което означава, че не се показва маркер за елементите от списъка.

Как да използвам типа стил на списък в CSS на Tailwind?

За да използвате стиловия тип списък в Tailwind CSS, първо направете HTML програма и използвайте елементите на списъка в нея, като посочите „ списък-диск ' и ' списък-десетичен ” комунални услуги. След това стартирайте HTML програмата и вижте изхода за проверка:





Стъпка 1: Създайте HTML уеб страница с помощта на елементи от списък

Първо направете HTML програма и използвайте елементите на списъка в нея, като използвате помощните програми „list-disc“ и „list-decimal“. Например използвахме следните елементи:

< тяло >

< див клас = 'h-screen ml-10' >

< ул клас = 'списък-диск' >

< че > Елемент от списък 1 < / че >

< че > Елемент от списък 2 < / че >

< че > Елемент от списъка 3 < / че >

< / ул >

< бр >

< ол клас = 'списък-десетичен' >

< че > Елемент от списък 1 < / че >

< че > Елемент от списък 2 < / че >

< че > Елемент от списъка 3 < / че >

< / ол >

< бр >

< ул >

< че > Елемент от списък 1 < / че >

< че > Елемент от списък 2 < / че >

< че > Елемент от списъка 3 < / че >

< / ул >

< / див >

< / тяло >

Тук,

• Първият, '
  ” има приложен клас „списък-диск”, който показва запълнени кръгови маркери за всеки елемент от списъка.
  • Секундата, '
    ” има приложен клас „списък-десетичен”, който показва числови десетични стойности като маркери.
    1. Последният '
       ” няма приложен клас на полезност, така че ще използва стила на маркера на списъка по подразбиране.

       Стъпка 2: Вижте HTML уеб страница

       След това стартирайте HTML програмата и прегледайте уеб страницата, за да проверите резултата:

       

       Горният резултат показва списъците, според които са били стилизирани.

       Заключение

       Тип стил на списък е свойство на CSS, което се използва за персонализиране на външния вид на маркерите на елементи от списъка в подредени и неподредени списъци. Той определя вида на символа или стила на номериране, който да се използва за елементите от списъка. Може да се използва в Tailwind, като посочите „ списък-диск ' и ' списък-десетичен ” комунални услуги. Тази статия обяснява типа стил на списък и използването му в Tailwind.