Часть 2. Списки
Оглавление книги, перечень товаров и услуг, словарь терминов и т. п. обычно представляют в виде простых или иерархических (многоуровневых, древовидных, вложенных) списков. Для задания структуры списка применяют специальные теги HTML, а для определения его внешнего вида - CSS.
Списки бывают маркированными (неупорядоченными) и нумерованными (упорядоченными), задаваемыми соответственно контейнерными тегами <ul> (от англ. unordered list) и <ol> (от англ, ordered list).
Элементы списков обоих типов задают тегами <li> (от англ, list item). Теги <li> можно записывать как неконтейнерные и как контейнерные. Если использовать неконтейнерную запись, то за <li/> непосредственно следует содержимое элемента: обычный текст, ссылка, графическое изображение и другие элементы. Контейнерная запись более предпочтительна, поскольку позволяет отчетливей представить структуру сложного списка. Однако возможны ситуации, когда данные варианты оказываются неэквивалентными.
Кроме тегов <ul> и <ol>, иногда применяют контейнерный тег <dl> (от англ. definition list) для создания списка типа словаря или определений.
Теги списков задают элементы блочного типа. Внешне по умолчанию они выделяются относительным положением (отступами). Так, элементы вложенного списка позиционируются ниже и правее содержащего их элемента (или элемента более высокого иерархического уровня). Впрочем, с помощью параметров CSS можно управлять расположением элементов списка.
2.1. Маркированный список
М
аркированный
список задается контейнерным тегом
<ul>,
в котором располагают теги <li>.
Тег <ul>
может содержать и другие <ul>
и в таком случае получаются вложенные
списки.
На рис. слева показан пример иерархического маркированного списка. Список отображается в окне браузера с отступами и маркерами в зависимости от уровня вложенности одного списка в другой. Маркеры в виде кружков и квадратиков появляются по умолчанию. Все браузеры, кроме Opera, по умолчанию создают различные маркеры для первых трех уровней вложения списков.
С помощью параметра CSS list-style-image:url("URL-адрес файла") можно задать маркеры в виде картинок из графических файлов. Если по какой-либо причине файл с изображением маркера окажется недоступным, то будет отображен маркер по умолчанию. На рис. справа приведен пример, в котором задаются различные графические маркеры для разных списков в зависимости от их уровня вложенности. Здесь в таблице стилей сначала назначается маркер для всех списков (ul), затем - для списков второго уровня (ul ul), и, наконец, определяется изображение маркера для всех списков внутри списка второго уровня (ul ul ul). Иначе говоря, мы используем контекстные классы стилей. Разумеется, данную задачу можно решить и иначе. Например, просто задать три класса стилевых параметров, а затем в каждом из трех элементов <ul> с помощью атрибута class сослаться на соответствующий класс.
Обычные маркеры в виде кружков и квадратиков для списков различных уровней вложенности можно установить по своему усмотрению, а также отменить их отображение с помощью параметра list-style-type. Данный параметр принимает множество значений, из которых отметим здесь лишь некоторые:
none - отмена отображения маркеров;
disc - закрашенный кружок;
circle - незакрашенный кружок;
square - закрашенный квадратик.