List style type css цифры

Свойство list-style-type

Свойство list-style-type позволяет для списка ul вместо маркеров-точек сделать квадраты или окружности. Для списка ol вместо обычных цифр можно сделать римские, нумерацию в виде букв: латинских или греческих.

Синтаксис

Значения для ul

Значение	Описание
circle	Создает маркеры в виде кружков.
disc	Создает маркеры в виде закрашенных кружков.
square	Создает маркеры в виде квадратиков.
none	Убирает маркеры.

Значение по умолчанию: disc .

Значения для ol

Значение	Описание
armenian	Традиционная армянская нумерация.
decimal	Арабские числа.
decimal-leading-zero	Арабские числа с нулем впереди для цифр меньше десяти.
georgian	Традиционная грузинская нумерация.
lower-alpha	Строчные латинские буквы.
lower-greek	Строчные греческие буквы.
lower-latin	Это значение аналогично lower-alpha.
lower-roman	Римские числа в нижнем регистре.
upper-alpha	Заглавные латинские буквы.
upper-latin	Это значение аналогично upper-alpha.
upper-roman	Римские числа в верхнем регистре.
none	Убирает маркеры.

Значение по умолчанию: decimal .

Источник

list — style — type

Чаще всего этим свойством сбрасывают маркеры списка. Но можно и выбрать какой-то интересный маркер взамен стандартных.

Обновлено 23 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

-список), чтобы скрыть внешний вид, но оставить семантику тегов.

Список возможных значений list — style — type ограничен. Если нужно больше возможностей: list — style — image позволяет задать изображение вместо маркера, а в скором времени в спецификацию добавят @counter — style . Stay tuned! 🤓

Пример

Скопировать ссылку «Пример» Скопировано

По умолчанию маркированные списки имеют значение list — style — type : disc (маркер в виде точки), а нумерованные — decimal (арабские цифры с точкой):

или
(благодаря тому, что это свойство наследуется «вглубь»), так и его
-элементу и вообще любой сущности, у которой задано свойство display : list — item .

Демо разных значений list — style — type

Скопировать ссылку «Демо разных значений list-style-type» Скопировано

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 ul  list-style-type: square;> ul  list-style-type: square; >    Скопировать Скопировано Не удалось скопировать   

Свойство list — style — type может принимать одно из нескольких типов значений, которые имеют даже целый раздел в спецификации, описывающий различные виды этих счётчиков.

Числовые

Скопировать ссылку «Числовые» Скопировано

• decimal западные десятичные числа (1, 2, 3, . 98, 99, 100);
• decimal — leading — zero десятичные числа с предшествующим нулём (01, 02, 03, . 98, 99, 100);

Другие числа в других языковых культурах:

• lower — roman строчная римская нумерация (i, ii, iii, . xcviii, xcix, c);
• upper — roman заглавная римская нумерация (I, II, III, . XCVIII, XCIX, C);
• arabic — indic арабские (индийские) цифры (١‎, ٢‎, ٣‎, ٤‎, . ٩٨‎, ٩٩‎, ١٠٠‎);
• lower — armenian строчная армянская нумерация (ա, բ, գ, . ղը, ղթ, ճ);
• bengali бенгальские цифры (১, ২, ৩, . ৯৮, ৯৯, ১০০);
• cambodian / khmer кхмерские цифры (១, ២, ៣, . ៩៨, ៩៩, ១០០);
• cjk — decimal ханские десятичные цифры (一, 二, 三, . 九八, 九九, 一〇〇);
• georgian традиционные грузинские цифры (ა, ბ, გ, . ჟჱ, ჟთ, რ);
• devanagari индийские цифры деванагари (१, २, ३, . ९८, ९९, १००);
• gujarati индийские цифры гуджарати (૧, ૨, ૩, . ૯૮, ૯૯, ૧૦૦);
• gurmukhi индийские цифры гурсукхи (੧, ੨, ੩, . ੯੮, ੯੯, ੧੦੦);
• hebrew традиционные еврейские цифры (א‎, ב‎, ג‎, . צח‎, צט‎, ק‎);
• kannada индийские цифры каннада (೧, ೨, ೩, . ೯೮, ೯೯, ೧೦೦);
• malayalam индийские цифры малаялам (൧, ൨, ൩, . ൯൮, ൯൯, ൧൦൦);
• tamil индийские тамильские цифры (௧, ௨, ௩, . ௯௮, ௯௯, ௧௦௦);
• oriya индийские цифры одия (ория) (୧, ୨, ୩, . ୯୮, ୯୯, ୧୦୦);
• lao лаосские цифры (໑, ໒, ໓, . ໙໘, ໙໙, ໑໐໐);
• mongolian монгольские цифры (᠑, ᠒, ᠓, . ᠙᠘, ᠙᠙, ᠑᠐᠐);
• myanmar бирманские (мьянманские) цифры (၁, ၂, ၃, . ၉၈, ၉၉, ၁၀၀);
• persian персидские цифры (۱, ۲, ۳, ۴, . ۹۸, ۹۹, ۱۰۰);
• telugu индийские цифры телугу (౧, ౨, ౩, . ౯౮, ౯౯, ౧౦౦);
• thai тайские цифры (๑, ๒, ๓, . ๙๘, ๙๙, ๑๐๐);
• tibetan тибетские цифры (༡, ༢, ༣, . ༩༨, ༩༩, ༡༠༠).

