seodon.ru | CSS справочник — list-style-type
Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
Свойство CSS list-style-type используется для указания внешнего вида маркера или типа нумерации в упорядоченных (нумерованных) и неупорядоченных (маркированных) списках.
Вместо list-style-type можно использовать универсальное свойство list-style.
Тип свойства
Назначение: списки.
Применяется: к тегам <OL>, <UL>,<LI> и элементам с display: list-item.
Наследуется: да.
Значения
Значением свойства list-style-type является одно из ключевых слов, задающее внешний вид маркера или тип нумерации.
| disc | Маркер в виде кружка |
|
|---|---|---|
| circle | Маркер в виде окружности |
|
| square | Маркер в виде квадрата |
|
| decimal | Нумерация обычными арабскими числами |
|
|---|---|---|
| decimal-leading-zero | Нумерация арабскими числами с начальными нулями |
|
| upper-roman | Римские числа написанные заглавной латиницей |
|
| lower-roman | Римские числа написанные строчной латиницей |
|
| upper-latin | Заглавные латинские буквы |
|
| lower-latin | Строчные латинские буквы |
|
| upper-alpha | Заглавные латинские буквы (аналогично upper-latin) |
|
| lower-alpha | Строчные латинские буквы (аналогично lower-latin) |
|
| armenian | Традиционная армянская нумерация |
|
| georgian | Традиционная грузинская нумерация |
|
| lower-greek | Нумерация греческими строчными буквами |
|
- none — Убирает маркеры или нумерацию у списка.
- inherit — наследует значение list-style-type от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: decimal для нумерованных списков, disc для маркированных.
Синтаксис
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Пример CSS: использование list-style-type
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство list-style-type</title>
<style type="text/css">
ol {
list-style-type: lower-alpha; /* нумерация строчной латиницей */
}
</style>
</head>
<body>
<ol>
<li>Ниф-Ниф</li>
<li>Нуф-Нуф</li>
<li>Наф-Наф</li>
</ol>
</body>
</html>Результат примера
Результат.
Использование свойства CSS list-style-type.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Да | Да |
Internet Explorer 6.0 и 7.0 не понимают значение inherit, а также значения: decimal-leading-zero, upper-latin, lower-latin, armenian, georgian и lower-greek.
Настройте отдельные элементы списка с помощью этого трюка CSS
Списки — это форма представления данных, обычно используемая всеми типами документов. В HTML есть два типа списков, а именно упорядоченные и неупорядоченные списки.
В упорядоченном списке элементы обозначаются порядковыми номерами или буквами в определенном порядке. В неупорядоченном списке элементы списка обозначаются различными типами маркеров, а именно диском, кружком, квадратом или изображением.
По умолчанию элементы упорядоченного списка обозначаются цифрами, а элементы ненумерованного списка — дисковыми маркерами.
- Элемент 1
- Элемент 2
- Элемент 3
- Элемент 1
- Элемент 2
- Элемент 3
Для стилей списков существуют свойства списка CSS, с помощью которых мы можем изменить тип стиля списка, положение списка и добавить изображение в качестве типа списка, ничего, кроме изображения в качестве маркера элемента списка.
ul, ol {
/* list-style является сокращенным свойством */
list-style: list-style-type list-style-position list-style-image
} -
list-style-type— изменить стили маркеров списка -
list-style-position— изменить положение списка, два значения снаружи и внутри -
list-style-image— добавить изображение в качестве маркера для список, если изображение не отображается, будет отображаться тип списка
Итак, чтобы изменить тип маркера для списка, нам просто нужно использовать тип стиля списка CSS с нужным маркером.
Давайте посмотрим, как изменить маркеры для списка.
/* Ненумерованный список */
ul {
list-style-type: '❤️';
или /* стиль списка: '❤️'; */
}/* Упорядоченный список */
ol {
list-style: '👍'
}
Просто изменив значение типа стиля списка CSS, мы можем изменить маркеры любого списка. Возможным значением для типа стиля списка может быть что угодно, даже буквы для конкретного языка, римские цифры и т. д. Чтобы узнать о различных поддерживаемых типах стилей списка в CSS, перейдите к этой документации MDN.
Но при таком подходе все типы стилей будут одинаковыми для всех элементов списка. Чтобы настроить тип стиля для каждого отдельного элемента, нам нужно определить его с помощью правила CSS, @counter-style .
Используя @counter-style , мы можем определить пользовательский тип стиля списка для отдельных элементов списка. У него так много свойств для настройки списка. Есть три важных свойства, которые нам нужно знать, чтобы настроить типы стилей списка.
@counter-style custom-type {
система: циклическая;
символов: "😀";
суффикс: " ";
} ul {
стиль списка: пользовательский тип;
/*или тип-стиля-списка: пользовательский-тип; */
}
-
system— определяет, как должны отображаться маркеры списка. Возможные значения для него: циклические, числовые, буквенные, символьные, аддитивные или фиксированные и т. д. -
символы— здесь вам нужно указать различные типы стилей списка, которые вы хотите отобразить для элементов списка. Это могут быть цифры, алфавиты, символы и даже изображения, разделенные пробелом 9.0033 -
суффикс— обычно это должен быть пробел, чтобы после типа стиля был пробел. В качестве суффикса может быть что угодно, кроме пробела.
Давайте посмотрим на все вышеперечисленное в действии.
- Один
- Два
- Три
- Четыре
- Один
- Два
- Три
- Четыре
@counter-style custom-unordered { система
: циклическая;
символов: '❓' '✌️' '❤️' ;
суффикс: ' ';
}
/* тип стиля для нумерованного списка */
@counter-style custom-ordered {
system: fixed;
символов: '➡️' '😀' '👍';
суффикс: ' ';
}
ul {
стиль списка: пользовательский неупорядоченный;
/* или тип-стиля-списка: пользовательский-неупорядоченный; */
}
ol {
тип-стиля-списка: заказной;
}
Изображение результата размещено здесь, потому что мы не можем редактировать CSS в блоге Medium.
Чтобы увидеть фактический результат на веб-странице, см. оригинальную статью на сайте devapt.
Таким образом, используя @counter-style, мы можем добавлять отдельные типы стилей списка. Если вы видите, когда система определяется как циклическая , тот же тип стиля списка повторяется после того, как все типы выполнены, и когда он фиксированный тип стиля для номера элемента превышает количество определенных символов, получите тип стиля по умолчанию, т. е. номер для упорядоченного списка и диск для неупорядоченного списка.
Вам нужно системное значение как фиксированное только тогда, когда вы знаете, что количество элементов фиксировано, иначе лучше использовать циклический или любой другой тип.
Примечание. Safari — единственный современный браузер, не поддерживающий эту функцию CSS. Вы можете увидеть совместимость здесь.
Вот и все, что касается стилизации отдельных типов элементов списка с помощью CSS.
Я буду делиться интересными советами, хитростями и лайфхаками о веб-разработке и технологиях в Твиттере @wahVinci и Instagram @dev_apt, подписывайтесь, если вам интересно.
Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых средах, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.
Перенесите свою команду в Bit Cloud, чтобы совместно размещать компоненты и совместно работать над ними, а также значительно ускорить, масштабировать и стандартизировать разработку в команде. Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →
Узнайте больше
Как мы создаем микроинтерфейсы
Создание микроинтерфейсов для ускорения и масштабирования процесса веб-разработки.
blog.bitsrc.io
Как мы создаем систему проектирования компонентов
Создание системы дизайна с компонентами для стандартизации и масштабирования нашего процесса разработки пользовательского интерфейса.
blog.bitsrc.io
Компонуемое предприятие: руководство
Чтобы работать в 2022 году, современное предприятие должно стать компонуемым.
blog.bitsrc.io
7 инструментов для ускоренной разработки интерфейса в 2022 году
Инструменты, которые необходимо знать, чтобы создавать современные приложения интерфейса быстрее и получать больше удовольствия.
blog.bitsrc.io
Свойство типа списка стилей CSS — server2client.com
Определение
Свойство CSS list-style-type позволяет указать тип, который будет использоваться для маркера элемента списка.
Применяется к
Все элементы с ‘display: list-item;’.
Значения свойств
наследовать — свойства типа списка наследуются от родительского элемента.
Маркеры бывают трех типов: глифы, системы нумерации и алфавитные системы.
глифов.
круг
— Маркер элемента списка отображается в виде круга, фактическое отображение зависит от пользовательского агента.
диск — Маркер элемента списка отображается в виде формы диска, фактическая визуализация зависит от пользовательского агента.
квадрат — Маркер элемента списка отображается в виде квадрата, фактическое отображение зависит от пользовательского агента.
Системы нумерации.
армянский — Маркер элемента списка отображается как традиционная армянская нумерация в верхнем регистре, начинающаяся с Ա.
decimal — маркер элемента списка отображается как десятичное число, начинающееся с 1.
decimal-lead-zero — Маркер элемента списка отображается как десятичное число, начинающееся с 01.
грузинский — Маркер элемента списка отображается как традиционная грузинская нумерация в верхнем регистре, начинающаяся с .
нижний латинский — Маркер элемента списка отображается как римская цифра, начинающаяся с i.
upper-roman — маркер элемента списка отображается как римская цифра, начинающаяся с I.
Алфавитные системы.
нижний альфа-канал — Маркер элемента списка отображается как строчный ascii, начинающийся с a.
upper-alpha — Маркер элемента списка отображается как ASCII в верхнем регистре, начиная с A.
нижний греческий — маркер элемента списка отображается как строчный греческий, начинающийся с α.
нижний латинский — Маркер элемента списка отображается в виде нижнего регистра ascii, начиная с a.
upper-latin — Маркер элемента списка отображается как ASCII в верхнем регистре, начиная с A.
Значение по умолчанию
Значение по умолчанию — десятичное для упорядоченных списков и дисковое для неупорядоченных списков.
Наследство
Свойство list-style-type наследуется от родительского элемента, если к текущему элементу не применяется значение.
Аномалии браузера
IE5, IE6 и IE7 не поддерживают наследование значения свойства.
IE8 делает это с допустимым !DOCTYPE.