list-style-type
Для маркерованных списков ничего нового, все теже значения, что и в 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>
<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>
<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);. В общем, где бы
не лежала картинка, вы должны правильно указать путь к ней.
Результат:
Как вы понимаете, на внешний вид вашего списка будет влиять размер картинки. Помните об этом.
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;
}
Вот собственно и все, наши уроки подошли к концу. Мы рассмотрели все свойства CSS. Теперь ваша задача научиться их
применять для решения конкретных задач. В этом вам поможет раздел css - полезные навыки.
Удачи Вам и творческих успехов!
Предыдущий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 14. Списки
CSS - Урок 14. Списки
Как всегда CSS предоставляет большие возможности при создании списков, чем только HTML. Собственно свойств для списков существует всего три:- list-style-type - определяет внешний вид маркера или нумератора.
- list-style-image - определяет пользовательское изображение маркера.
- list-style-position - определяет положение маркеров относительно блока.
list-style-type
Для маркерованных списков ничего нового, все теже значения, что и в HTML:
- disk - закрашенный кружок.
- circle - незакрашенный кружок.
- square - закрашенный квадрат.
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
Для нумерованных списков перечень более широк, чем в HTML, но не все значения поддерживаются всеми браузерами. Поэтому пока рекомендуется использовать только следующие:
- decimal - десятичные числа.
- lower-roman - строчные римские цифры.
- upper-roman - прописные римские цифры.
- lower-alpha - строчные латинские буквы.
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
list-style-image
Это свойство позволяет задать свой вид маркера. Для этого сначала надо создать картинку с маркером. Предположим у нас есть вот такая картинка:
и мы хотим, чтобы она была маркером.
Создадим список:
Результат:
- Первый пункт
- Второй пункт
- Третий пункт
Как вы понимаете, на внешний вид вашего списка будет влиять размер картинки. Помните об этом.
list-style-position
Это свойство определяет положение маркера: внутри блока - inside или снаружи - outside. Понятнее будет на примере. Создадим два списка, расположенных в div-е:
Думаю теперь разница очевидна.
Сокращенная запись свойства list-style
Как всегда, можно задать все значения свойств списка через пробел:
Удачи Вам и творческих успехов!
Предыдущий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.