Алфавитные

Скопировать ссылку «Алфавитные» Скопировано

• lower — alpha / lower — latin строчные латинские буквы (a, b, c, . z, aa, ab);
• upper — alpha / upper — latin заглавные латинские буквы (A, B, C, . Z, AA, AB);

Другие алфавиты в других языковых культурах:

• lower — greek строчные греческие буквы (e.g., α, β, γ, . ω, αα, αβ);
• hiragana буквы на языке Хирагана (японская слоговая азбука) в алфавитном порядке (e.g., あ, い, う, . ん, ああ, あい);
• hiragana — iroha буквы на языке Хирагана-ироха (японская слоговая азбука) в алфавитном порядке (e.g., い, ろ, は, . す, いい, いろ);
• katakana буквы на языке Катакана (японская слоговая азбука) в алфавитном порядке (e.g., ア, イ, ウ, . ン, アア, アイ);
• katakana — iroha буквы на языке Катакана-ироха (японская слоговая азбука) в алфавитном порядке (e.g., イ, ロ, ハ, . ス, イイ, イロ).

Символьные

Скопировать ссылку «Символьные» Скопировано

• disc точка, похожая на символ на • U+2022 BULLET;
• circle кружок, похожий на символ ◦ U+25E6 WHITE BULLET;
• square закрашенный квадрат, похожий на символ ◾ U+25FE BLACK MEDIUM SMALL SQUARE;
• disclosure — open и disclosure — closed символы открытого и закрытого списка как у элемента .

) можно задать стартовое значение с помощью атрибута start (например, для меню пагинации).

Список без счётчика

Скопировать ссылку «Список без счётчика» Скопировано

Есть случаи, когда нам нужно иметь семантику списка, но не нужны никакие маркеры или числа, например, меню, список карточек товара или статей. Если мы зададим списку list — style — type : none , то сохраним порядок элементов (для скринридеров) без «лишнего» оформления:

    Статьи   Авторы   Контакты   ul style="list-style-type: none"> li> a href="/articles">Статьиa> li> li> a href="/authors">Авторыa> li> li> a href="/contacts">Контактыa> li> ul>    Скопировать Скопировано Не удалось скопировать   

Пример вёрстки списка статей или товаров:

     
Обзор кафе «Тарелко эль Торреро» 
Григорий Гаспатчев     
Заказываем пиццу из «Саранчи» 
Мария Пепперони     
Где попробовать тэппанъяки? 
Василиса Васаби    ol style="list-style-type: none"> li> article> h2>Обзор кафе «Тарелко эль Торреро»h2> address>Григорий Гаспатчевaddress> article> li> li> article> h2>Заказываем пиццу из «Саранчи»h2> address>Мария Пепперониaddress> article> li> li> article> h2>Где попробовать тэппанъяки?h2> address>Василиса Васабиaddress> article> li> ol>    Скопировать Скопировано Не удалось скопировать   

Так же, устанавливая list — style — type : none можно создать стилизованные списки, главное не забыть прописать свойство content :

 li  position: relative;> li::before  content: ""; width: 15px; height: 15px; border-radius: 50%; background-color: #ed6742; position: absolute; left: -25px; top: 5px;> li  position: relative; > li::before  content: ""; width: 15px; height: 15px; border-radius: 50%; background-color: #ed6742; position: absolute; left: -25px; top: 5px; >    Скопировать Скопировано Не удалось скопировать   

Не забывайте о свойстве content у псевдоэлемента : : before .

Кастомные счётчики с @counter — style

Скопировать ссылку «Кастомные счётчики с @counter-style» Скопировано

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

 @counter-style circled-alpha  system: fixed; symbols: 😁 😇 😋 🤪 😎; suffix: " ";> .list  list-style: circled-alpha;> @counter-style circled-alpha  system: fixed; symbols: 😁 😇 😋 🤪 😎; suffix: " "; > .list  list-style: circled-alpha; >    Скопировать Скопировано Не удалось скопировать   

Свойство @counter — style поддерживается не во всех браузерах. Например, в Safari пример отобразится некорректно и вместо заданных символов отрисует просто список по умолчанию:

Источник

list-style-type

list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список

Нумерованный список

armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4. ). decimal-leading-zero
Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d. ). lower-greek Строчные греческие буквы (α, β, γ, δ. ). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v. ). upper-alpha Заглавные латинские буквы (A, B, C, D. ). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V. ). none Отменяет маркеры для списка. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

1. Lorem ipsum dolor sit amet
2. Consectetuer adipiscing elit
3. Sed diem nonummy nibh euismod
4. Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства list-style-type

Объектная модель

[window.]document.getElementById(» elementID «).style.listStyleType

Браузеры

и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin , inheirt . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов ( ul < float: left; >).

Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ. ).

CSS по теме

Источник