Читать онлайн «HTML, XHTML и CSS на 100%». Страница 36

Автор Игорь Квинт

<body>

<li>первый уровень списка

<ul>

<li>второй уровень списка

</ul>

</ol>

</body>

</html>

Отображение элементов списка первого и второго уровней, помеченных маркерами типа lower-alpha и disc соответственно, будет осуществлено надлежащим образом. Однако каскад приведет к тому, что первое правило стиля (включающее специфичную информацию о классе) будет перекрывать второе. И вы получите одну и ту же маркировку для первого и второго уровней (рис. 9.2).

Рис. 9.2. Каскад

Следующий код позволит решить данную проблему:

OL.alpha > LI { list-style: lower-alpha }

UL LI { list-style: disc }

Есть еще один способ записи, который позволит отобразить ваш список так, как вы задумали. Для этого нужно задать информацию list-style о стиле списка исключительно в элементах списка:

OL.alpha { list-style: lower-alpha }

UL { list-style: disc }

Благодаря наследованию значения свойства list-style элементов OL и UL будут передаваться соответствующим свойствам элементов LI. Именно этот способ рекомендуется использовать для задания стиля списка.

Значение URL вы можете комбинировать с любыми другими значениями, как в этом примере:

UL { list-style: url(«http://my_site.com/my_image.gif») disc }

Если в данном примере браузер не сможет получить доступ к графическому объекту, то вместо него он будет использовать маркер типа disc.

Надо отметить, что если для свойства list-style устанавливается значение none, то свойствам list-style-type и list-style-image также присваивается значение none:

UL { list-style: none }

В результате маркер элемента списка просто не отображается.

Маркеры

В данном разделе мы рассмотрим использование маркеров.

Для понимания маркеров нужно знать, что браузер обрабатывает каждый элемент HTML-документа как прямоугольный блок.

Большинство элементов CSS генерируются внутри одного главного структурного блока HTML-элемента. При использовании в CSS маркеров браузер применяет два способа отображения, то есть генерирует два блока: один главный структурный блок (для содержимого элемента) и один отдельный блок для маркера (используемый для таких элементов оформления, как маркеры позиции, изображения или числа). Блок маркера может находиться внутри или вне главного блока. В отличие от содержимого, добавляемого с помощью свойства content, блок маркера не влияет на расположение главного блока.

Более ограниченный в своих возможностях способ разбиения документа использует свойства списков. И хотя маркеры более сложны для понимания, в отличие от списков они позволят вам точно управлять их позицией и содержимым. Вы также можете использовать маркеры вместе со счетчиками для создания новых стилей списков, для нумерации заметок на полях и множества других действий.

В примере из листинга 9.8 показано, как могут использоваться маркеры для добавления точек после каждого элемента нумерованного списка.

Листинг 9.8. Создание списка с помощью маркеров

<html>

<head>

<title>Глава 9. Создание списка с помощью маркеров</title>

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>

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. Тогда браузер задаст расстояние автоматически.