Я уверена, что стандартные маркеры списков, хотя и довольно разнообразны, но весьма скучны и отдают
академичностью. Хочется добавить сайту яркости и индивидуальности, вызуально "подчеркнуть" каждый пункт списка.
Что делать в таком случае? Давайте заменим стандартные маркеры на свои собственные!
Но где их взять? Вы можете пойти по любому из двух путей:
Найти и взять что-то понравившееся в интернете,
Нарисовать с помощью графических редакторов что-то своё, индивидуальное.
Мне больше нравится сделать что-то своё, тем более, что это несложно: используя набор произвольных фигур Photoshop,
можно создавать самые разнообразные картинки: стрелки, звёздочки, квадраты, галочки и др. Есть несколько
требований для таких изображений:
каждое изображение маркера должно быть примерно 16-20 пикселей по ширине и по высоте; в любом случае,
не выше высоты строки, тогда маркер будет выглядеть аккуратно и красиво,
изображение должно быть обрезано как можно ближе к краям рисунка, тогда его будет легче позиционировать,
картинка должна быть сохранена с расширением .png, чтобы, если вдруг вам захочется изменить цвет фона,
не пришлось переделывать маркеры списков.
Итак, картинку мы нарисовали, сохранили и загрузили через менеджер файлов на сайт. Что дальше?
Теперь будем создавать список. Чтобы вместо стандартного маркера использовалась произвольная картинка,
в теге <ul> для каждого пункта списка мы должны прописать путь к этой картинке. Это делается с помощью
CSS и атрибута style, значением которого является адрес картинки.
Формула записи:
<li style="list-style-image: url('путь к файлу');">
Теперь посмотрим на примере - создадим список со своим маркером:
Для приготовления драников нам нужны:
картофель,
яйца,
соль, масло,
мука.
Код этого списка:
Если вы хотите переопределить все пункты списка, то прописывайте путь к изображению маркера для тега ul или ol,
а если только некоторые, то это нужно делать для тегов li внутри списка. Для удобства и сохранения компактности кода
лучше всего определять маркеры через стили CSS, причём делать это не в самом списке, а в контейнере <head>
или подключать стили в общем файле CSS. Как это делается можно прочитать в уроке "Как подключить стили CSS".
Пробуйте и экспериментируйте. До встречи в следующем уроке!
