HTML, XHTML и CSS на 100%, Квинт Игорь

HTML, XHTML и CSS на 100%

на обложку

Квинт Игорь

Шрифт:

Создадим такую страницу, в которой содержимое располагается по центру внутри блока маркера фиксированной ширины 6 em (листинг 9.9).

Листинг 9.9. Выравнивание содержимого в блоке маркера

<html>

<head>

<title>Глава .9 Выравнивание содержимого в блоке маркера</title>

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). В нем маркеры создаются перед элементами списка и после них.

Листинг 9.10. Маркеры перед элементами списка и после них

<html>

<head>

<title>Глава 9. Маркеры перед элементами списка и после них</title>

@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).

Листинг 9.11. Маркеры, используемые для создания нумерованных заметок

<html>

<head>

<title>глава 9. Маркеры, использующиеся для создания нумерованных заметок</title>

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).

Листинг 9.12. Пример маркера

<html>

<head>

<title>Глава 9. Пример маркера</title>

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. Таблицы

Таблицы – одно из главных средств расположения элементов на странице. Они позволяют расположить меню рядом с текстом и могут подстраиваться под монитор компьютера клиента.

Селекторы столбцов