CSS свойство list-style-image

CSS свойства

Определение и применение

CSS свойство list-style-image позволяет задать изображение в качестве маркера элемента списка.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
list-style-image1.01.07.01.04.012.0

CSS синтаксис:

list-style-image:"none | url | initial | inherit";

JavaScript синтаксис:

object.style.listStyleImage = "url('loshad.jpg')"

Значения свойства

ЗначениеОписание
noneИзображение не будет отображаться, тип маркера элемента списка определяется значением свойства list-style-type. Это значение по умолчанию.
urlЗадает путь к изображению для использования в качестве маркера элемента списка.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Пример CSS свойства list-style-image.</title>
.test {
list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем путь к изображению, которое будет использовано в качестве маркера */
}
</style>
</head>
	<body>
		<ul class = "test">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</body>
</html>
Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).
Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).
CSS свойства