В некоторых случаях у авторов может возникнуть необходимость в том, чтобы агенты пользователей отображали на экране содержимое, которое не принадлежит дереву документа. Одним из хорошо известных примеров такой ситуации является нумерованный список, когда разработчик не желает вводить числа явным образом, а предпочитает, чтобы агент пользователя генерировал их автоматически. Подобным образом у разработчика может возникнуть желание, чтобы пользовательский агент вставлял слово "Рисунок" перед названием рисунка или строку "Глава 7" перед заголовком седьмой главы. В частности, агенты пользователей должны уметь вставлять эти строки для звуковых или эктипографических элементов.
В CSS2 содержимое может генерироваться несколькими способами:
С использованием свойства 'content' в сочетании с псевдоэлементами :before и :after.
С помощью псевдоэлементов :before и :after разработчики задают стиль и местоположение генерируемого содержимого. Как следует из названия, псевдоэлементы :before и :after определяют его местоположение перед и после содержимого элемента, принадлежащего дереву документа соответственно. В сочетании с этими псевдоэлементами свойство 'content' определяет содержимое вставляемого объекта.
Пример(ы):
Например, следующее правило вставляет строку "Примечание: " перед содержимым каждого элемента P, значение атрибута "class" которого равно "note":
P.note:before { content: "Примечание: " }
Объекты форматирования (например, блоки), порождаемые элементом, заключают в себе генерируемое содержимое. Так, например, если в представленном выше примере изменить таблицу стилей следующим образом:
то в результате весь абзац, включая его начальную строку, будет заключен в сплошную зеленую рамку.
В дереве документа существует элемент, с которым псевдоэлементы :before и :after определенным образом связаны и все наследуемые свойства которого они наследуют.
Пример(ы):
Например, следующие правила вставляют открывающие кавычки перед каждым элементом Q. Цвет кавычек будет красным, а шрифт будет таким же, как и шрифт остальной части элемента Q:
Q:before {
content: open-quote;
color: red
}
В объявлении псевдоэлементов :before или :after ненаследуемые свойства принимают свои начальные значения.
Пример(ы):
Т.к. начальное значение свойства 'display' равно 'inline', то кавычки в предыдущем примере вставляются как строковый блок (т.е. на той же строке, на которой находится исходное текстовое содержимое элемента). В следующем примере свойству 'display' явным образом присваивается значение 'block', так что вставляемый текст становится блоком:
Обратите внимание, что звуковой агент пользователя будет воспроизводить фразу "Конец" после вывода остальной части содержимого элемента BODY.
Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: 'position', 'float', свойства списков и свойства таблиц.
Псевдоэлементы :before и :after регулируют использование значений свойства 'display' следующим образом:
Если областью действия селектора является элемент уровня блока, то допустимыми значениями являются 'none', 'inline', 'block' и 'marker'. Если свойству 'display' было присвоено другое значение, то псевдоэлемент будет действовать так, как если бы им было значение 'block'.
Если областью действия селектора является элемент строкового уровня, то допустимыми значениями являются 'none' и 'inline'. Если свойству 'display' было присвоено другое значение, то псевдоэлемент будет действовать так, как если бы им было значение 'inline'.
Примечание. Возможно, что в языке CSS более высоких уровней будет разрешено использование других значений.
Это свойство используется вместе с псевдоэлементами :before и :after для генерации содержимого в документе. Принимаемые им значения имеют следующий смысл:
Значением является URI, обозначающий внешний ресурс. Если поддерживаемые агентом пользователя типы устройств не позволяют ему представлять этот ресурс, это значение следует игнорировать. Примечание. В CSS2 не предусмотрен механизм изменения размера встраиваемого объекта или предоставления текстового описания, как это позволяют делать атрибуты "alt" или "longdesc" при работе с изображениями в HTML. Возможно, что в CSS следующих уровней ситуация изменится.
Счетчики могут задаваться с помощью двух различных функций 'counter()' или 'counters()'. Первая имеет два формата: 'counter(имя)' и 'counter(имя, стиль)'. Генерируемый текст является значением счетчика в структуре форматирования. Он форматируется в заданном стиле (по умолчанию используется стиль 'decimal'). Вторая функция также имеет два формата: 'counter(имя, строка)' и 'counter(имя, строка, стиль)'. Генерируемый текст представляет собой значения всех счетчиков с таким именем в структуре форматирования, разделенные заданной строкой. Счетчики отображаются в указанном стиле (по умолчанию используется стиль 'decimal'). Дополнительную информацию можно получить в разделе, посвященном автоматической нумерации и счетчикам.
Эта функция возвращает строку, которая является значением атрибута X предметной области селектора. Процессор CSS не обрабатывает эту строку. Если предметная область селектора не имеет атрибута X, возвращается пустая строка. Зависимость имен атрибутов от регистра определяется языком документа. Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора.
Свойство 'display' управляет тем, что содержимое помещается либо в блоке структурного или строкового уровня, либо в блоке, порожденном маркером.
В случае аппаратно-зависимого содержимого свойства 'content' его объявление следует помещать в правило @media. Например, текст, состоящий только из букв, может использоваться для любой группы устройств, изображения - только для группы визуальных и растровых устройств, а звуковые файлы - только для группы звуковых устройств.
Пример(ы):
Согласно следующему правилу звуковой файл воспроизводится в конце цитаты, заключенной в кавычки (информацию о дополнительных механизмах можно получить в разделе о звуковых таблицах стилей):
Следующее правило позволяет перед изображением вставлять текст атрибута "alt" языка HTML. Если это изображение не выводится, то читатель, тем не менее, увидит текст атрибута "alt".
IMG:before { content: attr(alt) }
Разработчики могут вставлять в генерируемое содержимое переходы на новую строку с помощью последовательности "\A" в одной из строк после свойства 'content'. Это приводит к принудительному разрыву строки, аналогичному тому, который порождается элементом BR в языке HTML. Дополнительную информацию о последовательности "\A" можно получить в разделах "Строки" и "Символы и регистр".
Генерируемое содержимое не изменяет дерева документа. В частности, оно не поступает обратно в языковой процессор документа (например, для повторного синтаксического анализа).
Примечание. В CSS последующих уровней свойство 'content' сможет принимать дополнительные значения, что позволит настраивать стиль отдельных частей генерируемого содержимого. В CSS2 пока все содержимое псевдоэлементов :before или :after имеет одинаковый стиль.
Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'inline': псевдоэлемент принимается во внимание при вычислении размера блока, порожденного элементом (для 'compact'), и отображается внутри того же структурного блока, что и элемент.
Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'inline': применяются правила предыдущего пункта.
Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'block': псевдоэлемент форматируется как блок, расположенный над элементом, и не принимается во внимание при вычислении размера этого элемента (для 'compact').
Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'block': как элемент, так и его псевдоэлемент :after форматируются как блоки структурного уровня. Элемент не форматируется как строковый блок в своем собственном псевдоэлементе :after.
Элемент, следующий за элементом 'run-in' или 'compact', имеет псевдоэлемент :before типа 'block': решение о том, как следует форматировать элемент 'run-in'/'compact', принимается, исходя из типа структурного блока, порожденного псевдоэлементом :before.
Элемент, следующий за элементом 'run-in' или 'compact', имеет псевдоэлемент :before типа 'inline': решение о том, как следует форматировать элемент 'run-in'/'compact', зависит от значения свойства 'display' элемента, к которому прикреплен псевдоэлемент :before.
Пример(ы):
Ниже приведен пример заголовка 'run-in' с псевдоэлементом :after, после которого следует абзац с псевдоэлементом :before. В этом примере все псевдоэлементы являются строковыми (по умолчанию). Если таблица стиля:
В CSS2 авторы могут определять, каким образом агенты пользователей будут отображать кавычки в зависимости от стиля и контекста. Свойство 'quotes' задает пару кавычек для каждого уровня вложенности цитат. Свойство 'content' предоставляет доступ к этим кавычкам и вставляет их до и после цитаты.
Значения 'open-quote' и 'close-quote' свойства 'content' извлекаются из списка пар (открывающих и закрывающих) кавычек. Первая (крайняя слева) пара представляет самый внешний уровень вложенности, вторая пара - первый уровень вложенности и т.д. Агент пользователя должен применять необходимую пару кавычек в соответствии с уровнем вложенности.
Пример(ы):
Например, применяя следующую таблицу стиля:
/* Определение пар кавычек для двух уровней в двух языках */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: """ """ "<" ">" }
/* Вставка кавычек до и после содержимого элемента Q */
Q:before { content: open-quote }
Q:after { content: close-quote }
позволит агенту пользователя создавать следующее представление:
"Выделить кавычками!"
тогда как в результате этого фрагмента HTML:
<HTML lang="no">
<HEAD>
<TITLE>Кавычки</TITLE>
</HEAD>
<BODY>
<P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
</BODY>
</HTML>
получится:
"Trøndere gråter når <Vinsjan på kaia> blir deklamert."
Примечание. Несмотря на то, что кавычки, определяемые свойством 'quotes' в предыдущем примере, имеются на клавиатурах компьютеров, для высокого качества текста могут потребоваться другие символы кодировки ISO 10646. В следующей таблице представлены некоторые символы кавычек из набора ISO 10646:
Кавычки вставляются в соответствующие места документа с помощью значений 'open-quote' и 'close-quote', принимаемых свойством 'content'. Каждое вхождение 'open-quote' или 'close-quote' в зависимости от глубины вложения заменяется одной из строк, принадлежащей значению свойства 'quotes'.
'Open-quote' указывает на первую из двух кавычек, а 'close-quote' - на вторую. Тип используемых кавычек зависит от уровня их вложенности, определяемого как разность числа вхождений 'open-quote', предшествующих текущему вхождению во всем сгенерированном тексте, и числа вхождений 'close-quote'. Если глубина вложенности равна 0, то используется первая пара кавычек; если глубина вложенности равна 1, то используется вторая пара кавычек и т. д. Если глубина вложенности превышает число пар, то осуществляется повторное использование последней пары.
Обратите внимание, что глубина вложенности цитат не зависит от вложенности исходного документа или структуры форматирования.
Некоторые типографские стили требуют, чтобы открывающие кавычки повторялись перед каждым абзацем цитаты, состоящей из нескольких абзацев, и чтобы только после последнего абзаца ставилась закрывающая кавычка. В CSS это может быть достигнуто путем вставки "фантомных" закрывающих кавычек. Ключевое слово 'no-close-quote' уменьшает уровень вложенности, но не приводит к вставке кавычек.
Пример(ы):
Следующая таблица стилей помещает открывающие кавычки в каждый абзац в BLOCKQUOTE и вставляет в конце одну закрывающую кавычку:
BLOCKQUOTE P:before { content: open-quote }
BLOCKQUOTE P:after { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }
Последнее выполняется в заключительном абзаце, отмеченном классом "last", ввиду отсутствия селекторов, сопоставляемых последнему дочернему элементу.
Для симметрии существует также ключевое слово 'no-open-quote', которое увеличивает глубину вложения на единицу и также не приводит к вставке кавычек.
Примечание. Если язык цитаты отличается от языка окружающего текста, то она обычно обособляется кавычками того языка, который используется в окружающем тексте, а не в ней самой.
Пример(ы):
Например, можно цитировать французский текст внутри английского:
The device of the order of the garter is “Honi soit qui mal y
pense.”
или английский внутри французского:
Il disait: " Il faut mettre l'action en ‹ fast
forward ›."
В приведенной ниже таблице стилей свойство 'quotes' устанавливается так, 'open-quote' и 'close-quote' будут работать корректно во всех элементах. Эти правила предназначены для документов, содержащих текст только на французском, только на английском или на обоих языках одновременно. Для каждого дополнительного языка необходимо доопределить ровно по одному правилу. Обратите внимание, что использование комбинатора дочерних элементов (">") для установки кавычек в элементах зависит от языка окружающего текста:
Практически любой человек может ввести с клавиатуры представленные в этом примере кавычки английского языка. Если Вы можете непосредственно набрать их с клавиатуры, то они будут выглядеть следующим образом:
[LANG|=fr] > * { quotes: """ """ "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }
Управление автоматической нумерацией в CSS2 осуществляется двумя свойствами: 'counter-increment' и 'counter-reset'. Определяемые этими свойствами счетчики используются функциями counter() и counters() свойства 'content'.
Свойство 'counter-increment' допускает использование одного или нескольких имен счетчиков (идентификаторов), после каждого из которых может быть указано целое число. Оно определяет величину, на которую увеличивается содержимое счетчика при каждом новом вхождении элемента. По умолчанию приращение равно 1. Допускается использование отрицательных целых чисел.
Свойство 'counter-reset' также содержит список из одного или нескольких имен счетчиков, после каждого из которых может быть указано целое число. Оно задает значение, которое присваивается счетчику при каждом новом вхождении элемента. По умолчанию оно равно 0.
В этом примере представлен способ нумерации глав и разделов с использованием элементов "Глава 1", "1.1", "1.2", и т.д.
H1:before {
content: "Глава " counter(chapter) ". ";
counter-increment: chapter; /* Добавление 1 к главе */
counter-reset: section; /* Установка значения 0 для раздела */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
Если элемент увеличивает/сбрасывает счетчик, а также использует его (в свойстве 'content' своего псевдоэлемента :before или :after), то этот счетчик используется после увеличения/сброса.
Если элемент и сбрасывает, и увеличивает счетчик, то содержимое счетчика сначала сбрасывается, а затем увеличивается.
Свойство 'counter-reset' поддерживает правила каскада. Таким образом, по правилам каскада в следующей таблице стилей:
Счетчики являются "самовложенными" в том смысле, что при повторном использовании счетчика в дочернем элементе автоматически создается новый образ этого счетчика. Это оказывается важным в ситуациях, аналогичных спискам в языке HTML, где элементы могут быть вложены сами в себя на произвольную глубину. Было бы невозможно определить для каждого уровня счетчик с уникальным именем.
Пример(s):
Таким образом, для нумерации вложенных элементов списка достаточно использовать следующий пример. Результат аналогичен тому, когда 'display:list-item' и 'list-style: inside' задаются в элементе LI:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
Самовложенность основывается на следующем принципе. Каждый элемент, у которого определено свойство 'counter-reset' для счетчика X, создает новый счетчик X, областью действия которого являются этот элемент и предшествующие ему сестринские элементы, а также все их потомки.
В приведенном выше примере элемент OL создает счетчик, на который будут ссылаться все его дочерние элементы.
Если n-ое вхождение счетчика "item" обозначить как item[n], а начало и конец области действия обозначить как "(" и ")", то в следующем фрагменте HTML-документа будут использоваться заданные счетчики. (Предполагается, что при этом используется таблица стилей, заданная в приведенном выше примере).
<OL> <!-- (обнуление item[0] -->
<LI>item <!-- увеличение item[0] (= 1) -->
<LI>item <!-- увеличение item[0] (= 2) -->
<OL> <!-- (обнуление item[1] -->
<LI>item <!-- увеличение item[1] (= 1) -->
<LI>item <!-- увеличение item[1] (= 2) -->
<LI>item <!-- увеличение item[1] (= 3) -->
<OL> <!-- (обнуление item[2] -->
<LI>item <!-- увеличение item[2] (= 1) -->
</OL> <!-- ) -->
<OL> <!-- (обнуление item[3] -->
<LI> <!-- увеличение item[3] (= 1) -->
</OL> <!-- ) -->
<LI>item <!-- увеличение item[1] (= 4) -->
</OL> <!-- ) -->
<LI>item <!-- увеличение item[0] (= 3) -->
<LI>item <!-- увеличение item[0] (= 4) -->
</OL> <!-- ) -->
<OL> <!-- (сброс item[4] в 0 -->
<LI>item <!-- увеличение item[4] (= 1) -->
<LI>item <!-- увеличение item[4] (= 2) -->
</OL> <!-- ) -->
Функция 'counters()' генерирует последовательность разделенных заданной строкой значений всех счетчиков, имена которых совпадают.
Пример(ы):
Следующая таблица стилей нумерует вложенные элементы списка с использованием символов "1", "1.1", "1.1.1", и т. д.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
По умолчанию содержимое счетчиков отображается в десятичном формате, но наряду с ним счетчикам доступны все другие стили отображения, используемые в свойстве 'list-style-type'. Для стиля, используемого по умолчанию, применяется следующая запись:
Неотображаемый элемент (для свойства 'display' которого установлено значение 'none') не может увеличивать или уменьшать значение счетчика.
Пример(ы):
Например, в следующей таблице стиля элементы H2, класс которых равен "secret", не увеличивают значение счетчика 'count2'.
H2.secret {counter-increment: count2; display: none}
С другой стороны, элементы, свойство 'visibility' которых принимает значение 'hidden', увеличивают значения счетчиков.
Большинство элементов уровня блока в CSS генерируют один главный структурный блок. В этом разделе обсуждаются два способа, используемые в CSS для того чтобы позволить элементу генерировать два блока: один главный структурный блок (для содержимого элемента) и один отдельный блок для маркера (используемый для элементов оформления, таких как маркеры позиции, изображения или числа). Блок маркера может находиться внутри или вне главного блока. В отличие от содержимого :before и :after блок маркера не влияет на расположение главного блока, независимо от схемы позиционирования последнего.
Наиболее общим из этих двух способов является нововведение, используемое в CSS2 и названное маркером. Более ограниченный в своих возможностях способ использует свойства списков, заимствованные из CSS1. Эти свойства предоставляют разработчикам возможность получения быстрых результатов для многих распространенных сценариев упорядоченного и неупорядоченного отображения списков. Однако маркеры позволяют разработчикам точно управлять их позицией и содержимым. Маркеры могут использоваться вместе со счетчиками для создания новых стилей списков, для нумерации заметок на полях и множества других вещей.
В следующем примере показано, как могут использоваться маркеры для добавления точек после каждого элемента нумерованного списка. В результате выполнения следующего кода HTML и таблицы стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Создание списка с помощью маркеров</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Это первый элемент.
<LI> Это второй элемент.
<LI> Это третий элемент.
</OL>
</BODY>
</HTML>
получим:
i. Это первый элемент.
ii. Это второй элемент.
iii. Это третий элемент.
Маркеры создаются путем присвоения свойству 'display', фигурирующему в псевдоэлементе :before или :after, значения 'marker'. Если содержимое псевдоэлемента :before или :after, относящееся к типу 'block' или 'inline', является частью главного блока, генерируемого элементом, то содержимое типа 'marker' форматируется в отдельный блок маркера, находящийся вне главного блока. Блоки маркеров форматируются в виде отдельной строки (т.е. в виде одного линейного блока), в силу чего они утрачивают гибкость в сравнении с перемещаемыми объектами. Блок маркера создается только тогда, когда свойство 'content' псевдоэлемента в действительности генерирует некоторое содержимое.
Блоки маркера имеют границы и отступы, но не имеют полей.
В псевдоэлементе :before вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста первой строки содержимого главного блока. Если главный блок не содержит текста, то осуществляется выравнивание верхних сегментов внешних краевых линий блока маркера и главного блока. В псевдоэлементе :after вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста последней строки содержимого главного блока. Если главный блок не содержит текста, то осуществляется выравнивание нижних сегментов внешних краевых линий блока маркера и главного блока.
Высота блока маркера задается свойством 'line-height'. Блок маркера, связанный с псевдоэлементом :before (:after), принимается во внимание при вычислении высоты первого (последнего) линейного блока, содержащегося в главном блоке. Таким образом, маркеры выравниваются по первой или последней строке содержимого элемента, даже если блоки маркеров располагаются в отдельных линейных боках. Если в главном блоке нет ни первого, ни последнего линейного блока, то блок маркера сам создает свой линейный блок.
Вертикальное выравнивание блока маркера внутри его линейного блока определяется свойством 'vertical-align'.
Если для свойства 'width' устанавливается значение 'auto', то ширина содержимого блока маркера равна ширине содержимого. В противном случае она равна значению свойства 'width'. Если значение свойства 'width' не превосходит значения ширины содержимого, то образ действий при переполнении определяется свойством 'overflow'. Блоки маркеров могут располагаться поверх главных блоков. Если значение свойства 'width' превосходит значение ширины содержимого, то горизонтальное выравнивание содержимого блока маркера определяется свойством 'text-align'.
Свойство 'marker-offset' задает величину горизонтального интервала между блоком маркера и связанным с ним главным блоком. Расстояние измеряется между их ближайшими краями границ. Примечание. Если маркер помещается справа от перемещаемого объекта в тексте, который выводится слева направо, то главный блок будет выводиться вдоль правой стороны перемещаемого элемента, в то время как блок маркера будет отображен слева от него. Т.к. край левой границы главного блока находится слева от перемещаемого объекта (см. описание перемещаемых объектов), а блоки маркеров находятся за пределами краевой линии границы главного блока, то этот маркер также будет находиться слева от перемещаемого элемента. То же происходит и когда маркер помещается слева от перемещаемого элемента в тексте, который выводится справа налево.
Если для свойства 'display' содержимого элемента с 'display: list-item' устанавливается значение 'marker', то блок маркера, генерируемый для псевдоэлемента ':before', заменяет обычный маркер элемента списка.
В следующем примере содержимое располагается по центру внутри блока маркера фиксированной ширины. В результате выполнения следующего документа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Выравнивание содержимого в блоке маркера</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Это первый элемент.
<LI> Это второй элемент.
<LI> Это третий элемент.
</OL>
</BODY>
</HTML>
получим:
(1) Это первый
элемент.
(2) Это второй
элемент.
(3) Это третий
элемент.
В следующем примере маркеры создаются перед и после элементов списка.
В результате выполнения следующего документа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Маркеры перед и после элементов списка</TITLE>
<STYLE type="text/css">
@media screen, print {
LI:before {
display: marker;
content: url("smiley.gif");
LI:after {
display: marker;
content: url("sad.gif");
}
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>первый элемент списка располагается первым
<LI>второй элемент списка располагается вторым
</UL>
</BODY>
</HTML>
получим (вместо картинок с изображением смеющихся рожиц здесь используется псевдографика):
:-) первый элемент списка
располагается первым :-(
:-) второй элемент списка
располагается вторым :-(
В следующем примере маркеры используются для нумерации заметок (абзацев).
В результате выполнения следующего документа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Маркеры, использующиеся для создания нумерованных заметок4>/TITLE>
<STYLE type="text/css">
P { margin-left: 12 em; }
@media screen, print {
P.Note:before {
display: marker;
content: url("note.gif")
"Примечание " counter(note-counter) ":";
counter-increment: note-counter;
text-align: left;
width: 10em;
}
}
</STYLE>
</HEAD>
<BODY>
<P>Это первый абзац в данном документе.</P>
<P CLASS="Note">Это очень короткий документ.</P>
<P>Конец.</P>
</BODY>
</HTML>
получим:
Это первый абзац
в данном документе.
Примечание 1: Это очень короткий
документ.
Конец.
Это свойство задает расстояние между ближайшими краями границ блока маркера и связанного с ним главного блока. Это расстояние может либо задаваться пользователем (<длина>), либо назначаться агентом ('auto') пользователя. Значения длины могут быть отрицательными, но это зависит от реализации.
В следующем примере показано, как маркеры могут использоваться для добавления точек после каждого элемента нумерованного списка. В результате выполнения следующего кода HTML и таблицы стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Пример маркера 5</TITLE>
<STYLE type="text/css">
P { margin-left: 8em } /* Создает пространство для счетчиков */
LI:before {
display: marker;
marker-offset: 3em;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</STYLE>
</HEAD>
<BODY>
<P> Это предыдущий абзац ...
<OL>
<LI> Это первый элемент.
<LI> Это второй элемент.
<LI> Это третий элемент.
</OL>
<P> Это следующий абзац ...
</BODY>
</HTML>
получим:
Это предыдущий
абзац ...
i. Это первый элемент.
ii. Это второй элемент.
iii. Это третий элемент.
Это следующий
абзац ...
Свойства списков позволяют осуществлять визуальное форматирование списков. Как и в случае наиболее общих маркеров, элемент со свойством 'display: list-item' порождает главный блок для своего содержимого и необязательный блок для маркера. Использование других свойств списков позволяет разработчикам определять тип (графический объект, глиф или число) и позицию маркера относительно главного блока (за его пределами или внутри него перед содержимым). Их использование уже не позволяет разработчикам осуществлять более тонкую настройку стиля (цвета, шрифтов, выравнивания и т.д.) и местоположения маркера относительно главного блока.
Кроме того, если маркер M (заданный с помощью 'display: marker') используется с элементом списка, созданным с помощью свойств списка, то M заменяет стандартный маркер элемента списка.
Вместе со свойствами списка свойства фона применяются только к главному блоку. 'Внешний' блок маркера является прозрачным. Маркеры предоставляют больше возможностей для управления стилем отображения блоков маркеров.
Это свойство задает вид маркера элемента списка, если для свойства 'list-style-image' устанавливается значение 'none' или изображение, на которое указывает URI, недоступно. Значение 'none' говорит о том, что маркер не используется. В противном случае можно использовать три типа маркеров: глифы, нумерованные и алфавитные. Примечание. Нумерованные списки улучшают доступность документа, упрощая просмотр списков.
Глифы определяются с помощью значений disk, circle и square. Конкретное их представление зависит от агента пользователя.
Агент пользователя, который не смог определить систему нумерации, должен использовать систему 'decimal'.
Примечание. В этом документе не определяются конкретные механизмы каждой системы нумерации (например, вычисление римских цифр).
Возможно, дополинтельная информация будет содержаться в последующей информации от W3C.
В этой спецификации не определено поведение алфавитных систем, когда в процессе нумерации исчерпываются все символы алфавита. Например, после 26 элементов списков представление 'lower-latin' не определено. Поэтому для больших списков рекомендуется использовать числа.
Например, в результате ывполнения следующего кода HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Нумерация с использованием строчных римских цифр</TITLE>
<STYLE type="text/css">
OL { list-style-type: lower-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Это первый элемент.
<LI> Это второй элемент.
<LI> Это третий элемент.
</OL>
</BODY>
</HTML>
получим:
i Это первый элемент.
ii Это второй элемент.
iii Это третий элемент.
Обратите внимание, что выравнивание маркера списка (в этом примере по правому краю) определяется агентом пользователя.
Примечание.
Возможно, что в следующих версиях CSS будут представлены более полные механизмы работы стилей нумерации для разных языков.
Это свойство определяет графический объект, используемый в качестве маркера элемента списка. Если графический объект доступен, то он заменяет маркер, устанавливаемый свойством 'list-style-type'.
Пример(ы):
В следующем примере перед каждым элементом списка в качестве маркера используется графический объект "ellipse.png".
UL { list-style-image: url("http://png.com/ellipse.png") }
Это свойство определяет положение блока маркера в главном структурном блоке. Его значения имеют следующий смысл:
outside
Блок маркера находится за пределами главного структурного блока. Примечание. В CSS1 точное местоположение блока маркера не уточнялось, поэтому из соображений совместимости в CSS2 оно сохранило ту же степень неопределенности. Для более точного управления положением блоков маркеров желательно использовать маркеры.
inside
Блок маркера находится в первом строковом блоке главного структурного блока, следом за которым выводится содержимое элемента.
Например:
<HTML>
<HEAD>
<TITLE>Сравнение внутреннего/внешнего расположения</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>
Приведенный выше пример может быть отформатирован следующим образом:
UL { list-style: upper-roman inside } /* Любой элемент UL */
UL > UL { list-style: circle outside } /* Любой дочерний элемент UL элемента UL */
Хотя разработчики и могут задать информацию 'list-style' о стиле списка непосредственно в элементах списка (например, в элементе LI языка HTML), тем не менее, следует пользоваться таким способом с определенной осторожностью. Следующие два правила выглядят похожими, хотя первое определяет селектор потомков, а второе (более специфичное) - селектор дочерних элементов.
OL.alpha LI { list-style: lower-alpha } /* Любой потомок LI элемента OL */
OL.alpha > LI { list-style: lower-alpha } /* Любой дочерний элемент LI элемента OL */
Разработчики, использующие только селекторы потомков, могут не достичь ожидаемых результатов. Рассмотрим следующие правила:
<HTML>
<HEAD>
<TITLE>ПРЕДУПРЕЖДЕНИЕ: Непредвиденные результаты,
полученные вследствие применения каскада</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' соответственно будет осуществлено надлежащим образом. Однако каскад приведет к тому, что первое правило стиля (включающее специфичную информацию о классе) будет перекрывать второе. Следующие правила позволят решить эту проблему с помощью селектора дочерних элементов:
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. Именно этот способ рекомендуется использовать для определения информации о стиле списка.
Пример(ы):
Значение URI может комбинироваться с любым другим значением, как это сделано в следующем примере:
UL { list-style: url("http://png.com/ellipse.png") disc }
Если не удается получить доступ к графическому объекту, то вместо него здесь будет использоваться маркер типа 'disc'.
