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