Евгений Резниченко - Спецификация CSS2
может дать на выходе:
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, являются допустимыми.
