Использование изображения вместо маркера списка

Опубликовал: Monday, February 13, 2024 в категории CSS | Пока нет комментариев

Решение

Чтобы вместо маркеров списка отобразить заказное изображение, нуж- но использовать свойство list-style-image вместо list-style-type. Его значением может быть URL-адрес пути к файлу изображения:

chapter02/listimage.css

ul {

list-style-image: url(bullet.gif);

}

На рис. 2.26 видно, как можно оформить список с помощью описанно- го приема:

Рис. 2.26. Использование изображения в качестве маркера списка

Совет

Добавление маркеров к отдельным пунктам списка. Свойство list-style- image применяется по отношению к пунктам списка (элементам li). Если при- менить его по отношению к списку в целом (элементу ul или ol), оно будет унаследовано каждым отдельным пунктом. Тем не менее вы можете задать значение данного свойства отдельно для каждого пункта списка, добавив ему атрибут class или id. Это позволяет использовать разные маркеры для разных пунктов списка.

Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.

Похожие посты:

Комментировать

Your email address will not be published. Required fields are marked *