list-style-type¶

Свойство list-style-type изменяет вид маркера для каждого элемента списка.

Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (элемент <ul>) и нумерованного (элемент <ol>).

Демо¶

Списки, счетчики, генерируемый контент

Синтаксис¶

/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;

/* <string> value */
list-style-type: '-';

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

/* Keyword value */
list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

Значения¶

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

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

circle: Маркер в виде кружка.
disc: Маркер в виде точки.
square: Маркер в виде квадрата.

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

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: Отменяет маркеры для списка.

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

list-style-type: disc; /* для ul */
list-style-type: decimal; /* для ol */

Применяется к: К элементам <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

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

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>list-style-type</title>
    <style>
      ol {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Gaius Octavius Thurinus</li>
      <li>Tiberius Claudius Nero</li>
      <li>Gaius Iulius Caesar Augustus Germanicus</li>
      <li>Tiberius Claudius Drusus</li>
      <li>Lucius Arruntius Camillus Scribonianus</li>
      <li>Nero Claudius Caesar Drusus Germanicus</li>
      <li>Lucius Clodius Macer</li>
    </ol>
  </body>
</html>