Чтение онлайн

ЖАНРЫ

HTML, XHTML и CSS на 100%

Квинт Игорь

Шрифт:

Свойство list-style-position определяет положение блока маркера в главном структурном блоке. Для данного свойства вы можете задавать следующие значения:

• outside – блок маркера находится за пределами главного структурного блока;

• inside – блок маркера находится в первом строковом блоке главного структурного блока, следом за которым выводится содержимое элемента.

Рассмотрим данное свойство на примере (листинг 9.6).

Листинг 9.6. Нумерация в списках

<html>

<head>

<title>Глава 9. Сравнение внутреннего/внешнего расположения</title>

<style type="text/css">

ul { list-style: outside }

ul.compact { list-style: inside }

</style>

</head>

<body>

<ul>

<li>первый

элемент списка располагается первым

<li>второй элемент списка располагается вторым

</ul>

<ul class="compact">

<li>первый элемент списка располагается первым

<li>второй элемент списка располагается вторым

</ul>

</body>

</html>

HTML-документ, представленный в листинге 9.6, показан на рис. 9.1.

Рис. 9.1. Сравнение внутреннего/внешнего расположения

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

Свойство list-style является сокращенной формой задания трех свойств list-style-type, list-style-image и list-style-position, как и рассмотренная ранее сокращенная запись для шрифтов font. Например:

UL { list-style: upper-roman inside } /* Любой элемент UL */

UL > UL { list-style: circle outside } /* Любой дочерний элемент UL элемента UL */

Хотя вы можете задать информацию list-style о стиле списка непосредственно в элементах списка (например, в элементе LI языка HTML), тем не менее такой способ нужно применять с определенной осторожностью. Следующие два правила CSS выглядят похожими, хотя первое определяет селектор потомков, а второе (более специфичное) – селектор дочерних элементов:

OL.alpha LI { list-style: lower-alpha } /* Любой потомок LI элемента OL */

OL.alpha > LI { list-style: lower-alpha } /* Любой дочерний элемент LI элемента OL */

В чем же опасность? При использовании только селекторов потомков вы можете не достичь желаемых результатов. Рассмотрим пример, приведенный в листинге 9.7.

Листинг 9.7. Каскад

<html>

<head>

<title>Глава 9. Результат применения каскада</title>

<style type="text/css">

ol.alpha li { list-style: lower-alpha }

ul li { list-style: disc }

</style>

</head>

<body>

<ol class="alpha">

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

Поделиться с друзьями: