CSS list-style-type

1. Синтаксис
2. Возможные значения
3. @ Контр-стиль В Правило
4. символы () функция
5. Предопределенные стили счетчиков
6. числовой
7. буквенный
8. символичный
9. Длинные восточноазиатские встречные стили
10. строка
11. никто

Свойство CSS list-style-type используется для указания «типа стиля списка» (как должны быть стилизованы маркеры элементов списка).

Вы можете указать тип стиля списка как один из предопределенных стилей счетчика (например, диск, квадрат, римские цифры и т. Д.) Или использовать свой собственный стиль счетчика. Вы можете создать свой собственный стиль счетчика с помощью @ Контр-стиль at-rule, затем обратитесь к этому стилю в list-style-type, просто добавив имя этого стиля счетчика в качестве значения для list-style-type.

Вы также можете предоставить строка в качестве значения (строка становится маркером) или использовать символы () функция как быстрый способ добавить собственный стиль маркера.

Также см. Список стиль , список-стиль-позиция а также список-стиль-изображение свойства.

Синтаксис

Эти значения объяснены ниже.

Возможные значения

счетчик стиле

Указывает стиль счетчика, который будет использоваться для содержимого маркера по умолчанию. Стиль счетчика может быть определен с помощью @ Контр-стиль как правило, символы () функция или один из предопределенных стилей счетчика CSS.

Вот краткий обзор каждого из них.

@ Контр-стиль В Правило

@ Контр-стиль at-rule позволяет вам создавать свои собственные счетчики маркеров. Вы можете очень точно узнать, как выглядит маркер и как он используется.

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

Вот пример:

Это может привести к тому, что список будет выглядеть примерно так:

Неупорядоченный список с использованием Unicode Emojis яблок для пуль.

символы () функция

символы () функция похожа на урезанную версию @ Контр-стиль в властвуй. символы () Функция позволяет создавать собственный стиль прямо из самого значения свойства.

Это полезно, если вам нужно использовать стиль только один раз. Нет необходимости называть свой стиль счетчика, так как он применяется только к свойству, с которым вы его используете.

Вот тот же список из предыдущего примера, но на этот раз мы используем символы () функция для генерации стилей счетчика:

И вот результат:

Неупорядоченный список с использованием Unicode Emojis яблок для пуль.

Предопределенные стили счетчиков

Вот предопределенные стили счетчиков. Это ключевые слова, которые представляют некоторые из наиболее распространенных стилей счетчиков.

числовой

десятичные западные десятичные числа (например, 1, 2, 3, ...). десятичное ведущий-ноль Десятичные числа, дополненные начальными нулями (например, 01, 02, 03, ...) cjk-десятичные десятичные числа Хана (например, 一, 二, 三, ...) строчные римские строчные буквы ASCII римские цифры (например, i, ii, iii, ...) верхнеримские прописные латинские цифры ASCII (например, I, II, III, ...) армянская традиционная прописная армянская нумерация (например, Ա, Բ, Գ, ... ) грузинская традиционная грузинская нумерация (например, ა, ბ, გ, ...) иврит традиционная ивритская нумерация (например, ג, ב, א, ...)

буквенный

нижняя буква нижняя латинская строчные буквы ASCII (например, a, b, c, ...). верхняя-альфа верхняя латинская прописные буквы ASCII (например, A, B, C, ...). нижнегреческий строчный классический греческий (например, α, β, γ, ...) хирагана Буквенный хираганский словарь (например, あ, い, う, ...) хирагана-ироха хираганский буквенный ироха (например, い, ろ, は, ...) катакана-словарь катакана-словарь (например, ア, イ, ウ, ...) катакана-ироха катакана-буква ироха-порядок (например, イ, ロ, ハ, ...)

символичный

диск заполненный круг, похожий на U + 2022 (•) круг Полый круг, похожий на U + 25E6 (◦) квадрат Заполненный квадрат, похожий на U + 25FE (◾) раскрытие раскрыто раскрытие закрыто

Символы, подходящие для обозначения открытого или закрытого виджета раскрытия, например, при использовании HTML подробности элемент.

Например, раскрытие раскрытия может использовать U + 25B8 символ (▸) и закрытое раскрытие могут использовать U + 25BE символ (▾).

Длинные восточноазиатские встречные стили

Неофициальная японская нумерация японских кандзи. японская формальная японская нумерация кандзи. корейско-хангыльская официальная нумерация корейских хангулов. корейская-ханджа-неофициальная корейская нумерация ханджа. корейско-ханджа-формальная нумерация корейских хан (ханджа). Упрощенная китайская неформальная Упрощенная китайская неформальная нумерация. Упрощенная китайская формальная Упрощенная китайская формальная нумерация. Традиционная китайская неформальная нумерация. Традиционная китайская неформальная нумерация. cjk-ideographic Это устаревший стиль, аналогичный традиционному китайскому

строка

Определяет строка для использования в качестве содержимого маркера элемента списка по умолчанию. Строка - это символьные данные, заключенные в одинарные (') или двойные (") символы кавычек.

Вот пример:

Когда вышеупомянутый CSS применяется к списку, список должен выглядеть примерно так:

Неупорядоченный список со строкой «Не забудь», примененной к маркерному представлению.

никто

Содержимое маркера элемента списка по умолчанию отсутствует. Это полностью подавляет маркер, если список-стиль-изображение указан с допустимым изображением, или содержимое маркера задается явно через содержание имущество.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов в формате CSS в качестве единственного компонента значения своего свойства:

initial Представляет значение, указанное в качестве начального значения свойства. наследует Представляет вычисленное значение свойства на родительском элементе. unset Это значение действует как наследуемое или начальное, в зависимости от того, является ли свойство наследуемым или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если не наследуется.

Основная информация

Пример кода

Официальные характеристики

Похожие