В этой статье мы продолжим разбор основных способов форматирования текстов на 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>
согласно синтаксису
{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>
помечающие список, находятся вне пространства, отведенного под сам список. Заметим так же, что данные конструкции позволяют в некоторой степени компенсировать отсутствие в 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}
Вложенные списки
Прежде всего следует обращать внимание на принципы наследования свойств между списками разного уровня, а также на порядок каскадирования, особенно при использовании контекстных селекторов. Так, используя код
<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.
| |||||||||||||||||||