list-style-type CSS

Become a Patron!

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

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

Значение по умолчанию:
  • disc (для <ul>);
  • decimal (для <ol>)
Наследуется:
Да
Применяется:

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

Анимируется:
Нет
Объект JavaScript:

object.style.listStyleType

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

Синтаксис

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

Примеры

<!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>