Маркеры
Маркеры
В данном разделе мы рассмотрим использование маркеров.
Для понимания маркеров нужно знать, что браузер обрабатывает каждый элемент HTML-документа как прямоугольный блок.
Большинство элементов CSS генерируются внутри одного главного структурного блока HTML-элемента. При использовании в CSS маркеров браузер применяет два способа отображения, то есть генерирует два блока: один главный структурный блок (для содержимого элемента) и один отдельный блок для маркера (используемый для таких элементов оформления, как маркеры позиции, изображения или числа). Блок маркера может находиться внутри или вне главного блока. В отличие от содержимого, добавляемого с помощью свойства content, блок маркера не влияет на расположение главного блока.
Более ограниченный в своих возможностях способ разбиения документа использует свойства списков. И хотя маркеры более сложны для понимания, в отличие от списков они позволят вам точно управлять их позицией и содержимым. Вы также можете использовать маркеры вместе со счетчиками для создания новых стилей списков, для нумерации заметок на полях и множества других действий.
В примере из листинга 9.8 показано, как могут использоваться маркеры для добавления точек после каждого элемента нумерованного списка.
Листинг 9.8. Создание списка с помощью маркеров
<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).
Листинг 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). В нем маркеры создаются перед элементами списка и после них.
Листинг 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).
Листинг 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>Это первый абзац в данном документе.</p>
<p class="note">Это очень короткий документ.</p>
<p>Конец.</p>
</body>
</html>
В результате выполнения документа из листинга 9.11 получим следующее:
Это первый абзац в данном документе.
Примечание 1: Это очень короткий документ.
Конец.
Вы также можете изменять расстояние между ближайшими краями границ блока маркера и связанного с ним главного блока, используя свойство marker-offset. В качестве значения можно использовать служебное слово auto. Тогда браузер задаст расстояние автоматически.
Разберем это свойство на примере. Создадим страницу, в которой маркеры используются для добавления точек после каждого элемента нумерованного списка, и зададим область для маркеров списка шириной 8 em (листинг 9.12).
Листинг 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>
<p> Это предыдущий абзац ...
<ol>
<li> Это первый элемент списка.
<li> Это второй элемент списка.
<li> Это третий элемент списка.
</ol>
<p> Это следующий абзац ...
</body>
</html>
В результате получим следующее:
Это предыдущий абзац ...
I. Это первый элемент списка.
II. Это второй элемент списка.
III. Это третий элемент списка.
Это следующий абзац ...
Теперь вы сможете справиться с любым списком и при этом оформить его так, что он не будет выглядеть «серо» на фоне всей страницы.
Данный текст является ознакомительным фрагментом.