Свойство list-style-type позволяет для списка ul вместо маркеров-точек сделать квадраты или окружности. Для списка ol вместо обычных цифр можно сделать римские, нумерацию в виде букв: латинских или греческих.
Синтаксис
селектор {
list-style-type: значение;
}
Значения для ul
| Значение | Описание |
|---|---|
| circle | Создает маркеры в виде кружков. |
| disc | Создает маркеры в виде закрашенных кружков. |
| square | Создает маркеры в виде квадратиков. |
| none | Убирает маркеры. |
Значение по умолчанию: 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 | Убирает маркеры. |
Значение по умолчанию: decimal.
Пример
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: disc;
}
:
Пример
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: circle;
}
:
Пример
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: square;
}
:
Пример
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: none;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: decimal;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: armenian;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: decimal-leading-zero;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: georgian;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-alpha;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-greek;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-latin;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: lower-roman;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: upper-alpha;
}
:
Пример
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
ol {
list-style-type: upper-roman;
}
:
Пример
Данный пример показывает, что свойство color влияет не только на цвет текста, но и на цвет маркеров:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
ul {
list-style-type: disc;
color: red;
}
:
Смотрите также
-
свойство list-style-image,
которое задает маркеры в виде заданных картинок -
свойство list-style-position,
которое задает позицию маркеров -
свойство list-style-style,
которое является сокращением для маркеров -
свойство list-style-type,
которое задает тип маркеров списка