Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

@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 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.14.0 и выше
Поддержка:НетДаНетНетДаНетДа