HTML, XHTML и CSS на 100%
Шрифт:
Создадим такую страницу, в которой содержимое располагается по центру внутри блока маркера фиксированной ширины 6 em (листинг 9.9).
<html>
<head>
<title>Глава .9 Выравнивание содержимого в блоке маркера</title>
<style type="text/css">
li:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
</style>
</head>
<body>
<ol>
<li> Это первый элемент.
<li> Это второй элемент.
<li> Это третий элемент.
</ol>
</body>
</html>
Если вы откроете документ, представленный в листинге 9.9, в браузере, то увидите следующее:
(1) Это первый элемент.
(2) Это второй элемент.
(3) Это третий элемент.
Рассмотрим еще один пример (листинг 9.10). В нем маркеры создаются перед элементами списка и после них.
<html>
<head>
<title>Глава 9. Маркеры перед элементами списка и после них</title>
<style type="text/css">
@media screen, print {
li:before {
display: marker;
content: url("smiley.gif");
li:after {
display: marker;
content: url("sad.gif");
}
}
</style>
</head>
<body>
<ul>
<li>первый элемент списка располагается первым
<li>второй элемент списка располагается вторым
</ul>
</body>
</html>
В результате обработки браузером документа из листинга 9.10 вы получите следующее:
:-) первый элемент списка располагается первым :-(
:-) второй элемент списка располагается вторым :-(
Рассмотрим еще один пример, где маркеры используются для нумерации абзацев-заметок (листинг 9.11).
<html>
<head>
<title>глава 9. Маркеры, использующиеся для создания нумерованных заметок</title>
<style type="text/css">
p { margin-left: 12 em; }
@media screen, print {
p.note:before {
display: marker;
content: url("note.gif")
"Примечание " counter(note-counter) ":";
counter-increment: note-counter;
text-align: left;
width: 10em;
}
}
</style>
</head>
<body>
Это первый абзац в данном документе.
<p class="note">Это очень короткий документ.
Конец.
</body>
</html>
В результате выполнения документа из листинга 9.11 получим следующее:
Это первый абзац в данном документе.
Примечание 1: Это очень короткий документ.
Конец.
Вы также можете изменять расстояние между ближайшими краями границ блока маркера и связанного с ним главного блока, используя свойство marker-offset. В качестве значения можно использовать служебное слово auto. Тогда браузер задаст расстояние автоматически.
Разберем это свойство на примере. Создадим страницу, в которой маркеры используются для добавления точек после каждого элемента нумерованного списка, и зададим область для маркеров списка шириной 8 em (листинг 9.12).
<html>
<head>
<title>Глава 9. Пример маркера</title>
<style type="text/css">
p { margin-left: 8em } /* Создаем пространство для счетчиков 8 em */
li:before {
display: marker;
marker-offset: 3em;
content: counter(mycounter, upper-roman) ".";
counter-increment: mycounter;
}
</style>
</head>
<body>
Это предыдущий абзац ...
<ol>
<li> Это первый элемент списка.
<li> Это второй элемент списка.
<li> Это третий элемент списка.
</ol>
Это следующий абзац ...
</body>
</html>
В результате получим следующее:
Это предыдущий абзац ...
I. Это первый элемент списка.
II. Это второй элемент списка.
III. Это третий элемент списка.
Это следующий абзац ...
Теперь вы сможете справиться с любым списком и при этом оформить его так, что он не будет выглядеть «серо» на фоне всей страницы.
9.4. Таблицы
Таблицы – одно из главных средств расположения элементов на странице. Они позволяют расположить меню рядом с текстом и могут подстраиваться под монитор компьютера клиента.
Селекторы столбцов