Содержание

list-style | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Пример
    • Спецификация
    • Браузеры

Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера списка.

Значение по умолчаниюНет
НаследуетсяДа
ПрименяетсяК элементам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
АнимируетсяНет

Синтаксис 

list-style: list-style-type || list-style-position || list-style-image

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.
<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

Любые комбинации трёх значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идёт тип маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>list-style</title> <style> ul { list-style: square outside; /* Квадратные маркеры */ /* Маркеры размещаются за пределами текстового блока */ } </style> </head> <body> <ul> <li>Многомерный полином</li> <li>Нормальный абсолютно сходящийся ряд</li> <li>Интеграл от функции</li> <li>Коллинеарный экстремум функции</li> </ul> </body> </html>

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

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

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

Объект.style.listStyle

Спецификация

СпецификацияСтатус
CSS Lists Module Level 3Рабочий проект
CSS Level 2 Revision 1 (CSS 2.1)Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4121711
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Списки

См. также

  • list-style-image
  • list-style-position
  • list-style-type
  • Создание списков

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

CSS list-style-type

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Задайте различные стили списков:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Подробнее примеры ниже.

Определение и использование

list-style-type указывает тип маркера элемента списка в списке.

Значение по умолчанию:disc
Inherited:yes
Animatable:no. Читайте о animatable
Version:CSS1
JavaScript syntax: object.style.listStyleType=»square»

Поддержка браузера

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

Свойство
list-style-type1.04.01.01.03.5

Примечание: Internet Explorer/EDGE и Opera 12 и более ранние версии не поддерживают значения: CJK-иероглифические, иврит, хирагана, хирагана-Iroha, катакана и катакана-Iroha.

Синтаксис CSS

list-style-type: value;

Значения свойств

ЗначениеОписание
discЗначение по умолчанию. Маркер представляет собой заполненную окружность
armenianМаркер-традиционная армянская нумерация
circleМаркер-это окружность
cjk-ideographicМаркер-простые иероглифические числа
decimalМаркер — это число
decimal-leading-zeroМаркер-это число с ведущими нулями (01, 02, 03 и т. д.)
georgianМаркер-традиционная грузинская нумерация
hebrewМаркер традиционный иврит нумерации
hiraganaМаркер является традиционным хирагана нумерации
hiragana-irohaМаркер является традиционным хирагана Iroha нумерации
katakanaМаркер является традиционным катакана нумерации
katakana-irohaМаркер является традиционным катакана Iroha нумерации
lower-alphaМаркер ниже-альфа (a, b, c, d, e и т.д.)
lower-greekМаркер ниже-Греческий
lower-latinМаркер ниже латинского (a, b, c, d, e и т.д.)
lower-romanМаркер нижний-римский (i, II, III, IV, v и т.д.)
noneМаркер не отображается
squareМаркер-это квадрат
upper-alphaМаркер верхнего альфа (a, B, C, D, E и т. д.)
upper-greekМаркер верхний-Греческий
upper-latinМаркер верхнего латинского (a, B, C, D, E и т.д.)
upper-romanМаркер верхний-римский (i, II, III, IV, V и т.д.)
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

В этом примере демонстрируются все различные маркеры элементов списка:

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.

i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}

Пример

Добавление цветов маркеров для <ul> или <ol> путем удаления их маркеров по умолчанию и добавления сущности HTML, которая выглядит как маркеры (& Bull;):

ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: «•»; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: blue; /* Or a color you prefer */
}

Похожие страницы

CSS Справочник: CSS List

CSS Справка: list-style Свойство

HTML DOM Справочник: listStyleType Свойство

❮ Назад Полный CSS Справочник Дальше ❯

list-style-type — Справочник CSS

❮ Назад CSS Справочник Далее ❯


Пример

Установить несколько разных списка стилей:

ul. a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Попробуйте сами »

Определение и использование

Свойство list-style-type указывает тип элемента списка, маркер списка.

Значение по умолчанию:disc
Унаследованный:да
Анимируемый:нет. Прочитать о animatable
Версия:CSS1
JavaScript синтаксис:object.style.listStyleType=»square» Попробовать

Поддержка браузеров

Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.

Свойство
list-style-type1. 04.01.01.03.5

Примечание: Internet Explorer/Edge и Opera 12 и более ранние версии не поддерживают значение: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, и katakana-iroha.

CSS Синтаксис

list-style-type: value;

Значения свойств

ЗначениеОписаниеВоспроизвести
discЗначение по умолчанию. Маркер закрашенный кругВоспроизвести »
armenianМаркер традиционная армянская нумерацияВоспроизвести »
circleМаркер пустой кругВоспроизвести »
cjk-ideographicМаркер простые идеографические чиселаВоспроизвести »
decimalМаркер числаВоспроизвести »
decimal-leading-zeroМаркер представляет собой число с ведущими нулями (01, 02, 03, и т.д. )Воспроизвести »
georgianМаркер традиционная грузинская нумерацияВоспроизвести »
hebrewМаркер традиционная нумерация иудейскаяВоспроизвести »
hiraganaМаркер традиционная нумерация хираганаВоспроизвести »
hiragana-irohaМаркер традиционная нумерация хирагана ирохаВоспроизвести »
katakanaМаркер традиционная нумерация катаканаВоспроизвести »
katakana-irohaМаркер традиционная нумерация катакана ирохаВоспроизвести »
lower-alphaМаркер нижняя альфа (a, b, c, d, e, и т.д.)Воспроизвести »
lower-greekМаркер нижняя греческаяВоспроизвести »
lower-latinМаркер нижняя латынь (a, b, c, d, e, и т.д.)Воспроизвести »
lower-romanМаркер нижняя римская (i, ii, iii, iv, v, и т. д.)Воспроизвести »
noneМаркер не отображаетсяВоспроизвести »
squareМаркер представляет собой квадратВоспроизвести »
upper-alphaМаркер верхняя альфа (A, B, C, D, E, и т.д.) Воспроизвести »
upper-greekМаркер верхняя греческая Воспроизвести »
upper-latinМаркер верхняя латынь (A, B, C, D, E, и т.д.)Воспроизвести »
upper-romanМаркер верхняя римская (I, II, III, IV, V, и т.д.)Воспроизвести »
initialУстанавливает это свойство в значение индекса. Прочитать о initialВоспроизвести »
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Этот пример демонстрирует все разные элементы списка маркеров:

