CSS / 12. Списки и генерируемое содержимое

В применении CSS для верстки списки представляют особый интерес. Элементы списка – это простые наборы блочных элементов, имеющие дополнительный блок, «подвешенный» сбоку, который, собственно, не участвует в компоновке документа. В нумерованном списке в этом блоке содержатся возрастающие числа (или буквы), которые вычисляются и форматируются главным образом агентом пользователя, а не автором. Руководствуясь структурой документа, агент пользователя генерирует номера и их основное представление.
Статьи раздела '12. Списки и генерируемое содержимое':
Вставка генерируемого содержимого
Для вставки генерируемого содержимого в документ применяются псевдоэлементы :before и :after. Они помещают перед содержимым элемента или после него генерируемое содержимое, заданное в виде свойства (как описано в следующем разделе...
Вставка значений атрибутов
Иногда требуется сделать значение атрибута элемента частью представления документа. Например, можно поместить значение атрибута href каждой ссылки сразу после ссылок, как здесь: a[href]:after {content: attr(href);} В результ...
Генерируемое содержимое
CSS2 и CSS2.1 включают новую возможность – генерируемое содержимое (generated content). Это содержимое, которое создается броузером, но не представлено ни разметкой, ни содержимым. Например, маркеры списка – это генерируемое содер...
Генерируемые кавычки
Особой формой генерируемого содержимого являются кавычки. CSS2.x предоставляет мощную поддержку обоих типов кавычек и их поведения в случае вложенности. Это стало возможным благодаря сочетанию значения open-quote свойства content ...
Изображения для элементов списка
Иногда обычный маркер заменяют изображением, привлекая для этого свойство list-style-image. Вот так: ul li {list-style-image: url(ohio.gif);} Да, на самом деле все просто. Задайте значение url(), и маркеры будут заменены и...
Компоновка списка
Итак, мы рассмотрели основы оформления маркеров списка, и пора рассмотреть построение списков в различных броузерах. Начнем с набора из трех элементов списка, не имеющих никаких маркеров и еще не организованных в список. Рамка вок...
Краткая форма задания стилей списка
Для краткости можно свести три свойства задания стиля списка в одно – list-style. Например: li {list-style: url(ohio.gif) square inside;} Значения свойства list-style могут перечисляться в произвольном порядке, любое из них...
Местоположение маркера списка
В CSS2.1 предусмотрены и другие средства воздействия на представление элементов списка: можно располагать маркер вне или внутри содержимого элемента списка. Это делается при помощи свойства list-style-position. Если местоположе...
Определение содержимого
Для того чтобы генерировать содержимое, необходим способ описания этого содержимого. Как вы уже видели, это делается с помощью свойства content, но оно предоставляет гораздо больше возможностей, чем вы видели до сих пор. Вы уже ви...
Позиционирование маркеров списка
Возможность управлять расстоянием между маркером и содержимым элемента списка – это то, что запрашивают многие авторы. CSS2 определил средства для этого, среди которых можно назвать свойство marker-offset (смещение-маркера) и знач...
Применение счетчиков
Однако для действительного отображения счетчиков надо задать свойство content в сочетании с одним из определяющих счетчики значением. Чтобы увидеть принцип работы, рассмотрим нумерованный список в стиле XML: First item Item ...
Сброс и приращение
Основа создания счетчиков – возможность задавать для них как точку отсчета, так и приращение на некоторую величину. Первое осуществляется с помощью свойства counter reset. Идентификатор счетчика – это просто метка, созданная автор...
Списки
В некотором смысле практически все, что не является повествовательным текстом, может считаться списком. Перепись населения США, Солнечная система, мое генеалогическое дерево, ресторанное меню и даже все друзья, какие у вас когда-л...
Счетчики
Всем нам хорошо известны счетчики; например, маркеры элементов нумерованного списка – это счетчики. В CSS1 не было способа влиять на них, преимущественно потому, что в этом не было необходимости: HTML определил собственные правила...
Счетчики и область видимости
На настоящий момент мы знаем, как связывать несколько счетчиков для создания нумерации разделов и подразделов. Часто именно этого желают авторы и для вложенных нумерованных списков, но попытки создания необходимого количества счет...
Типы списков
Чтобы изменить тип маркера, обозначающего элементы списка, применяют свойство list-styl -type. Да, ключевых слов многовато. Многие из них были введены в CSS2, но затем изъяты в CSS2.1. Агент пользователя должен интерпретировать лю...

Страницы: 1