Шрифт:
<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.
<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 }
В результате маркер элемента списка просто не отображается.
Маркеры