Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
Если вам не хватает стандартных маркеров, которые можно изменять свойством 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 по тегу CSS.
