В HTML существует два типа списков:
- неупорядоченные списки - пункты списка помечаются маркерами
- упорядоченные списки - пункты списка помечаются числами или буквами
С помощью CSS списки могут, оформлены лучшим образом, и изображения могут использоваться в качестве маркеров для пунктов списка. Как всегда CSS предоставляет большие возможности при создании списков, чем только HTML.
Собственно свойств для списков существует всего три:
- list-style-type - определяет внешний вид маркера или нумератора.
- list-style-image - определяет пользовательское изображение маркера.
- list-style-position - определяет положение маркеров относительно блока.
Для маркерованных списков ничего нового, все теже значения, что и в 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;
}
Результат:
Для нумерованных списков перечень более широк, чем в 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;
}
Результат:
Это свойство позволяет задать свой вид маркера. Для этого сначала надо создать картинку с маркером.
Предположим у нас есть вот такая картинка: и мы хотим, чтобы она была маркером.
Создадим список:
<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);.
В общем, где бы ни лежала картинка, вы должны правильно указать путь к ней.
Результат:
Как вы понимаете, на внешний вид вашего списка будет влиять размер картинки. Помните об этом.
Это свойство определяет положение маркера: внутри блока - 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;
}
И посмотрим на результат в браузере:
Думаю, теперь разница очевидна.
Сокращенная запись свойства list-style
Как всегда, можно задать все значения свойств списка через пробел:
#spisok1{
list-style:circle url(marker.gif) inside;
}
Выполните задание согласно его описанию:
Пример маркированного списка:
- первый элемент списка
- второй элемент списка
- третий элемент списка
- первый элемент списка
- второй элемент списка
- третий элемент списка
- первый элемент списка
- второй элемент списка
- третий элемент списка
Пример нумерованного списка:
- первый элемент списка
- второй элемент списка
- третий элемент списка
- первый элемент списка
- второй элемент списка
- третий элемент списка
- первый элемент списка
- второй элемент списка
- третий элемент списка