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

Описание

Указывает, как будет размещаться маркер относительно текста — маркер обтекается текстом или вынесен за границу элемента списка.

Синтаксис

list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none;

Значения для маркированного списка (ul)

Значение Описание
circle Маркер в виде кружка.
disc Маркер в виде точки.
square Маркер в виде квадрата.

Значения для нумерованного списка (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 Отменяет маркеры для списка.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #ul-test {
 list-style-type: square;
 }
 </style>
 <ul id='ul-test'>
 <li>html</li>
 <li>css</li>
 <li>javascript</li>
 </ul>
</body>
</html>
  • html
  • css
  • javascript

Читайте также

Свойство flex-direction

Задаёт направление основных осей в контейнере. Определяет положение флексов в контейнере. На напр...

Свойство overflow-y

Управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещае...

Правило @supports

Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе ...

Функция attr()

Функция применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например,...

Свойство animation-delay

Устанавливает задержку старта анимации.