CSS - Урок 14. Списки
Как всегда CSS предоставляет большие возможности при создании списков, чем только HTML. Собственно свойств для списков существует всего три:
list-style-type - определяет внешний вид маркера или нумератора.
list-style-image - определяет пользовательское изображение маркера.
list-style-position - определяет положение маркеров относительно блока.
Рассмотрим их на примерах.
list-style-type
Для маркерованных списков ничего нового, все теже значения, что и в HTML:
disk - закрашенный кружок.
circle - незакрашенный кружок.
square - закрашенный квадрат.
Давайте посмотрим, как они выглядят в браузере. Для этого создадим три одинаковых списка, но каждому в стилях зададим свое значение свойства. Итак, код html-страницы:
<html>
<head>
<title>CSS списки</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul id="spisok1">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ul id="spisok2">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ul id="spisok3">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Код страницы style.css:
#spisok1{
list-style-type:disk;
}
#spisok2{
list-style-type:circle;
}
#spisok3{
list-style-type:square;
}
[img=Uroki_CSS/img/css14-1.gif]
Для нумерованных списков перечень более широк, чем в HTML, но не все значения поддерживаются всеми браузерами. Поэтому пока рекомендуется использовать только следующие:
decimal - десятичные числа.
lower-roman - строчные римские цифры.
upper-roman - прописные римские цифры.
lower-alpha - строчные латинские буквы.
Давайте посмотрим, как они выглядят в браузере. Для этого создадим четыре одинаковых списка, но каждому в стилях зададим свое значение свойства. Итак, код html-страницы:
<html>
<head>
<title>CSS списки</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ol id="spisok1">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ol id="spisok2">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ol id="spisok3">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ol id="spisok4">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
</body>
</html>
Код страницы style.css:
#spisok1{
list-style-type:decimal;
}
#spisok2{
list-style-type:lower-roman;
}
#spisok3{
list-style-type:upper-roman;
}
#spisok4{
list-style-type:lower-alpha;
}
[img=Uroki_CSS/img/css14-2.gif]
list-style-image
Это свойство позволяет задать свой вид маркера. Для этого сначала надо создать картинку с маркером. Предположим у нас есть вот такая картинка: и мы хотим, чтобы она была маркером. Создадим список:
<html>
<head>
<title>CSS списки</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul id="spisok">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
На странице style.css зададим стиль:
#spisok{
list-style-image:url(marker.gif);
}
Обратите внимание, для данного примера картинка лежит в той же папке, что и наши страницы. Если же поместить картинку, например, в папку images, то и путь к ней надо указать, как list-style-image:url(images/marker.gif);. В общем, где бы не лежала картинка, вы должны правильно указать путь к ней.
[img=Uroki_CSS/img/css14-3.gif]
Как вы понимаете, на внешний вид вашего списка будет влиять размер картинки. Помните об этом.
list-style-position
Это свойство определяет положение маркера: внутри блока - inside или снаружи - outside. Понятнее будет на примере. Создадим два списка, расположенных в div-е:
<html>
<head>
<title>CSS списки</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sp">
<ul id="spisok1">
<li>Первый пункт первого списка</li><br>
<li>Второй пункт первого списка</li><br>
<li>Третий пункт первого списка</li><br>
</ul>
<ul id="spisok2">
<li>Первый пункт второго списка</li><br>
<li>Второй пункт второго списка</li><br>
<li>Третий пункт второго списка</li><br>
</ul>
</div>
</body>
</html>
Зададим стили для списков с разными значениями:
#sp{
width:150px;
}
#spisok1{
list-style-position:inside;
}
#spisok2{
list-style-position:outside;
}
И посмотрим на результат в браузере:
[img=Uroki_CSS/img/css63.gif]
Думаю теперь разница очевидна.
Сокращенная запись свойства list-style
Как всегда, можно задать все значения свойств списка через пробел:
#spisok1{
list-style:circle url(marker.gif) inside;
}
Вот собственно и все, наши уроки подошли к концу. Мы рассмотрели все свойства CSS. Теперь ваша задача научиться их применять для решения конкретных задач. В этом вам поможет раздел css - полезные навыки.
Удачи Вам и творческих успехов!