Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Списки CSS
Списки CSS
Как всегда CSS предоставляет большие возможности при создании списков, чем только HTML. Собственно свойств для списков существует всего три:
Рассмотрим их на примерах.
list-style-type
Для маркерованных списков ничего нового, все теже значения, что и в HTML:
Давайте посмотрим, как они выглядят в браузере. Для этого создадим три одинаковых списка, но каждому в стилях зададим свое значение свойства. Итак, код 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, но не все значения поддерживаются всеми браузерами. Поэтому пока рекомендуется использовать только следующие:
Давайте посмотрим, как они выглядят в браузере. Для этого создадим четыре одинаковых списка, но каждому в стилях зададим свое значение свойства. Итак, код 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;
}
list-style-image
Это свойство позволяет задать свой вид маркера. Для этого сначала надо создать картинку с маркером. Предположим у нас есть вот такая картинка: и мы хотим, чтобы она была маркером. Создадим список:
<html>
<head>
<title>CSS списки</title>
На странице style.css зададим стиль:
#spisok{
list-style-image:url(marker.gif);
}
Обратите внимание, для данного примера картинка лежит в той же папке, что и наши страницы. Если же поместить картинку, например, в папку images, то и путь к ней надо указать, как list-style-image:url(images/marker.gif);. В общем, где бы не лежала картинка, вы должны правильно указать путь к ней.
Результат:
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul id="spisok">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Как вы понимаете, на внешний вид вашего списка будет влиять размер картинки. Помните об этом.
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;
}
Думаю теперь разница очевидна.
Сокращенная запись свойства list-style
Как всегда, можно задать все значения свойств списка через пробел:
#spisok1{
list-style:circle url(marker.gif) inside;
}