ul. a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}

Попробуйте сами »

Пример

Как добавить в пули цвет, для <ul> или <ol> удаление индекса пуль и добавления в объект HTML, которая выглядит как пули (&bull;):

ul {
    list-style: none; /* Удалить список пуль */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: «•»; /* Вставить контент, который выглядит как пули */
    padding-right: 8px;
    color: blue; /* Или цвет вы предпочитаете */
}

Попробуйте сами »

Связанные страницы

CSS Учебник: CSS Список

CSS Справочник: Свойства list-style

HTML DOM Справочник: Свойства listStyleType

❮ Назад CSS Справочник Далее ❯

Группа списка · Bootstrap

Группы списков — это гибкий и мощный компонент для отображения серии контента. Модифицируйте и расширяйте их для поддержки практически любого содержимого внутри.

Базовый пример

Самая простая группа списков — это неупорядоченный список с элементами списка и соответствующими классами. Разработайте его с помощью следующих опций или с помощью собственного CSS по мере необходимости.

  • Крас Хусто Одио
  • Dapibus ac facilisis в
  • Морби Лео Рисус
  • Porta ac consectetur ac
  • Вестибюль эроса
 <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

    Активные элементы

    Добавьте .active к .list-group-item , чтобы указать текущий активный выбор.

    • Крас Хусто Одио
    • Dapibus ac facilisis в
    • Морби лео рисус
    • Porta ac consectetur ac
    • Вестибюль эроса
     <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

    Отключенные элементы

    Добавить . отключено на .list-group-item , чтобы он выглядел как отключенным. Обратите внимание, что некоторые элементы с .disabled также потребуют пользовательского JavaScript, чтобы полностью отключить их события щелчка (например, ссылки).

    • Крас Хусто Одио
    • Dapibus ac facilisis в
    • Морби лео рисус
    • Porta ac consectetur ac
    • Вестибюль эроса
     <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

    Используйте с или

    Заподлицо

    Добавьте . list-group-flush , чтобы удалить некоторые границы и закругленные углы, чтобы отобразить элементы группы списка от края до края в родительском контейнере (например, карточки).

     <ул>
  
  • Крас Хусто Одио
    • 
  
  • Dapibus ac facilisis в
    • 
  
  • Морби лео рисус
    • 
  
  • Конструкция порта переменного тока
    • 
  
  • Вестибюль в эросе
    •

    Контекстные классы

    Используйте контекстные классы для оформления элементов списка с помощью фона и цвета с отслеживанием состояния.

     <ул>
  
  • Dapibus ac facilisis в
    • 
  
  • Это основной элемент группы списка. 
    • 
  
  • Это дополнительный элемент группы списка.
    • 
  
  • Это групповой элемент списка успеха.
    • 
  
  • Это элемент группы списка опасностей.
    • 
  
  • Это элемент группы списка предупреждений.
    • 
  
  • Это элемент группы информационного списка.
    • 
  
  • Это элемент группы облегченного списка.
    • 
  
  • Это групповой элемент черного списка.
    •

    Контекстные классы также работают с .list-group-item-action . Обратите внимание на добавление здесь стилей наведения, отсутствующих в предыдущем примере. Также поддерживается состояние .active ; примените его, чтобы указать активный выбор в элементе группы контекстного списка.

    Dapibus ac facilisis in Это основной элемент группы списка Это дополнительный элемент группы списка Это групповой элемент списка успеха Это групповой элемент списка опасностей Это элемент группы списка предупреждений Это элемент группы информационного списка Это элемент группы светового списка Это элемент группы темного списка

     <дел>
  Dapibus ac facilisis
  Это основной элемент группы списка
  Это дополнительный элемент группы списка
  Это элемент группы списка успеха
  Это элемент группы списка опасностей
  Это элемент группы списка предупреждений
  Это элемент группы информационного списка
  Это элемент группы облегченного списка
  Это элемент группы темного списка
    Передача значения вспомогательным технологиям

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

    С значками

    Добавьте значки к любому элементу группы списка, чтобы показать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит.

    • Крас Хусто Одио 14
    • Dapibus ac facilis в 2
    • Морби Лео Рисус 1
     <ул>
  
  • 
    Крас Хусто Одио
    14
  
    • 
  
  • 
    Dapibus ac facilis в
    2
  
    • 
  
  • 
    Морби Лео Рисус
    1
  
    •

    Пользовательский контент

    Добавьте практически любой HTML-код внутри, даже для групп связанных списков, таких как приведенный ниже, с помощью утилит flexbox.

    Заголовок элемента списка
    3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta.

    Заголовок элемента списка
    3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta.

    Заголовок группы элементов списка
    3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta. 
     <дел>
  <а href="#">
    <дел>
       
    Заголовок элемента группы списка
     
      3 дня назад

    Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

    Donec id elit non mi porta. <а href="#"> <дел>
    Заголовок элемента группы списка
    3 дня назад