Каскадные таблицы стилей: язык CSS 

Общее описание Страничные устройства вывода (например, бумага в принтере или страницы, выводимые на экран дисплея) отличаются от непрерывных устройств тем, что документ разбивается на отдельные страницы. Для работы с такими устройствами в CSS введена модель страницы, которая позволяет авторам задавать размеры страницы и ее границ, а также управлять переходом на новую страницу. Модель страницы позволяет указать, как элементы документа должны располагаться в прямоугольнике страницы, имеющем фиксированные размеры. При этом размеры прямоугольника не обязательно совпадают с размерами реальной страницы, на которую будет произведено окончательное отображение документа. CSS не определяет, как именно обозреватель будет преобразовывать прямоугольник страницы в реальные страницы, но позволяет задать их размер и ориентацию. Директива @page Директива @page предназначена для задания свойств страниц. Она имеет следующий вид: @page [селектор-страницы] { правило; ... правило; } Селектор-страницы — это либо имя страницы, либо один из следующих псевдоклассов: :first Первая страница документа :left Левая страница (для двусторонней печати) :right Правая страница (для двусторонней печати) Правила, указанные в директивы @page с селектором :left или :right, перекрывают правила директивы @page без селекторов. Правила, указанные в директивы @page с селектором :first, перекрывают правила директивы @page с селектором :left или :right (это зависит от направления вывода текста). Наконец, правила, указанные в директивы @page с именем страницы, перекрывают правила остальных директив @page. Поддержка: Синтаксически соответствует стандарту, но поддерживается только шаблонами печати MSHTML (5.5+) Не поддерживается Задание границ страницы Для задания границ прямоугольника страницы используются свойства margin-left, margin-right, margin-top, margin-bottom и margin. Пример: @page { margin: 2cm } /* Все границы равны 2 см */ Размер страницы: свойство size Синтаксис: size: <размер>{1,2} | auto | portait | landscape | inherit Начально: auto Применимо: к страницам Наследуемо: не определено Проценты: не используются Устройства: визуальные страничные Поддержка: Не поддерживается Не поддерживается Свойство size задает размер и ориентацию прямоугольника страницы. Размеры страницы могут быть либо абсолютными, либо относительными. Абсолютные размеры задаются одним или двумя значениями типа <размер>. Если задано одно значение, то оно определяет размер страницы и по вертикали, и по горизонтали. Если заданы два значения, то первое определяет ширину страницы, а второе — ее высоту. Относительные размеры задаются одним из следующих ключевых слов: auto Прямоугольник страницы совпадает с реальным листом по размеру и ориентации. portrait Прямоугольник страницы совпадает с реальным листом по размеру; ориентация книжная. landscape Прямоугольник страницы совпадает с реальным листом по размеру; ориентация альбомная. Примеры: @page { size: 8.5in 11in } @page { size: portrait; margin: 10% } Пометки: свойство marks Синтаксис: marks: [crop || cross] | none | inherit Начально: none Применимо: к страницам Наследуемо: не определено Проценты: не используются Устройства: визуальные страничные Поддержка: Не поддерживается Не поддерживается В высокой печати часто используются специальные пометки на полях страницы. Свойство marks позволяет задать тип пометок на странице. Оно может принимать следующие значения: none Не печатать пометки. crop Пометки, указывающие место обреза страницы. cross Пометки, используемые для выравнивания страниц. Пример: @page { marks: crop cross } /* Печатать оба типа пометок */ Имена страниц: свойство page Синтаксис: page: <идентификатор> | auto Начально: auto Применимо: к блочным элементам Наследуемо: да Проценты: не используются Устройства: визуальные страничные Поддержка: Не поддерживается Не поддерживается Свойство page позволяет присвоить элементу имя страницы с тем, чтобы использовать свойства директивы @page, селектором которой является данное имя. Например, следующие правила указывают, что все таблицы документа необходимо печатать в альбомной ориентации: @page rotated { size: landscape } TABLE { page: rotated; ... } По умолчанию это свойство имеет значение auto, поэтому к элементам, не имеющих имен страниц, применяются правила директивы @page без именного селектора. Управление разрывами страниц Разрыв страницы перед элементом: свойство page-break-before Синтаксис: page-break-before: auto | always | avoid | left | right | inherit Начально: auto Применимо: к блочным элементам Наследуемо: нет Проценты: не используются Устройства: визуальные страничные Поддержка: Поддерживаются auto, always и "" вместо avoid (4.0+) Не поддерживается Свойство page-break-before управляет разрывом страницы перед печатью данного элемента. Оно может принимать следующие значения: auto Разрыв страницы производится обычным образом, после заполнения страницы. always Всегда начинать печать данного элемента с новой страницы. avoid Никогда не делать разрыва страницы перед данным элементом. left Один или два разрыва страницы, чтобы данный элемент всегда печатался на левой странице. right Один или два разрыва страницы, чтобы данный элемент всегда печатался на правой странице. Пример: H1 { page-break-before: always } Разрыв страницы после элемента: свойство page-break-after Синтаксис: page-break-after: auto | always | avoid | left | right | inherit Начально: auto Применимо: к блочным элементам Наследуемо: нет Проценты: не используются Устройства: визуальные страничные Поддержка: Поддерживаются auto, always и "" вместо avoid (4.0+) Не поддерживается Свойство page-break-after управляет разрывом страницы после печати данного элемента. Оно может принимать следующие значения: auto Разрыв страницы производится обычным образом, после заполнения страницы. always Всегда начинать печать следующего элемента с новой страницы. avoid Никогда не делать разрыва страницы после данного элемента. left Один или два разрыва страницы, чтобы следующий элемент всегда печатался на левой странице. right Один или два разрыва страницы, чтобы следующий элемент всегда печатался на правой странице. Пример: H1 { page-break-after: avoid } Разрыв страницы внутри элемента: свойство page-break-inside Синтаксис: page-break-inside: auto | avoid | inherit Начально: auto Применимо: к блочным элементам Наследуемо: да Проценты: не используются Устройства: визуальные страничные Поддержка: Не поддерживается Не поддерживается Свойство page-break-inside управляет разрывами страницы при печати данного элемента. Оно может принимать следующие значения: auto Разрыв страницы производится обычным образом, после заполнения страницы. avoid Никогда не делать разрыва страницы внутри данного элемента. Пример: H1 { page-break-after: avoid } Количество строк в конце страницы: свойство orphans Синтаксис: orphans: <целое> | inherit Начально: 2 Применимо: к блочным элементам Наследуемо: да Проценты: не используются Устройства: визуальные страничные Поддержка: Не поддерживается Не поддерживается Свойство orphans задает минимальное количество строк абзаца, которое должно остаться в конце страницы при печати данного элемента. Пример: P { orphans: 3 } Количество строк в начале страницы: свойство widows Синтаксис: widows: <целое> | inherit Начально: 2 Применимо: к блочным элементам Наследуемо: да Проценты: не используются Устройства: визуальные страничные Поддержка: Не поддерживается Не поддерживается Свойство widows задает минимальное количество строк абзаца, которое должно остаться в начале страницы при печати данного элемента. Пример: P { widows: 3 }