Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

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

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

Код CSS
list-style-image: url() | none | inherit;

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

Код CSS
ul {
list-style-image: url(marker.png);
}

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

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

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

<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно