Веб-мастерская Ларисы ВоронинойОформление списков CSS. Списки CSS.
WEB-мастерская Ларисы Ворониной logo

Оформление списков CSS. Окт 31 2016


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

Но в web-мастеринге списки часто используются для создания меню или сайдбара, и выглядят они вовсе не как списки, но об этом позже.

Стили маркированного и нумерованного списков.

Вид маркера задаётся свойством  list-style-type. Это свойство имеет несколько значений:

Disc – маркер в виде круга (значение по умолчанию)

Circle - маркер в виде окружности

Square – маркер в виде квадрата

Decimal – обычная нумерация

upper-roman – римская нумерация

lower-alpha – обозначения строчными буквами

upper-alpha – обозначения заглавными буквами

none – отменяет любую маркировку

li {
list-style-type: lower-alpha ;
}

Использование изображений в качестве маркера.

Для этого используется свойство list-style-image. В качестве значения указывается путь к картинке:

li{
list-style: url(question.png);
}

Расположение маркера.

За это отвечает свойство list-style-position со следующими значениями:

Outside - Маркер будет находиться  вне блока с текстом.

Inside – маркер будет находиться в одном блоке с текстом.

Все три вышеперечисленных свойства можно объединить в одно list-style, написав значения по порядку.

li{
list-style: url(question.png) inside;
}

Как сделать, чтобы у каждого пункта списка была своя картинка?

Для начала нужно сохранить изображения маркеров в одну папку с index.html и style.css. В нашем примере это будут файлы facebook.png, twitter.png и vkontakte.png.

Далее в HTML – документе каждому тегу li присваиваем id:

<!DOCTYPE html>
<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="http://www.facebook.com/specialist.ru">Группа на Facebook</a></li>
               <li id="i2"><a href="http://twitter.com/specialist_ru">Канал в Twitter</a></li>
               <li id="i3"><a href="http://vk.com/club2190892">Клуб в контакте</a></li>
          </ul>
     </body>
</html>

А в файле стилей каждому id прописываем путь к картинке.

#i1{list-style-image: url(facebook.png)}
#i2{list-style-image: url(twitter.png)}
#i3{list-style-image: url(vkontakte.png)}

Результат в браузере выглядит следующим образом:
spiski-css