HTML, XHTML и CSS на 100%
Шрифт:
<html>
<head>
<title>Глава 9. Создание списка с помощью маркеров</title>
<style type="text/css">
li:before {
display: marker;
content: counter(mycounter, upper-roman) ".";
counter-increment: mycounter;
}
</style>
</head>
<body>
<ol>
<li> Это первый элемент списка.
<li> Это второй элемент списка.
<li>
</ol>
</body>
</html>
В результате выполнения этого HTML-кода и таблицы стилей получим следующий список:
I. Это первый элемент списка.
II. Это второй элемент списка.
III. Это третий элемент списка.
С помощью селекторов потомков и селекторов дочерних элементов вы можете задавать различные типы маркеров в зависимости от глубины вложенности списков.
Чтобы задать маркер, вы должны присвоить свойству display в псевдоэлементе: before или: after значение marker. Если содержимое псевдоэлемента: before или: after, которое относится к типу block или inline, является частью главного блока генерируемого элемента, то содержимое типа marker формируется в отдельный блок маркера, находящийся вне главного блока. Блоки маркеров формируются в виде отдельной строки. Следует также отметить, что блок маркера создается только тогда, когда свойство content псевдоэлемента генерирует какое-то содержимое.
Вы можете задавать для блока маркера границы и отступы.
В официальной документации по CSS говорится, что в псевдоэлементе: before вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста первой строки содержимого главного блока. Если главный блок не содержит текста, то выравниваются верхние сегменты внешних краевых линий блока маркера и главного блока. В псевдоэлементе: after вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста последней строки содержимого главного блока. Если главный блок не содержит текста, то выравниваются нижние сегменты внешних краевых линий блока маркера и главного блока.
Высоту блока маркера вы можете задать свойством line-height. Блок маркера, связанный с псевдоэлементом: before или: after, принимается во внимание при вычислении высоты первого или последнего линейного блока, содержащегося в главном блоке. Таким образом, маркеры выравниваются по первой или по последней строке содержимого элемента, даже если блоки маркеров располагаются в отдельных линейных блоках.
Вертикальное выравнивание внутри блока маркера определяется свойством vertical-align.
Вы также можете изменять ширину блока маркера, используя свойство width. Если вы зададите для свойства width значение auto, то ширина содержимого блока маркера будет равна ширине содержимого.
Для маркера также можно изменять величину горизонтального интервала, используя свойство marker-offset. Это свойство задает расстояние между блоком маркера и
связанным с ним главным блоком. Расстояние измеряется между их ближайшими краями границ.Если для свойства display элемента задано CSS-правило display: list-item и устанавливается значение marker, то блок маркера, генерируемый для псевдоэлемента: before, заменяет обычный маркер элемента списка.
Создадим такую страницу, в которой содержимое располагается по центру внутри блока маркера фиксированной ширины 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; }