Можно уникальным образом украсить списки несколькими способами. Первый и самый лучший вариант — использование рамок и генерируемого содержимого. Но иногда элементы пунктов списка выделяются таким необычным образом, что приходится специально для этого создавать изображение и применять его с помощью свойства list-style-image  (изображения стиля списка) или свойства фонового изображения. Так как это оформление будет применяться к каждому элементу пункта списка, то это наиболее подходит для ненумерованных списков. 

Наиболее сложная часть в создании изображения, которое будет использоваться для украшения списка, — определение его размеров. Если изображение будет слишком высокое, то оно не сможет быть выровнено относительно связанного с ним элемента пункта списка. Если оно будет слишком большое, то может увеличиться отступ между элементами списками. Можно рекомендовать использовать изображения высотой примерно 32 пикселя, и чтобы низ изображения совпадал с его границей. Это делается потому, что при использовании свойства изображения стиля списка низ изображения будет совпадать с базовой линией текста элемента пункта списка и при использовании этого способа нет возможности изменить расположение изображения.

В графическом редакторе PhotoShop обычное изображение для украшения элементов пунктов списка, увеличенное примерно на 400%, будет выглядеть примерно так:

Здесь есть два варианта. Первый — можно применить изображение как изображение стиля списка для отделки элементов пунктов списка, что автоматически заменит все заданные типы стиля списка. Например, добавим изображение triangle.png, находящееся в папке с изображениями, как ведущий маркер для ненумерованного списка с идентификатором #decorated, используя следующий код:

ul#decorated {
        list-style-image: url(images/triangle.png);
}

Или можно применить изображение как фоновое изображение для каждого элемента пункта списка, отключив повторение и все ранее примененные типы стиля списка:

ul#decorated li {
        background-image: url(images/triangle.png);
        background-repeat: no-repeat;
        list-style-type: none;
}

При выборе второго варианта можно изменять положение изображения относительно текста элемента пункта списка, используя свойство расположения фона. Возможно, понадобится использовать внутренний отступ для элемента пункта списка, чтобы перед ним было достаточно пространства для фонового изображения, в зависимости от его расположения.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание различной маркировки для списков
• Создание разметок с использованием CSS: текст в несколько колонок
• Новый подход к адаптивным таблицам