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

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

Например:

Сравнение позиций inside/outside

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

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

'list-style'

Значение: [ || <'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 */

Авторы, использующие только селекторы-потомки, могут не получить тот результат, на который рассчитывали. Рассмотрим следующие правила:

ПРЕДУПРЕЖДЕНИЕ: Непредсказуемый результат из-за каскадирования

Ожидается, что элементы списка уровня 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Страничная модель расширяет модель визуального форматирования, чтобы рассчитывать разрывы страниц.