| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Прибрати стандартні маркери і замість них вивести довільну картинку.
Рішення
Щоб задати свій малюнок маркера, скористайтесь стильовим властивість list-style-image, в якості значення якого вказується шлях до бажаного зображення (рис. 1).
Приклад 1. Картинка замість маркерів
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Малюнок в якості маркера</title>
<style>
ul {
list-style-image: url(images/book.png); /* Шлях до зображення маркера */
}
</style>
</head>
<body>
<ul>
<li>Шевченко Т. Г.</li>
<li>Франко І. Я.</li>
<li>Косач Л. П.</li>
</ul>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Врахуйте, що висота малюнка впливає на міжрядкова відстань між пунктами списку, тому підбирайте зображення невеликого розміру.
За рахунок малюнка можна змінювати відстань між маркером і текстом, а також між пунктами списку. Для цього в картинці закладаються порожні поля, як показано на рис. 2.
Рис. 2. Картинка для створення маркера
Рамка навколо малюнка наведена для зручності, щоб показати межі зображення.
Використання властивості list-style-image має деякі недоліки. По-перше, не можна зміщувати малюнок відносно його вихідного положення, і по-друге, в різних браузерах малюнки іноді виводяться з невеликим зміщенням. Більш гнучкі налаштування має властивість background, який дозволяє виводити зображення як фоновий малюнок (приклад 2).
Приклад 2. Фоновий малюнок
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Малюнок в якості маркера</title>
<style>
li {
list-style: none; /* Прибираємо вихідні маркери */
background: url(images/book.png) no-repeat 0 4px; /* Параметри фону */
padding-left: 24px; /* Зміщуємо текст вправо */
}
</style>
</head>
<body>
<ul>
<li>Шевченко Т. Г.</li>
<li>Франко І. Я.</li>
<li>Косач Л. П.</li>
</ul>
</body>
</html>
Щоб текст не накладався на фоновий малюнок до селектору LI додано властивість padding-left, значення якого дорівнює ширині картинки плюс бажаний відступ від малюнка до тексту.