Квинт Игорь
Шрифт:
Итак, начнем со стилизации списка с помощью свойства list-style-type. Это свойство задает вид маркера элемента списка, если для свойства list-style-image указано значение none или изображение, на которое указывает URL, недоступно. Можно использовать три типа маркеров: глифы, нумерованные и алфавитные, либо задать значение none, которое означает, что маркер не используется.
Рассмотрим типы маркеров списка подробнее. Первыми разберем глифы. Они определяются с помощью значений disk, circle и square. Обычно они отображаются браузерами клиента как круг, окружность или квадрат. Пример списка с маркером в виде квадрата приведен в листинге 9.4.
<html>
<head>
<title>Глава 9. Маркеры в виде квадрата</title>
<style type="text/css">
ol { list-style-type: square }
</style>
</head>
<body>
<ol>
<li> Это первый элемент списка.
<li> Это второй элемент списка.
<li> Это третий элемент списка.
</ol>
</body>
</html>
Теперь рассмотрим нумерованные списки. Различают несколько систем нумерации списков. Ниже представлены все системы нумерации, используемые в CSS, и их описание:
• decimal – десятичные числа, начиная с 1;
• decimal-leading-zero – десятичные числа, дополненные нулями (например, 01, 02, 03… 98, 99);
• lower-roman – римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т. д.);
• upper-roman – римские цифры, представленные прописными буквами (I, II, III, IV, V и т. д.);
• hebrew – традиционная еврейская нумерация;
• georgian – традиционная грузинская нумерация (an, ban, gan…, he, tan, in, in-an…);
• armenian – традиционная армянская нумерация;
• cjk-ideographic – простые идеографические числа;
• hiragana – a, i, u, e, o, ka, ki…;
• katakana – A, I, U, E, O, KA, KI…;
• hiragana-iroha – i, ro, ha, ni, ho, he, to…;
• katakana-iroha – I, RO, HA, NI, HO, HE, TO….
Третий вариант задания маркеров списка – с помощью так называемой алфавитной системы, или с помощью букв. Ниже приведены алфавитные системы и их описание:
• lower-latin или lower-alpha – строчные буквы в коде ASCII (a, b, c… z);
• upper-latin или upper-alpha – прописные (заглавные) буквы в коде ASCII (A, B, C… Z);
• lower-greek – классические строчные греческие буквы: альфа (а), бета (Р), гамма (у) и т. д.
Для примера создадим страницу, представленную в листинге 9.5.
<html>
<head>
<title>Глава 9. Нумерация с использованием римских цифр</title>
<style type="text/css">
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).