CSS свойство `list-style`

Определение и применение

CSS свойство list-style устанавливает все свойства списка в одном объявлении.

Свойства, которые могут быть заданы:

list-style-type (тип маркера)."none | disc (по умолчанию) | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | square | upper-alpha | upper-latin | upper-roman | initial | inherit"
list-style-position (расположение маркера). "inside | outside (по умолчанию) | initial | inherit"
list-style-image (изображение маркера). "none (по умолчанию) | url | initial | inherit"

Если одно из значений свойства отсутствует, то значение этого свойства будет установлено по умолчанию автоматически.

Попробуйте значения list-style

Короткая запись позволяет одновременно задавать вид и положение маркеров.

Значение свойстваlist-style: disc outside;list-style: square inside;list-style: decimal outside;list-style: none;

list-style: disc outside

HTML и CSS примера

HTML

<ul class="demo-target">
  <li>Структура страницы</li>
  <li>Оформление длинного пункта списка на нескольких строках</li>
  <li>Поведение элементов</li>
</ul>

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px 16px 16px 42px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  margin: 0;
  list-style: disc outside;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px 16px 16px 42px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  margin: 0;
  list-style: square inside;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px 16px 16px 42px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  margin: 0;
  list-style: decimal outside;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px 16px 16px 42px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  margin: 0;
  list-style: none;
}

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

Спецификация: CSS lists

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.list-style
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`list-style`	✓1	✓12	✓1	✓7	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`inside`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`none`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`outside`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`symbols`	✓155	✓155	✓35	×	×	✓155	✓35	×	×	×	✓155	×
Ещё 3 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>;

/* Глобальные значения */
list-style: initial | inherit | unset | revert | revert-layer;

|| — одно или несколько значений в любом порядке.

JavaScript синтаксис:

JavaScript

element.style.listStyle = "katakana inside";

Начальное значение свойства

list-style-type — disc;
list-style-position — outside;
list-style-image — none.

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

Значения list-style
Значение	Описание
`list-style-type`	Указывает тип маркера элемента списка. Начальное значение.
`list-style-position`	Определяет расположение маркера относительно элемента списка (внутри элемента списка вместе с содержимым, либо за границей элемента списка). Начальное значение.
`list-style-image`	Позволяет задать изображение в качестве маркера элемента списка. Начальное значение.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для наследуемого свойства `list-style` наследует вычисленное значение у родительского элемента.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Lists and Counters — спецификация list-style.

Наследуется

Да.

Анимируемое

Зависит от составляющих свойств: list-style-image, list-style-position, list-style-type. Числовые значения и цвета могут изменяться плавно; дискретные значения переключаются.

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

Маркеры списка

Измените значение во втором правиле. Длинная строка помогает увидеть положение маркера относительно текста.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
ul {
    padding-left: 28px;
}
li {
    border: 1px solid #aab6c0;
    margin-block: 8px;
}

index.html