CSS-свойство list-style
Свойство list-style — это сокращение для list-style-type, list-style-position и list-style-image. Примеры использования.
CSS-свойство list-style является сокращением, позволяющим задать три свойства маркера списка в одном объявлении:
list-style-type— форма маркера или стиль счётчика (disc,circle,square,decimal,lower-roman,none…).list-style-position— располагается ли маркерoutside(за пределами блока содержимого, по умолчанию) илиinside(внутри него).list-style-image— изображение, используемое вместо маркера на основе типа.
На этой странице описывается синтаксис сокращения, как его значения соотносятся с тремя полными свойствами, и рассматриваются типичные способы применения на практике.
Как работает сокращение
Значения можно указывать в любом порядке, однако принятый порядок — тип → позиция → изображение:
list-style: square inside url('marker.png');Указывать все три значения не обязательно. Любое пропущенное полное свойство сбрасывается до исходного значения — поэтому запись list-style: square эквивалентна list-style: square outside none. Именно этот сброс может незаметно отменить ранее заданный list-style-position, поэтому при необходимости изменить только одну часть предпочтительнее использовать отдельные свойства.
Свойство можно задать для элемента списка или для самого списка (<ul> или <ol>), откуда оно будет каскадно применяться ко всем элементам списка.
Если указаны и list-style-type, и list-style-image, тип служит резервным вариантом: изображение отображается при успешной загрузке, а маркер типа появляется, если изображение отсутствует или не загрузилось. Указывать значение типа — хорошая страховка.
Чтобы полностью скрыть маркеры, используйте list-style: none; — удобно для навигационных меню, построенных на списках <ul>.
| Начальное значение | disc outside none |
|---|---|
| Применяется к | Элементам списка. |
| Наследуется | Да. |
| Анимируемое | Нет. |
| Версия | CSS1 |
| DOM-синтаксис | object.style.listStyle = "none"; |
Синтаксис
list-style: list-style-type list-style-position list-style-image | initial | inherit;Пример с маркерами circle и square inside
<!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>Результат
Пример задания типа маркера (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>Пример задания позиции маркера (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>Пример использования изображения в качестве маркера
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('/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 | Наследует свойство от родительского элемента. |