Свойство 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

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

Свойство grid-auto-flow

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

Свойство text-emphasis

Сокращённое свойство, позволяющее установить значения свойств text-emphasis-style и text-emphasis...

Стиль доступных ( незаблокированных ) элементов форм

Псевдокласс <span class='samp'>:enabled</span> используется для примен...

Отображается ниже самого верхнего элемента в стеке по оси Z

Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных...

Свойство padding-inline-end

Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по ст...