Общие сведения Итак, начнём с того, что мы понимаем под списком. Вообще в html различается 2 вида списков: нумерованный и ненумерованный (маркированный). Они задаются тегами "ol" и "ul" соответственно. Элементы обоих видов списков задаются тегом "li". Для примера, составим простой маркированный список (именно с ними чаще всего приходится работать в CSS):
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
Теперь, разберёмся, для чего используются списки. Ну, думаю, что первое применение будет понятно и так - список элементов без специального оформления. Но есть и другие: меню, галерея изображений, облако тегов, даже последовательность блоков...
На самом деле, меню или галерею можно оформить и без списков, с помощью тегов div, span, em и т.д. Однако, использование списков позволяет сократить html код и код стилей. Это происходит благодаря ряду причин:
- Простым атрибутом CSS можно отменить или изменить оформление у списка (об этом - ниже);
- Конструкция уже содержит один уровень вложения (li), что позволяет задать
Простое оформление
В этой главе, мы поговорим об оформлении списка как списка. Здесь мы будем работать с двумя видами материала: текстом (содержанием) пунктов и обозначениями пунктов (последовательности для нумерованных списков и символы для маркированных).
Начнём с обозначений. Их оформление (стиль) задаётся одним атрибутом:
list-style-type. Значения этого атрибута – фиксированы и различны для нумерованных и маркированных списков.
Для нумерованных (ol):
decimal – арабские цифры (по умолчанию);
lower-roman – малые римские цифры;
upper-roman – большие римские цифры;
lower-alpha – малые (строчные) латинские буквы;
upper-alpha – большие (прописные) латинские буквы.
Для маркированных (ul):
disk – простой круг (по умолчанию);
circle – кольцо;
square – квадрат;
lower-alpha – малые (строчные) латинские буквы;
none – отмена оформление (благодаря этому значению атрибута маркированные списки удобно использовать как меню и т.д.).
Также, можно задать рисунок как маркер списка. Делается это так:
list-style-image: url(Адрес рисунка)
С помощью стилей можно задать и положение маркера относительно текста. Это задаётся атрибутом list-style-position. Он имеет следующие значения:
outside – вне текста (по умолчанию);
inside – внутри текста;
Все стили могут быть заданы в одном атрибуте list-style.
Например:
list-style: inside circle;
Текстовая составляющая оформляется по стандартным правилам для текста, описанным в соответствующей главе нашего справочника.
Меню с помощью списка
Последняя глава нашей статьи посвящена практическому применению списков. Главу можно считать уроком CSS по созданию вертикального меню таким способом.
Итак, по традиции, начинаем с создания файла стилей style.css и файла index.html с таким начальным кодом (содержанием):
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
Теперь, в этот же файл запишем наш список и завершим работу с html:
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
</body>
</html>
У нас получился вот такой простой маркированный список:
Пункт 1
Пункт 2
Пункт 3
Итак, дальше нам предстоит работа только с CSS. Начнём её, запишем в css файл такой код:
ul {
list-style:none;
}
li a {
color:#fff;
text-decoration:none;
padding: 4px 7px;
width:120px;
background:#0076ba;
display:block;
border:1px solid #fff;
font-weight:bold;
}
Мы задали сразу стили для всего списка и его элементов в случае, если они – ссылки. Должно получиться так:
ul {
list-style:none;
}
li a {
color:#fff;
text-decoration:none;
padding: 4px 7px;
width:120px;
background:#0076ba;
display:block;
border:1px solid #fff;
font-weight:bold;
}
Теперь добавим эффектов при наведении мыши на кнопку:
li a:hover {
background:#d36800;
}
Вот, и всё. Наше меню готово.
Думаю, что общий принцип его создания с помощью списков понятен. Демо – смотрите внизу статьи.
Итак, мы разобрались с основными правилами оформления списков и сферами их использования. Желаю Вам приятной и успешной работы с CSS. Спасибо за внимание!