Свойство 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,
которое задает тип маркеров списка