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

CSS-свойство list-style-type задаёт маркер элемента списка — символ, цифру или букву, отображаемые перед каждым элементом. С его помощью можно заменить стандартный заполненный кружок в маркированном списке на полый круг или квадрат, изменить нумерацию в упорядоченном списке с 1, 2, 3 на римские цифры или буквы либо вовсе скрыть маркеры.

Что охватывает это свойство

Маркер списка может быть одного из трёх видов:

Глифы — простые фигуры: disc (заполненный кружок по умолчанию), circle (полый круг) или square (квадрат).
Системы нумерации — счётчики: decimal, decimal-leading-zero, lower-roman, upper-roman, armenian, georgian, cjk-ideographic, hebrew, hiragana и katakana.
Алфавитные системы — буквенные последовательности: lower-alpha/lower-latin (a, b, c) и upper-alpha/upper-latin (A, B, C), а также lower-greek (α, β, γ).

Цвет маркера соответствует вычисленному значению color элемента, к которому применяется свойство, поэтому изменение цвета текста одновременно меняет цвет маркера. Подобрать цвет можно в справочнике цветов HTML.

Когда и где использовать

Маркер отображается только у элементов, у которых значение display равно list-item. По умолчанию это элементы <li> и <summary>, однако такое поведение можно применить к любому элементу, задав ему display: list-item. На практике list-style-type задаётся на родительском элементе <ul> или <ol> и наследуется дочерними элементами <li> — свойство наследуется, поэтому дочерним элементам оно не нужно.

Используйте list-style-type: none, когда нужно создать чистое навигационное меню или пользовательский макет без маркеров. Значения для нумерации и алфавитные значения работают как для <ul>, так и для <ol>, но наиболее осмысленны для <ol>, где каждый элемент представляет шаг или позицию в рейтинге.

list-style-type — одно из трёх свойств списка, которые объединяет сокращённое свойство list-style. Два других — list-style-position (маркер внутри или снаружи блока содержимого) и list-style-image (пользовательское изображение в качестве маркера, которое перекрывает тип при наличии).

Начальное значение	disc
Применяется к	Элементам списка.
Наследуется	Да.
Анимируется	Нет.
Версия	CSS1
DOM-синтаксис	object.style.listStyleType = "armenian";

Синтаксис

Синтаксис CSS-свойства list-style-type

list-style-type: 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 | none | square | upper-alpha | upper-latin | upper-roman | initial | inherit;

Пример свойства list-style-type:

Пример CSS-свойства list-style-type со значениями square и hebrew

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.list-styles {
        list-style-type: square;
      }
      ul.list-styles2 {
        list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <ul class="list-styles">
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ul>
    <ul class="list-styles2">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>

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

Результат

Пример свойства list-style-type со значением «disc»:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property with "disc" value.
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>

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

Пример свойства list-style-type со значением «decimal»:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: decimal;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property 
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>

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

Пример свойства list-style-type с упорядоченными списками:

Пример CSS-свойства list-style-type со значениями circle, square, upper-roman, lower-alpha, armenian, decimal, cjk-ideographic, georgian, upper-alpha и другими

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      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;
      }
      ol.e {
        list-style-type: armenian;
      }
      ol.f {
        list-style-type: decimal;
      }
      ol.g {
        list-style-type: cjk-ideographic;
      }
      ol.h {
        list-style-type: decimal-leading-zero;
      }
      ol.i {
        list-style-type: georgian;
      }
      ol.j {
        list-style-type: hebrew;
      }
      ol.k {
        list-style-type: hiragana;
      }
      ol.l {
        list-style-type: hiragana-iroha;
      }
      ol.m {
        list-style-type: katakana;
      }
      ol.n {
        list-style-type: katakana-iroha;
      }
      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: none;
      }
      ol.s {
        list-style-type: upper-alpha;
      }
      ol.t {
        list-style-type: upper-latin;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <p>Examples of unordered lists:</p>
    <h3>Circle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <p>Examples of ordered lists:</p>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Anu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Honk Kong</li>
      <li>Moscow</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallin</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>

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

Важные особенности

Цвет маркера совпадает с цветом текста. Отдельного свойства для цвета маркера не существует: задайте color для <li> (или его родителя), и маркер изменит цвет вместе с текстом. Чтобы покрасить маркер независимо, используйте псевдоэлемент ::marker.
list-style-image имеет приоритет над list-style-type. Если для списка задано ещё и list-style-image, отображается изображение, а тип маркера служит лишь запасным вариантом при ошибке загрузки изображения.
Скрытие маркера не убирает отступ. list-style-type: none скрывает маркер, но список по-прежнему имеет стандартный левый отступ браузера. Добавьте padding-left: 0 (и зачастую margin: 0), чтобы полностью выровнять список — это обычный шаг при создании навигационных меню.
Используйте правильный элемент списка для упорядоченных значений. Значения с нумерацией и буквами работают и для <ul>, но с точки зрения доступности и семантики ранжированный или последовательный контент следует помещать в <ol>.

Значения

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

Практика

Что задаёт свойство list-style-type в CSS?

Маркер, используемый в списке.Цвет элемента списка.Стиль маркеров или нумерации в списке.Размер текста в списке.