Все мы представляем себе списки либо нумерованными, либо маркированными. В качестве маркировки CSS позволяет выбрать любые фигуры и даже картинку.
Но в web-мастеринге списки часто используются для создания меню или сайдбара, и выглядят они вовсе не как списки, но об этом позже.
Стили маркированного и нумерованного списков.
Вид маркера задаётся свойством list-style-type. Это свойство имеет несколько значений:
Disc – маркер в виде круга (значение по умолчанию)
Circle - маркер в виде окружности
Square – маркер в виде квадрата
Decimal – обычная нумерация
upper-roman – римская нумерация
lower-alpha – обозначения строчными буквами
upper-alpha – обозначения заглавными буквами
none – отменяет любую маркировку
list-style-type: lower-alpha ;
}
Использование изображений в качестве маркера.
Для этого используется свойство list-style-image. В качестве значения указывается путь к картинке:
list-style: url(question.png);
}
Расположение маркера.
За это отвечает свойство list-style-position со следующими значениями:
Outside - Маркер будет находиться вне блока с текстом.
Inside – маркер будет находиться в одном блоке с текстом.
Все три вышеперечисленных свойства можно объединить в одно list-style, написав значения по порядку.
list-style: url(question.png) inside;
}
Как сделать, чтобы у каждого пункта списка была своя картинка?
Для начала нужно сохранить изображения маркеров в одну папку с index.html и style.css. В нашем примере это будут файлы facebook.png, twitter.png и vkontakte.png.
Далее в HTML – документе каждому тегу li присваиваем id:
<html>
<head>
<meta charset= "utf-8">
<link rel= "stylesheet" type= "text/css" href= "style.css" />
<title>Списки CSS</title>
</head>
<body>
<h1>Маркер в виде изображения</h1>
<ul>
<li id="i1"><a href="https://www.facebook.com/specialist.ru">Группа на Facebook</a></li>
<li id="i2"><a href="https://twitter.com/specialist_ru">Канал в Twitter</a></li>
<li id="i3"><a href="http://vk.com/club2190892">Клуб в контакте</a></li>
</ul>
</body>
</html>
А в файле стилей каждому id прописываем путь к картинке.
#i2{list-style-image: url(twitter.png)}
#i3{list-style-image: url(vkontakte.png)}
Результат в браузере выглядит следующим образом:
