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

HTML, XHTML и CSS на 100%

на обложку

Квинт Игорь

Шрифт:

• lower-latin или lower-alpha – строчные буквы в коде ASCII (a, b, c… z);

• upper-latin или upper-alpha – прописные (заглавные) буквы в коде ASCII (A, B, C… Z);

• lower-greek – классические строчные греческие буквы: альфа (а), бета (Р), гамма (у) и т. д.

Для примера создадим страницу, представленную в листинге 9.5.

Листинг 9.5. Нумерация

<html>

<head>

<title>Глава 9. Нумерация с использованием римских цифр</title>

ol { list-style-type: upper-roman }

</style>

</head>

<body>

<ol>

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

<li> Это второй элемент списка.

<li> Это третий элемент списка.

</ol>

</body>

</html>

В результате обработки браузером кода из листинга 9.5 вы должны увидеть такой список:

I Это первый элемент.

II Это второй элемент.

III Это третий элемент.

Теперь рассмотрим свойство list-style-image. Оно определяет файл с картинкой, используемой в качестве маркера списка. Если картинка доступна, то она заменяет маркер, устанавливаемый свойством list-style-type.

Рассмотрим такой пример:

UL { list-style-image: url(«http://my_site.com/my_marker.jpg») }

Если браузеру удастся загрузить файл картинки my_marker. jpg, то он отобразит ее перед каждым пунктом списка в качестве маркера.

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

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

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

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

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

<html>

<head>

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

ul { list-style: outside }

ul.compact { list-style: inside }

</style>

</head>

<body>

<ul>

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

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

</ul>

<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>

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

ul li { list-style: disc }

</style>

</head>

<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 о стиле списка исключительно в элементах списка: