Свойство list-style-type позволяет для списка ul вместо маркеров-точек сделать квадраты или окружности. Для списка списка ol вместо обычных цифр можно сделать римские, нумерацию в виде букв: латинских или греческих.

См. также list-style-image, list-style-position, list-style.

Синтаксис

Значения для ul

селектор {
	list-style-type: circle | disc | square |  none | inherit
}

Значения для ol

Свойство может принимать одно из следующих значений: armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman, none, inherit:

селектор {
	list-style-type: значение;
}

Описания значений

Для ul

Значение Описание
circle Делает кружки (точки с дыркой)
disc Закрашенные кружки (то, что стоит по умолчанию).
square Квадратики.
none Вообще без маркеров.
inherit Наследует значение родителя.

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

Для ol

Значение Описание
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 Вообще без маркеров.
inherit Наследует значение родителя.

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

Примеры

Пример

ul {
	list-style-type: disc;
}

Результат выполнения кода:

  • html
  • css
  • php
  • javascript
  • jquery

Пример

ul {
	list-style-type: circle;
}

Результат выполнения кода:

  • html
  • css
  • php
  • javascript
  • jquery

Пример

ul {
	list-style-type: square;
}

Результат выполнения кода:

  • html
  • css
  • php
  • javascript
  • jquery

Пример

ul {
	list-style-type: none;
}

Результат выполнения кода:

  • html
  • css
  • php
  • javascript
  • jquery

Пример

ol {
	list-style-type: decimal;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: armenian;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: decimal-leading-zero;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: georgian;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: lower-alpha;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: lower-greek;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: lower-latin;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: lower-roman;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: upper-alpha;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

ol {
	list-style-type: upper-roman;
}

Результат выполнения кода:

  1. html
  2. css
  3. php
  4. javascript
  5. jquery

Пример

Данный пример показывает, что свойство color влияет не только на цвет текста, но и на цвет маркеров:

ul {
	list-style-type: disc;
	color: red;
}

Результат выполнения кода:

  • html
  • css
  • php
  • javascript
  • jquery