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

HTML, XHTML и CSS на 100%

на обложку

Квинт Игорь

Шрифт:

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, заменяет обычный маркер элемента списка.