Свойство CSS list-style
Свойство CSS list-style является сокращённым свойством для следующих свойств списков:
Все свойства можно задать в следующем порядке: 1 — list-style-type, 2 — list-style-position, 3 — list-style-image.
Свойство list-style можно задать для элемента списка или для самого списка (<ul> или <ol>), и этот стиль будет каскадно применён ко всем элементам в этом списке.
INFO
Если какое-либо из перечисленных выше свойств отсутствует, оно будет автоматически установлено в значение по умолчанию.
| Начальное значение | disc outside none |
|---|---|
| Применяется к | Элементам списка. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.listStyle = "none"; |
Синтаксис
Синтаксис свойства CSS list-style
list-style: list-style-type list-style-position list-style-image | initial | inherit;Пример свойства list-style:
Пример свойства CSS list-style со значениями square inside и circle
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
list-style: circle;
}
.example2 {
list-style: square inside;
}
</style>
</head>
<body>
List 1
<ul class="example1">
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
List 2
<ul class="example2">
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</ul>
</body>
</html>Результат
Пример свойства list-style, где указан тип списка:
Пример свойства CSS list-style со значениями lower-greek и lower-latin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul:nth-of-type(1) {
list-style: lower-greek;
}
ul:nth-of-type(2) {
list-style: lower-latin;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</body>
</html>Пример свойства list-style, где указано положение списка:
Пример свойства CSS list-style со значениями inside и outside
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style: inside;
}
.outside {
list-style: outside;
}
li {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<h3>List-style is positioned "inside":</h3>
<ul class="inside">
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
<h3>List-style is positioned "outside":</h3>
<ul class="outside">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>Пример свойства list-style, где в качестве стиля списка установлено изображение:
Пример свойства CSS list-style со значением list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('https://ru.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| list-style-type | Используется для определения типа маркера элемента списка. Подробнее: Свойство CSS list-style-type |
| list-style-position | Используется для определения положения маркера элемента списка. Подробнее: Свойство CSS list-style-position |
| list-style-image | Используется для размещения изображения вместо маркера элемента списка. Подробнее: Свойство CSS list-style-image |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие типы имеет свойство CSS list-style?