@page
Правило CSS @page используется для форматирования содержимого страницы при выводе ее на печать (для стилей с типом устройства print).
Тип правила
Назначение: at-правила.
Применяется: во внутренних или внешних (но не во встроенных) таблицах стилей в любом количестве.
Значения
Значением @page является указание заключенного в фигурные скобки { } свойства CSS margin или его подсвойств margin-top, margin-right, margin-bottom и margin-left, которые применяются для установки полей между краем страниц и их содержимым.
Кроме этого, можно установить отдельный стиль для первой страницы, указав перед скобками псевдокласс :first. А для установки разных стилей страниц при двухсторонней печати перед скобками ставится псевдокласс :left (для левых страниц) или :right (для правых).
Синтаксис
@page {
поля страниц
}
@page:first {
поля первой страницы
}
@page:left {
поля левых страниц
}
@page:right {
поля правых страниц
}Пример CSS: использование @page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS правило @page</title>
<style type="text/css">
@media print { /* для принтеров */
p {
color: black; /* цвет текста */
font-weight: bold; /* цвет фона */
}
}
@page:left {
margin: 2cm 3cm 1.5cm 1cm; /* поля для левых страниц */
}
@page:right {
margin: 2cm 1cm 1.5cm 3cm; /* поля для правых страниц */
}
</style>
</head>
<body>
<p>Вообще, при создании таблицы стилей, лучше себя приучивать
использовать именно универсальные свойства вместо их подсвойств,
например, margin вместо margin-top, margin-right и т.п. А подсвойства
применять тогда, когда внутри селектора изменяется только один параметр
свойства, например, только левое поле блочного элемента.</p>
</body>
</html>Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | ||
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 | 4.0 и выше |
| Поддержка: | Нет | Да | Нет | Нет | Да | Нет | Да |