Что такое тип стиля списка и как его использовать в Tailwind?

Эта статья проиллюстрирует:

• Что такое тип стиля списка в Tailwind CSS?
• Как использовать тип стиля списка в Tailwind CSS?

Что такое тип стиля списка в Tailwind CSS?

Тип стиля списка — это свойство CSS, которое используется для настройки внешнего вида маркеров элементов списка в упорядоченных списках

и неупорядоченных списках
. Он указывает тип маркера или стиль нумерации, который будет использоваться для элементов списка.

---





---






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





список-диск

Он устанавливает для свойства «list-style-type» значение disk, которое отображает закрашенный кружок в качестве маркера для неупорядоченных списков. <ул> ”





список-десятичный

Он устанавливает для свойства «list-style-type» значение decimal, которое показывает числовые десятичные значения (1, 2, 3 и т. д.) в качестве маркеров для упорядоченных списков. <ол> ».

---





---

список-нет

Он устанавливает для свойства list-style-type значение none, что означает, что для элементов списка не отображается маркер.

Как использовать тип стиля списка в Tailwind CSS?

Чтобы использовать тип стиля списка в Tailwind CSS, сначала создайте программу HTML и используйте элементы списка в ней, указав « список-диск ' и ' список-десятичный коммунальные услуги. Затем запустите программу HTML и просмотрите вывод для проверки:





Шаг 1: Создайте веб-страницу HTML, используя элементы списка

Сначала создайте HTML-программу и используйте в ней элементы списка с помощью утилит «list-disc» и «list-decimal». Например, мы использовали следующие элементы:

< тело >

< див сорт '=' 'ч-экран мл-10' >

< ул сорт '=' 'список-диск' >

< что > Элемент списка 1 < / что >

< что > Элемент списка 2 < / что >

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

< / ул >

< бр >

< ол сорт '=' 'десятичный список' >

< что > Элемент списка 1 < / что >

< что > Элемент списка 2 < / что >

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

< / ол >

< бр >

< ул >

< что > Элемент списка 1 < / что >

< что > Элемент списка 2 < / что >

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

< / ул >

< / див >

< / тело >

Здесь,

• Первый, ' <ул> » применяется класс «list-disc», который отображает закрашенные круглые маркеры для каждого элемента списка.
• Второй, ' <ол> » применяется класс «list-decimal», который отображает числовые десятичные значения в качестве маркеров.
• Последний ' <ул> ” не имеет прикладного класса, поэтому будет использоваться стиль маркера списка по умолчанию.

Шаг 2. Просмотр веб-страницы в формате HTML

Затем запустите программу HTML и просмотрите веб-страницу, чтобы проверить вывод:



Приведенный выше вывод отображает списки, в соответствии с которыми они были оформлены.

Заключение

Тип стиля списка — это свойство CSS, которое используется для настройки внешнего вида маркеров элементов списка в упорядоченных и неупорядоченных списках. Он указывает тип маркера или стиль нумерации, который будет использоваться для элементов списка. Его можно использовать в Tailwind, указав « список-диск ' и ' список-десятичный коммунальные услуги. В этой статье объясняется тип стиля списка и его использование в Tailwind.