В этой статье мы продолжим разбор основных способов форматирования текстов на Web-страницах. Говоря о форматировании текстов, нельзя не упомянуть о таком распространенном методе, как составление списков. Методика составления списков приведена и в спецификациях языка HTML, в частности и в последней, четвертой. Тем не менее создатели страниц сегодня не слишком часто обращаются к представлению списков способами, предлагаемыми HTML, предпочитая конструировать списки с помощью таблиц. В CSS (в том числе и в спецификации CSS2) сделана попытка включить в простую и доступную методику, предлагаемую HTML, функции оформления и позиционирования страниц, реализация которых ранее без применения таблиц была невозможна. Рассмотрим эти методы подробнее.
Внешнее оформление списков
В CSS предусмотрено несколько способов внешнего оформления списков. Все они так или иначе определяют возможность применения различных маркеров для отделения одних пунктов списка от других. Использование же контекстных селекторов позволяет назначать свои собственные стили подпунктам, "подподпунктам" и так далее по иерархии вложения. В данной статье представлены варианты селекторов и методы их назначения. Кроме того, мы рассмотрим отдельные случаи применения тех или иных способов задания стилей и разберем некоторые стандартные ситуации.
Назначение стандартных типов маркеров происходит в соответствии с синтаксисом
{list-style-type: значение}
Возможные варианты значений, определяющих применение того или иного маркера для неупорядоченных списков, выбираются из табл. 1.
Пример:
<html>
<head>
<title>Рисунок 7.1</title>
</head>
<body>
<ul>
<li style="list-style-type: disk"> Маркер - диск</li>
<li> Маркер - диск</li>
<li style="list-style-type: circle"> Маркер - кольцо</li>
<li> Маркер - кольцо</li>
<li style="list-style-type: square"> Маркер - квадрат</li>
<li> Маркер - квадрат</li>
<li style="list-style-type: none"> Нет маркера</li>
<li> Нет маркера</li>
</ul>
</body>
</html>
Как видно из примера неупорядоченного списка, в котором используются эти маркеры, назначение маркера наследуется. Другими словами, достаточно указать маркер для одного (например, для первого) пункта списка, и все последующие пункты будут так же отмечены этим маркером, пока не последует новое назначение.
Аналогичным образом назначаются маркеры и для упорядоченных списков. Возможные варианты значений приведены в табл. 2.
Применяя эти значения на практике, получим следующий HTML-код:
<html>
<head>
<title>Рисунок 2</title>
<style type=text/css>
ol .lower-roman {list-style-type: lower-roman}
ol .upper-roman {list-style-type: upper-roman}
ol .lower-alpha {list-style-type: lower-alpha}
ol .upper-alpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class=decimal>
<li>Арабские цифры</li>
<li>Арабские цифры</li>
</ol>
<ol class=lower-roman>
<li>Малые римские цифры</li>
<li>Малые римские цифры</li>
</ol>
<ol class=upper-roman>
<li>Большие римские цифры</li>
<li>Большие римские цифры</li>
</ol>
<ol class=lower-alpha>
<li>Строчные латинские буквы</li>
<li>Строчные латинские буквы</li>
</ol>
<ol class=upper-alpha>
<li>Прописные латинские буквы</li>
<li>Прописные латинские буквы</li>
</ol>
</body>
</html>
Кроме стандартных символов, в CSS в качестве маркера может быть использовано любое изображение, что ранее было возможно только с использованием таблиц. С этой целью значению, описывающему тип маркера, согласно синтаксису
{list-style-image: url(имя_файла)}
придается вид адресной ссылки URL, указывающей на месторасположение изображения, так, как это сделано в примере:
<html>
<head>
<title>Рисунок 3</title>
<ul style="list-style-image: url(bullit.gif)">
</style>
</head>
<body>
<ul>
<li>Первый</li>
<li>Второй</li>
</ul>
</body>
</html>
Заметим, что в данном примере имеется ссылка на локальную машину, но использование URL предполагает возможность обращения к удаленным ресурсам. В этом случае запись назначения стиля будет выглядеть примерно так:
<ulstyle="list-style-image:
url(http://worker.inion.ru/bullit.gif)">
Позиционирование пунктов списка
С помощью свойства list-style-position определяется положение содержимого пунктов списка в пространстве, отведенном для всего списка. Для определения позиции в синтаксическую форму
{list-style-position: значение}
подставляется на выбор одно из значений - inside или outside. При использовании первого значения, как это сделано в примере
<html>
<head>
<title>Рисунок 4</title>
<ul style="list-style-position:inside">
</style>
</head>
<body>
<ul>
<li>Основы CSS<br>ComputerWeekly #1, 1998.</li>
<li>Работа со шрифтами<br>ComputerWeekly #2, 1998.</li>
<li>Оформление текстов<br>ComputerWeekly #3, 1998.</li>
</ul>
</body>
</html>
маркеры располагаются в пространстве, отведенном для списка. Применение значения outside в этом же примере приведет к результату, представленному на рисунке. Как видно из этого рисунка, маркеры, помечающие список, находятся вне пространства, отведенного под сам список. Заметим так же, что данные конструкции позволяют в некоторой степени компенсировать отсутствие в CSS конструкции списка с определением, или, как еще говорят, словарного списка, описываемого тегами DL, DT и DD языка HTML.
Группировка стилей списков
В CSS предусмотрена возможность придания создаваемому списку нескольких типов оформления сразу. Достигается это подстановкой в выражение, записанное согласно синтаксису
{list-style:значение1 значение2 значениеN},
сразу нескольких значений, определяющих тот или иной стиль, как это сделано в следующем примере:
<html>
<title>Рисунок 6</title>
<ul style="list-style: inside url(bullit.gif)">
<li>Основы CSS<br>ComputerWeekly #1, 1998.</li>
<li>Работа со шрифтами<br>ComputerWeekly #2, 1998.</li>
<li>Оформление текстов<br>ComputerWeekly #3, 1998.</li>
</ul>
</html>
На практике весьма нередки случаи, когда пользователи сохраняют загруженные браузером страницы для последующего их просмотра. Если при этом в качестве маркеров списка использовались изображения, то сохраненный список останется без маркеров. Чтобы этого не случилось, целесообразно дублировать маркеры-изображения маркерами-символами - дисками, кольцами или квадратами. Для этого просто совмещаются задания маркера-изображения и маркера-символа, как это сделано ниже:
ul {list-style: url(http://worker.inion.ru/bullit.gif)disk}
Вложенные списки
Назначение стилей вложенным спискам - задача не сложная, однако, решая ее, легко ошибиться и не получить желаемое. Укажем на некоторые трудности, которые могут подстерегать авторов Web-страниц. Прежде всего следует обращать внимание на принципы наследования свойств между списками разного уровня, а также на порядок каскадирования, особенно при использовании контекстных селекторов. Так, используя код
<style type="text/css">
ol.alpha li {list-style: upper-alpha}
ul li {list-style: disc}
</style>
т. е. задавая стили с помощью контекстных селекторов, как, например, в приведенном ниже коде:
<html>
<head>
<title>Рисунок 7</title>
</head>
<style type="text/css">
ol.alpha li {list-style: upper-alpha}
ul li {list-style: disc}
</style>
<body>
<ol class=alpha>
<li>Основной список
<ul>
<li>Встроенный список
</ul>
</ol>
</body>
</html>
невозможно маркировать основной список прописными латинскими буквами, а вложенный, неупорядоченный, список - дисками, поскольку на экране отобразится только стилевое решение, которое задано первым. Таким образом, оба списка будут промаркированы исключительно буквами. Решается эта проблема несколькими путями. Во-первых, можно назначить стилевое решение непосредственно для пунктов списка, что не всегда возможно, во-вторых, применить специальный селектор, определяющий порядок наследования. Его синтаксис:
тег1~тег2 {свойство: значение}
Нетрудно заметить, что этот селектор напоминает обычный контекстный селектор, только теги в нем разделены тильдой. Используя его, мы строго определяем порядок наследования, указывая при этом, что пункты именно основного списка будут промаркированы прописными латинскими буквами:
<style type="text/css">
ol.alpha ~ li {list-style: upper-alpha}
ul li {list-style: disc}
</style>
Третий путь заключается в отказе от контекстных селекторов и применении свойства list-style только к конкретным спискам. Этот способ является оптимальным, и его рекомендуют авторы спецификации CSS2.