html.okpython.net
Основы создания сайтов
CSS :: Свойство list-style-image
css-свойство list-style-image (от англ. image – изображение) позволяет использовать изображения в качестве маркеров в пунктах списка.
Характеристики
Синтаксис
list-style-image: none | url(<адрес>)
Значения
-
url – относительный или абсолютный путь к файлу изображения, указываемый в скобках с использованием
одиночных или двойных кавычек или без них, например,
{list-style-image: url("http://
html ..net/image_1.png")} - none – указывает браузеру, что следует применять стандартный маркер вместо изображения.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-lists-3/#image-markers
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/list-style-image
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> ul{ width: 500px; margin: 2em; padding: 0px; background-color: #009900; } .list_2 { list-style-position: inside; list-style-type: decimal; } .list_3{ list-style-position: outside; list-style-image: url("circle_orange.png"); } .list_4{ list-style-position: inside; list-style-type: square; } .list_5{ list-style: decimal inside; } .list_6{ list-style: outside url("circle_orange.png"); } </style> </head> <body> <ul> <li> Все значения по умолчанию.<br><br> </li> <li class="list_2"> list-style-position: inside;<br> list-style-type: decimal;<br><br> </li> <li class="list_3"> list-style-position: outside;<br> list-style-image: url("circle_orange.png");<br><br> </li> <li class="list_4"> list-style-position: inside;<br> list-style-type: square;<br><br> </li> <li class="list_5"> list-style: decimal inside;<br><br> </li> <li class="list_6"> list-style: outside url("circle_orange.png"); </li> </ul> </body> </html>
Пример №1