Современные CSS уроки

CSS маркеры списков

Урок 20. CSS список, изображение в роле маркера

CSS атрибуты и значения, определяющие списки с изображением

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

<head>
<title>Изображение в роле маркера списка</title>
<style type="text/css">
.list_img li {
list-style: none;
line-height: 170%;
padding-left: 25px;
background: url(../images/pencil2.png) no-repeat left 50%
}
</style>
</head>
<body>
<ul class="list_img">
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
<li>Toshiba</li>
<li>Acer</li>
<li>Lenovo</li>
</ul>
</body>

line-height:170% определяет расстояние между строчками по вертикали.

Результат: списки + изображения + CSS

Правильно будет написать line-height: 170% или line-height:170%, но не line-height:170 %. Единицы измерения не должны отделяться от величин.

Определяем CSS маркер списка в виде изображения

CSS списки, у которых вместо маркеров – изображения, можно создавать так:

<head>
<style type="text/css">
ul.list_img {list-style: url(../images/pencil2.png) outside; line-height: 170%}
</style>
</head>
<body>
<ul class="list_img">
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
<li>Toshiba</li>
<li>Acer</li>
<li>Lenovo</li>
</ul>
</body>

Результат: изображения и списки

Подробнее об атрибуте list-style: в главе CSS справочника списки.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 19. CSS списки   CSS маркер списка   Урок 21. CSS изображения

    Сохранить в сервисы и закладки