Списки
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| list-style | disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none |
Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. | LI {list-style: circle} LI {list-style: upper-alpha} |
| list-style-image | none URL |
Устанавливает символом маркера любую картинку. | LI {list-style-image: url(check.gif)} |
| list-style- position |
outside inside |
Выбор положения маркера относительно блока строк текста. | LI {list-style-position: inside} |
Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI. Так, в примере 1 используется селектор UL, для него и задаются стилевые параметры.
Пример 1. Создание маркированного списка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Списки</title>
<style type="text/css">
UL {
list-style: square; /* Маркеры в виде квадрата */
list-style-position: outside; /* Маркеры размещаются за пределами текстового блока */
color: navy; /* Цвет текста списка */
}
</style>
</head>
<body>
<ul>
<li>Заголовок должен быть короче трех строк.</li>
<li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.</li>
<li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.
Рис. 1. Вид списка, измененого с помощью стилей
Чтобы установить свое собственное изображение в качестве маркера применяется параметр list-style-image, как показано в примере 2.
Пример 2. Использование изображений в качестве маркера
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Списки</title>
<style type="text/css">
LI {
list-style-image: url('images/check.gif'); /* Путь к файлу с маркером */
}
</style>
</head>
<body>
<ul>
<li>Заголовок должен быть короче трех строк.</li>
<li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.</li>
<li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.
Рис. 2. Изображения в качестве маркеров
Некоторые примеры создания различных списков приведен в табл. 2.
| Код HTML | Пример |
|---|---|
| <li style="list-style: disc"> | Что следует учитывать при тестировании сайта:
|
| <li style="list-style: circle"> | Что следует учитывать при тестировании сайта:
|
| <li style="list-style: square"> | Что следует учитывать при тестировании сайта:
|
| <li style="list-style: decimal"> |
Нумерованный список с арабскими цифрами:
|
| <li style="list-style: lower-roman"> |
Нумерованный список со строчными римскими цифрами:
|
| <li style="list-style: upper-roman"> |
Нумерованный список с заглавными римскими цифрами:
|
| <li style="list-style: lower-alpha"> |
Нумерованный список со строчными буквами латинского алфавита:
|
| <li style="list-style: upper-alpha"> |
Нумерованный список с заглавными буквами латинского алфавита:
|
| Статья опубликована: 13.09.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Евгения
22.09.2006
Влад Мержевич
25.09.2006
Kolya
31.03.2007
Влад Мержевич
02.04.2007
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Шрифт в списках</title>
<style type="text/css">
UL {
font-family: Georgia, "Times New Roman", Times, serif
}
</style>
</head>
<body>
<ul>
<li>Первый</li>
<li>Второй</li>
</ul>
</body>
</html>
victor
23.04.2007
Влад Мержевич
24.04.2007
mustang
28.05.2007
li {
padding-left : 0px;
padding-top : 2px;
background-image : url(../images/strelka.gif) ;
background-repeat: no-repeat;
background-position: 15px 3px;
}
Вопрос к владу: Я хочу использвать 2 вида списков. Первый - это я просто описываю ul и li. Второй пробовал и назввание класса.ul и ul.названиекласса и просто .названиекласса. Все равно применяется параметры от первого списка. Как реализовать несколько списков?
SHKODA
29.05.2007
надо прописать списку font-weight:bold;
а текст списка запихнуть в span у которого прописано font-weight:normal
Влад Мержевич
30.05.2007
Для LI стиль надо прописывать следующим образом
UL.класс LI {...}
Тогда стиль для LI будет работать только для определенного класса.
FD
08.08.2007
Влад Мержевич
09.08.2007
http://htmlbook.ru/download/list.rar
FD
09.08.2007
Germik
15.09.2007
Что-то никак не могу сообразить как сделать для каждого LI одного списка свой list-type-image. Пытаюсь сделать так
li.1 {list-style-image:url(img/kv1.jpg)}
li.2 {list-style-image:url(img/kv2.jpg)}
<ul>
<li class="1">Текст 1</li>
<li class="2">Текст 2</li>
</ul>
Возможно ли такое реализовать?
Заранее спасибо!
Germik
15.09.2007
Владимир
19.09.2007
Как средствами CSS задать номер первого элемента нумерованного списка, например 15.
Влад Мержевич
20.09.2007
Алан
16.10.2007
почему в таблице плохо отображаются картинки из списка(искажаются при скролинге)
li.one {list-style-image:url(yydd.jpg);}
li.two {list-style-image:url(yjjj.jpg);}
.......
что можно предпринять?
Александра
19.10.2007
Большое спасибо за замечательный сайт.
Вопрос такой: можно ли как-нибудь изменить список, чтобы цифры отображались не как "1.", а "1)"?
А еще хочется нумерованный многоуровневый список. Например, есть у меня пункт 83. Нужно для него подсписок с пунктами 83.1, 83.2 и т.д.
Это возможно?
Влад Мержевич
21.10.2007
<html>
<head>
<style type="text/css">
LI:before {
content: ") ";
}
</style>
</head>
<body>
<ol>
<li>Первый.</li>
<li>Второй.</li>
<li>Третий.</li>
<ol>
</body>
</html>
1. точка после числа остается;
2. расстояние между числом и скобкой достаточно велико.
3. работает только в Firefox и в Opera, IE не поддерживает ни before, ни content.
С подпунктами в CSS проблема. Можно опять же попробовать с псевдоэлементами before и after поработать.
MrNumbers
20.02.2008
А как можно выровнять текст элементов списка вертикально? Чтобы пулька была посередине каждого пункта.
Роман
21.02.2008
Вопрос - список чем то полезен, кроме простоты - больший все слов внутри например ?
Алексей
23.02.2008
Считаю что ваши труды не прошли напрасно Strelok
15.05.2008