Изображения для элементов списка

Иногда обычный маркер заменяют изображением, привлекая для этого свойство list-style-image.
Вот так:

ul li {list-style-image: url(ohio.gif);}

Да, на самом деле все просто. Задайте значение url(), и маркеры будут заменены изображениями. Конечно, имея дело с изображениями, необходимо проявлять осторожность, что совершенно очевидно из примера:

ul li {list-style-image: url(big-ohio.gif);}

В общем случае целесообразно предусмотреть резервный тип маркеров. Они вступят в дело, если основное изображение не загружается, повреждено или его формат таков, что отображается не всеми агентами пользователя. Это можно сделать, объявив для списка запасной list-style-type:

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

Кроме того, свойству list-style-image можно присвоить применяемое по умолчанию значение none. Идея правильная, потому что свойство list-style-image наследуется, т. е. в любых вложенных списках в качестве маркера будет выступать одно и то же изображение, если только не отменить такое поведение явно:

ul {list-style-image: url(ohio.gif); list-style-type: square;}
ul ul {list-style-image: none;}

Вложенный список наследует тип элемента square, при этом указано, что в качестве маркеров не могут выступать изображения, поэтому во вложенном списке роль маркеров играют квадраты. Помните, что такой сценарий может не заработать в реальной жизни: если агент пользователя уже определил list-style-type для ul ul, то значение square не будет унаследовано. Ваш броузер может вести себя иначе.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Вставка генерируемого содержимого
Вставка значений атрибутов
Генерируемое содержимое
Генерируемые кавычки
Компоновка списка