- list — style — type
- Кратко
- Пример
- Демо разных значений list — style — type
- Как пишется
- Числовые
- Алфавитные
- Символьные
- Список без счётчика
- Кастомные счётчики с @counter — style
- Как сделать список без точек в HTML
- Отключение буллитов в CSS
- Отключение буллита у определенного элемента списка
- Как заменить буллиты на изображения
- Дополнительные материалы:
- Списки в CSS
- Css убрать точки ссылок
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 пример отобразится некорректно и вместо заданных символов отрисует просто список по умолчанию:
Как сделать список без точек в HTML
Список — часто повторяющийся на странице элемент, он может принимать разные формы, использоваться для перечисления похожих объектов, быть списком услуг, адресов или карточек товаров в каталоге.
- каждый его элемент автоматически будет обозначен точкой или так называемым буллитом. Это слово происходит от английского bullet — типографский знак для выделения элементов списка.
Но если вы верстаете, например, карточки товаров, перечисление услуг или список преимуществ в виде сетки с иллюстрациями, то явно будут мешать лишние символы.
Как сделать список без буллитов, если они не нужны?
Отключение буллитов у списка в теге
⚠️ Несмотря на то, что стиль, прописанный прямо в файле HTML, точно сработает, лучше выносить стили в отдельный файл CSS. Иногда встречается стилизация списка по тегу, но это тоже не самый лучший вариант.
Если на сайте изменится дизайн или наполнение, стилизация по тегу усложнит внесение корректировок. Поэтому практичнее прописать все стили в файле CSS. Тогда при переделке сайта достаточно убрать или заменить определенное свойство и при этом не менять ничего в вёрстке.
Отключение буллитов в CSS
Самый актуальный способ убрать буллиты из списка — использовать свойство list-style-type в файле со стилями. Чтобы задать свойство, присвойте списку ul класс, например, nobullet .
Тогда стилизация этого класса будет выглядеть так:
- с классом nobullet примут значение родительского, и буллиты исчезнут.
👉 CSS-свойство list-style-type отвечает не только за удаление буллитов, также у него есть другие полезные значения, которые позволят изменять вид стандартного буллита.
Если на странице несколько списков, в одном нужны буллиты, а в других нет, присвойте им разные классы и сверстайте каждый список в нужном стиле.
Отключение буллита у определенного элемента списка
Как заменить буллиты на изображения
В некоторых ситуациях вместо буллитов необходимо разместить тематические иконки или картинки. Например, в списках преимуществ на лендингах, описании услуг или перечне продуктов.
Для решения такой задачи применяется CSS-свойство list-style-image . Подробнее о нём в спецификации.
Но не стоит увлекаться и добавлять вместо буллитов тяжелые красочные картинки, это может существенно повлиять на скорость загрузки сайта, и пользователь не скажет вам «спасибо».
Дополнительные материалы:
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Списки в CSS
У каждого элемента списка есть маркер. Это значёк перед текстом. В CSS есть возможность установить внешний вид маркера. В том числе, можно вообще убрать маркер списка. Для этого есть свойство list-style-type . У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.
Для маркированного списка:
list-style-type: disc — в виде диска (по умолчанию)
list-style-type: circle — в виде круга
list-style-type: square — в виде квадрата
list-style-type: decimal — арабские цифры (по умолчанию)
list-style-type: decimal-leading-zero — арабские цифры c 0 впереди для чисел 1-9
list-style-type: upper-roman — заглавные римские цифры
list-style-type: lower-roman — строчные римские цифры
list-style-type: upper-latin — заглавные латинские буквы
list-style-type: upper-alpha — то же, что и upper-latin
list-style-type: lower-latin — строчные латинские буквы
list-style-type: lower-alpha — то же, что и lower-latin
list-style-type: lower-greek — строчные греческие буквы
list-style-type: armenian — армянские числа
list-style-type: georgean — грузинские числа
list-style-type: none — позволяет убрать маркеры списка. Для обоих списков
list-style-type: inherit — значение принимается от родительского элемента. Для обоих списков
Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:
Css убрать точки ссылок
Для многих людей при использовании div в качестве веб-сайта они всегда будут использовать li и ul, но перед эффектом отображения всегда будет маленькая черная точка. Это головная боль для многих начинающих веб разработчиков, но они не могут найти выход, как сделать, чтоб все эти маркеры исчезли.
Используйте следующий метод для очистки
Здесь нужно задействовать css, чтобы удалить точку перед текстом:
Чтобы найти соответствующий CSS, напишите list-sytle: none в .li и .ul, конечно, некоторые напишут list-style-type: none, что является наиболее распространенным способом записи в некоторых CMS.
1. Найдите раздел заголовка на соответствующей странице и напишите следующий код
Переходим ко второму варианту.
2. Добавьте стиль списка к li и ul.
Конечно это очень хлопотно.
Самым простым является первый, который контролируется CSS, где будет иметь хороший эффект.
Также нестандартные точки в стиле list-image-image
Использование этого атрибута позволяет вам указать внешний файл значков для удовлетворения ваших индивидуальных потребностей дизайна.
none: указывает значение по умолчанию, без маркеров;
url: указывает путь к указанному внешнему файлу;
При определении маркеров и пользовательских маркеров пользовательские маркеры будут переопределять тип символов по умолчанию.
list-style-position определяет положение отображения списка маркеров;
Этот атрибут определяет, где отображаются маркеры
outside: указывает значение по умолчанию, которое указывает, что маркер отображается за пределами текстовой строки элемента списка;
inside: указывает, что маркер отображается в текстовой строке элемента списка.
Совет: маркеры, которые отображаемые внутри и снаружи влияют на расстояние между маркерами и текстом списка, а также на эффект отступа элементов списка.
Составные атрибута в стиле списка
Этот атрибут является составным атрибутом и может устанавливать содержимое, относящееся к элементу списка.
Совет: значения стиля списка могут быть перечислены в любом порядке, и эти значения можно игнорировать. Если указано значение, остальные будут заполнены значениями по умолчанию.