Базовые маркеры и числа

Фундаментальным вопросом рассмотрения при создании оформления списка является форма маркера или способ нумерации, который желательно использовать. Можно также вообще не использовать маркеры и числа. Как было показано в статье 16 о списках HTML, существует множество различных возможностей, задаваемых с помощью свойства list-style-type. Например, чтобы задать для всех неупорядоченных списков на сайте квадратные маркеры, используйте следующий код CSS:

который создает что-то подобное изображенному на рис. 32.1:

Рис. 32.1. Неупорядоченный список с квадратными маркерами

Несколько распространенных типов списков показаны на рис. 32.2:

Рис. 32.2. Распространенные стили списков

Существуют также и другие менее распространенные возможности.

Отметим, что маркеры и цифры будут изображаться цветом, который задается или наследуется элементом li. Если требуется, чтобы маркер имел цвет отличный от текста, нужно использовать изображение, или решить проблему с помощью других элементов в пунктах списка (это можно легко сделать, например, когда все пункты являются ссылками).

Специальные маркеры, использующие изображения

Стандартного множества маркеров достаточно для базового контента, однако широко распространено требование замены их специальным изображением. Спецификация CSS содержит свойство list-style-image для добавления специального изображения списка. Однако это свойство имеет ограниченные возможности позиционирования для фонового изображения, и в некоторых ситуациях вообще не работает в браузере IE. Поэтому значительно более распространенной практикой является просто задание фонового изображения в пунктах списка.Представим, что имеется список лент RSS и необходимо изменить маркер на стандартную оранжевую иконку RSS. Мы задаем для списка класс "rss", чтобы выделить его из других списков:

Прежде всего, определяем для списка отсутствие list-style-type и удаляем поле и заполнение. Затем мы добавляем просто фоновое изображение для каждого пункта списка, некоторое заполнение слева, чтобы сместить текст, позволяя вывести изображение, и некоторое заполнение снизу, чтобы растянуть пространство между пунктами списка:

Это создает список с изображением RSS вместо маркеров, как показано на рис. 32.3:

Рис. 32.3. Список с маркерами изображениями

Отметим, что фоновое изображение позиционируется для точного размещения с помощью пикселей. В зависимости от создаваемого дизайна, можно использовать также %, em или ключевые слова.Будьте внимательны при проектировании свойств контента, которые могут создавать многострочные пункты списков - если задать для фонового изображения вертикальное центрирование или 50%, то это может выглядеть достаточно странно, как показано на рис. 32.4:

Рис. 32.4. Демонстрация вертикально центрированных маркерных изображений на многострочном пункте списка

Задавая размещение изображения вверху пункта списка, мы сохраняем используемое по умолчанию поведение маркеров (когда маркер размещается в первой строке) - см. рис. 32.5:

Рис. 32.5. Демонстрация выровненных по верху маркерных изображений на многострочном пункте списка

Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: