Наследуется: да
Процентное: 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>
Этот пример отображается так:
В тексте справа-налево маркёры должны выводиться с правой стороны бокса.
'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. Страничные носители
Страничный носитель (например, бумага, плёнка, страницы , выводимые на экране компьютера и т.п.) отличается от непрерывного носителя тем, что содержимое документа разделяется на одну или более абстрактных страниц. Чтобы обрабатывать разрывы страниц, 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", селектора станицы (и, без пробелов, возможного псевдокласса страницы) и блока объявлений (находящихся в т.н. контексте страницы).