146. Маркер списка в виде изображения

Если вам не хватает стандартных маркеров, которые можно изменять свойством list-style-type, то можете применить свойство list-style-image. При помощи list-style-image имеется возможность заменить маркер изображением. Рассмотрим синтаксис:

list-style-image: url() | none | inherit;

Далее пример в CSS:

ul {
    list-style-image: url(marker.png);
}

Необходимо обратить внимание на размер изображения, чтобы оно не оказалось слишком большое. К тому же стоит подстраховаться, и добавить резервный маркер, в случае, если изображение не загрузится. Для этого можно написать следующий код:

ul {
    list-style-image: url(marker.png);
    list-style-type: square;
}

Стоит обратить внимание на вложенные списки и то, что они не наследуют свойство list-style-image, т.е. изображения к ним применены не будут. Так как указано свойство list-style-type, то вложенные списки будут с квадратными маркерами (для примера, который приведет выше).

Похожие уроки Codebra

1. Нажмите проверить задание.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.