Списки

Списки

Рассмотрим все возможности задания спискам различного визуального форматирования.

Кстати, если вы с помощью display: marker укажете маркер вместе с элементом списка, созданным с помощью свойств списка, то маркер просто-напросто заменит стандартный элемент списка. Подробно про маркеры будет рассказано дальше.

Для списков также нельзя задать фон. Чтобы использовать в документе список с фоном, нужно задать список как маркер, то есть использовать display: marker, но про это также будет рассказано дальше.

Итак, начнем со стилизации списка с помощью свойства list-style-type. Это свойство задает вид маркера элемента списка, если для свойства list-style-image указано значение none или изображение, на которое указывает URL, недоступно. Можно использовать три типа маркеров: глифы, нумерованные и алфавитные, либо задать значение none, которое означает, что маркер не используется.

Рассмотрим типы маркеров списка подробнее. Первыми разберем глифы. Они определяются с помощью значений disk, circle и square. Обычно они отображаются браузерами клиента как круг, окружность или квадрат. Пример списка с маркером в виде квадрата приведен в листинге 9.4.

Листинг 9.4. Нумерация средствами CSS

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

Листинг 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).

Листинг 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 }

В результате маркер элемента списка просто не отображается.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

3.2. Списки

Из книги Программирование на языке Пролог автора Клоксин У.


Списки

Из книги Компьютер на 100. Начинаем с Windows Vista автора Зозуля Юрий

Списки Чтобы акцентировать внимание на отдельных абзацах, их можно пронумеровать, создав так называемый нумерованный список. Другой способ выделения абзацев состоит в отметке их маркерами (маркированный список). Например, последовательность выполнения практических


Списки изображений

Из книги Введение в OpenGL автора Компьютеры Автор неизвестен -

Списки изображений Если нужно несколько раз обращаться к одной и той же группе команд,эти команды можно объединить в так называемый список изображений (display list) и вызывать его при необходимости. Для того, чтобы создать новый список изображений надо поместить все команды,


Маркированные списки

Из книги Word 2007.Популярный самоучитель автора Краинский И

Маркированные списки При создании маркированных списков можно использовать самые разные типы маркеров. Список кнопки Маркеры (см. рис. 4.30) и одноименная команда контекстного меню (см. рис. 4.32) позволяют выбрать один из семи наиболее применяемых маркеров. Кроме того, можно


Нумерованные списки

Из книги Linux-сервер своими руками автора Колисниченко Денис Николаевич

Нумерованные списки При создании нумерованных списков можно использовать самые разные типы нумерации. Список кнопки Нумерация (рис. 4.36) и одноименная команда контекстного меню (см. рис. 4.31) позволяют выбрать один из семи наиболее часто используемых типов нумерации. Кроме


15.5.6. Списки ACL

Из книги Самоучитель работы на компьютере автора Колисниченко Денис Николаевич

15.5.6. Списки ACL ACL (Access Control Lists) — списки контроля доступа. Довольно часто возникает потребность группировки однотипных параметров в единое целое для их последующей обработки. Для эффективного решения этой задачи используются списки контроля доступом (ACL). Например: acl SSL_ports


19.5. Списки видимости

Из книги Инфраструктуры открытых ключей автора Полянская Ольга Юрьевна

19.5. Списки видимости Иногда нужно, чтобы часть пользователей из вашего списка контактов «видела» вас, а остальные думали, что вас нет в сети. Это возможно осуществить в ICQ. Вам нужно лишь сформировать списки «видимости». Откройте окно Мои настройки (Главное, Настройки и


Косвенные списки САС

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

Косвенные списки САС В версии 2000 года стандарта X.509 [78] появилась концепция косвенных дельта-списков. Подобно дельта-спискам, косвенные списки содержат сведения об изменениях ранее опубликованной информации об аннулировании сертификатов. Однако косвенные дельта-списки


Списки

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Списки Списки используются для того, чтобы представить читателю перечень каких-либо позиций, пронумерованных или непронумерованных, — пунктов списка. Список с пронумерованными пунктами так и называется — нумерованным, а с непронумерованными — маркированным. В


Списки

Из книги Самоучитель работы на Macintosh автора Скрылина Софья

Списки Списки используются для того, чтобы представить читателю перечень каких-либо позиций, пронумерованных или непронумерованных, — пунктов списка. Список с пронумерованными пунктами так и называется — нумерованным, а с непронумерованными — маркированным. В


5.1.8. Списки

Из книги Linux: Полное руководство автора Колисниченко Денис Николаевич

5.1.8. Списки Текстовый процессор Pages, как и MS Word, предлагает создавать списки следующих видов:? Маркированные. В качестве маркера могут быть использованы символы, готовые картинки, входящие в библиотеку, картинки пользователя;? Нумерованные. Перечень вариантов для


18.6. Списки ACL

Из книги Офисный компьютер для женщин автора Пастернак Евгения

18.6. Списки ACL ACL (Access Control Lists) — списки контроля доступа. Довольно часто возникает необходимость группировки однотипных параметров в единое целое для их последующей обработки. Для эффективного решения этой задачи используются списки ACL. Например:acl SSL_ports port 443 563Эта запись


23.2.4. Списки

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

23.2.4. Списки Библиотека Glib содержит средства для работы с одно- и двусвязными списками. Особенность двусвязного списка заключается в том, что по нему можно перемещаться в обоих направлениях — назад и вперед. В файле gslist.h (Glib Single List) описаны средства для работы с


Списки

Из книги автора

Списки Когда в тексте нужно что-то перечислить, это принято делать с помощью списков. Пока читаете книгу, обратили внимание, сколько в ней есть списков? Я их создавала в Word с помощью специальных инструментов. Сейчас расскажу вам о них.Остаемся в группе Абзац на вкладке


Списки

Из книги автора

Списки Списки дают возможность расположить большое количество пунктов компактно. При создании списков вы сами можете определить количество видимых элементов. Можно настроить возможность выбора одного или нескольких пунктов. По функциям списки напоминают


Списки

Из книги автора

Списки Рассмотрим все возможности задания спискам различного визуального форматирования.Кстати, если вы с помощью display: marker укажете маркер вместе с элементом списка, созданным с помощью свойств списка, то маркер просто-напросто заменит стандартный элемент списка.