Читать онлайн «Спецификация CSS2». Страница 34

Автор Евгений Резниченко

может дать на выходе:

i Это первый элемент списка. ii Это второй элемент списка. iii Это третий элемент списка.

Обратите внимание, что выравнивание маркёров списка (здесь - по правому краю) зависит от ПА.

Примечание. Следующие версии CSS могут предоставить более совершенные механизмы международных стилей нумерации.

'list-style-image'

Значение: <uri> | none | inherit

Начальное: none

Применяется: к элементам с 'display: list-item'

Наследуется: да

Процентное: N/A

Носитель: визуальный

Это свойство определяет изображение, которое будет использоваться как маркёр элемента списка. Если изображение доступно, оно замещает маркёр, установленный 'list-style-type'.

В следующем примере устанавливается маркёр - изображение "ellipse.png" - в начале каждого элемента списка .

UL { list-style-image: url("http://png.com/ellipse.png") }

'list-style-position'

Значение: inside | outside | inherit

Начальное: outside

Применяется: к элементам с 'display: list-item'

Наследуется: да

Процентное: N/A

Носитель: визуальный

Это свойство специфицирует позицию бокса маркёра в основном боксе блока. Значения имеют следующий смысл:

outside

Бокс маркёра находится вне основного бокса блока

Примечание. CSS1 не специфицировал точное размещение бокса маркёра из соображений совместимости, и в CSS2 осталась такая же двусмысленность. Для более точного управления боксами маркёров используйте маркёры.

inside

Бокс маркёра это первый инлайн-бокс в боксе основного блока, после которого всплывает содержимое элемента.

Например:

<HTML> <HEAD> <TITLE>Сравнение позиций inside/outside</TITLE> <STYLE type="text/css"> UL { list-style: outside } UL.compact { list-style: inside } </STYLE> </HEAD> <BODY> <UL> <LI>first list item comes first <LI>second list item comes second </UL> <UL class="compact"> <LI>first list item comes first <LI>second list item comes second </UL> </BODY> </HTML>

Этот пример отображается так:

[D]

В тексте справа-налево маркёры должны выводиться с правой стороны бокса.

'list-style'

Значение: [ <list-style-type> || <'list-style-position'> || <'list-style-image'> ] | inherit

Начальное: не определено для сокращённых свойств

Применяется: к элементам с 'display: list-item'

Наследуется: да

Процентное: N/A

Носитель: визуальный

Свойство 'list-style' - это сокращённое обозначение для установки трёх свойств: 'list-style-type', 'list-style-image' и 'list-style-position' в одном месте в таблице стилей.

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>level 1 <UL> <LI>level 2 </UL> </OL> </BODY> </HTML>

Ожидается, что элементы списка уровня 1 будут маркированы лэйблами 'lower-alpha', а элементы уровня 2 - лэйблами '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' будет использоваться, если изображение недоступно. Значение 'none' свойства 'list-style' устанавливает 'list-style-type' и 'list-style-image' в 'none':

UL { list-style: none }

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

Лекция 13. Страничные носители

Описываются механизмы форматирования страничной модели CSS.

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

1Страничный бокс расширяет модель бокса, что позволяет авторам специфицировать размеры страницы, её полей и т.д.

2Страничная модель расширяет модель визуального форматирования, чтобы рассчитывать разрывы страниц.

Страничная модель CSS 2 специфицирует, как форматируется документ в пределах прямоугольной области - страничного бокса - который имеет конечные ширину и высоту. Страничный бокс не обязательно соответствует реальному листу\странице, на котором документ в конце концов будет выведен (бумага, плёнка, экран и т.п.). Страничная модель CSS специфицирует форматирование в страничном боксе, но за перенос страничного бокса на лист отвечает пользовательский агент (ПА).

Некоторые возможности переноса:

[x]. Перенос одного страничного бокса на один лист (например, односторонняя печать).

[x]. Перенос двух страничных боксов на две стороны одного листа (например, двухсторонняя печать).

[x]. Перенос N (маленького) страничного бокса на один лист (называется "n-up").

[x]. Перенос одного (большого) страничного бокса на N x M листов (называется "tiling").

[x]. Создание подписей. Подпись, это группа страниц, напечатанных на листе, которые после брошюрования и обрезки выглядят, как книга, и расположены в соответствующем порядке.

[x]. Печать одного документа в несколько потоков печати.

[x]. Вывод в файл.

Хотя CSS2 не специфицирует то, как ПА переносят страничные боксы на листы, не даётся также и определённого механизма для того, чтобы сообщить ПА о размерах и ориентации целевого листа.

Страничный бокс это прямоугольный регион, содержащий две области:

[x]. Область страницы. Включает боксы, расположенные на этой странице. Края области страницы работают как начальный содержащий блок планировки и расположены между разрывами страниц.

[x]. Область полей, окружающих область страницы.

Примечание. В CSS2 свойства рамки и заполнения не применяются к страницам; это возможно в будущем.

Авторы специфицируют размеры, ориентацию, поля и т.п. страничного бокса в правиле @page. Правило @page состоит из ключевого слова "@page", селектора станицы (и, без пробелов, возможного псевдокласса страницы) и блока объявлений (находящихся в т.н. контексте страницы).

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

Размеры страничного бокса устанавливаются свойством 'size'. Размеры области страницы - это размеры страничного бокса минус область полей.

Следующее правило @page устанавливает размер страничного бокса в 8.5 x 11 дюймов и создаёт поле '2см' со всех сторон между краем страничного бокса и областью листа:

@page { size 8.5in 11in; margin: 2cm }

Свойство 'marks' в правиле @page специфицирует знаки обрезки и крестика для страничного бокса.

Свойства полей ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin') применяются внутри контекста страницы. На следующей диаграмме показаны соотношения между листом, страничным боксом и полями страницы:

[D]

Вычисленное значение полей бокса вверху или внизу области страницы - '0'.

Контекст страницы не имеет никаких указаний о шрифте, так что единицы измерения 'em' и 'ex' не допускаются. Процентные значения свойств полей относительны к размерам страничного бокса; для левого и правого полей - они соотносятся с шириной страничного бокса, а для верхнего и нижнего полей - к высоте страничного бокса. Все другие единицы измерения, ассоциированные с соответствующими свойствами CSS2, являются допустимыми.