@page

**@page** 规则是 CSS 中用于修改打印页面不同方面的规则。它针对并修改页面的尺寸、方向和页边距。@page 规则可以用来针对打印输出中的所有页面,或者使用它的各种伪类来针对其中一部分页面。

语法

css
/* Targets all the pages */
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/* Targets all even-numbered pages */
@page :left {
  margin-top: 4in;
}

/* Targets all odd-numbered pages */
@page :right {
  size: 11in;
  margin-top: 4in;
}

/* Targets all selectors with `page: wide;` set */
@page wide {
  size: a4 landscape;
}

@page {
  /* margin box at top right showing page number */
  @top-right {
    content: "Page " counter(pageNumber);
  }
}

页面属性

@page 规则只能包含页面描述符和页边距规则。以下描述符至少已由一个浏览器实现。

margin

指定页边距。单个页边距属性 margin-topmargin-rightmargin-bottommargin-left 也可以使用。

page-orientation

指定页面的方向。这不会影响页面的布局;旋转是在输出介质中布局后应用的。

size

指定页面框包含块的目标尺寸和方向。在一般情况下,当一个页面框渲染到一个页面纸张上时,它也指示目标页面纸张的大小。

规范中提到以下 CSS 属性适用于通过 @page 规则应用于页面框。但是,这些属性尚未得到任何用户代理的支持。

剩余的页面属性
特性 CSS 属性
bidi 属性 direction
背景属性 background-color
background-image
background-repeat
background-attachment
background-position
background
边框属性 border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-short-style
border-top
border-right
border-bottom
border-left
border
计数器属性 counter-reset
counter-increment
color color
字体属性 font-family
font-size
font-style
font-variant
font-weight
font
高度属性 height
min-height
max-height
行高 line-height
页边距属性 margin-top
margin-right
margin-bottom
margin-left
margin
轮廓属性 outline-width
outline-style
outline-color
outline
填充属性 padding-top
padding-right
padding-bottom
padding-left
padding
quotes quotes
文本属性 letter-spacing
text-align
text-decoration
text-indent
文本转换
空白符
字间距
可见性 可见性
宽度属性 宽度
min-width
max-width

描述

@page 规则定义了页面框的属性。@page 规则可以通过 CSS 对象模型接口 CSSPageRule 访问。

注意: W3C 正在讨论如何处理与视窗相关的 <length> 单位,包括 vhvwvminvmax。在此期间,请不要在 @page at-rule 中使用它们。

@page at-rule 允许用户为规则分配一个名称,然后在声明中使用 page 属性调用该名称。

page

允许选择器使用用户定义的命名页面

正式语法

@page = 
@page <page-selector-list>? { <declaration-rule-list> }

<page-selector-list> =
<page-selector>#

<page-selector> =
[ <ident-token>? <pseudo-page>* ]!

<pseudo-page> =
':' [ left | right | first | blank ]

其中 <page-body> 包含

  • 页面属性
  • 页面边距属性

以及 <pseudo-page> 代表以下伪类

页边距 at 规则

警告: 边距 at-rule 尚未由任何用户代理实现(更新时间:2023 年 8 月)。

边距 at-rule 用于 @page at-rule 内部。它们各自针对打印页面中的不同部分,根据样式块中设置的属性值来设置打印页面区域的样式。

css
@page {
  @top-left {
    /* page-margin-properties */
  }
}

@top-left 针对文档的左上角,并根据设置的页面边距属性应用更改。

其他边距 at-rule 包括

css
@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

页面边距属性

页面边距属性是一组 CSS 属性,可以设置在任何单独的边距 at-rule 中。它们包括

页面边距属性
特性 CSS 属性
bidi 属性 direction
背景属性 background-color
background-image
background-repeat
background-attachment
background-position
background
边框属性 border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-short-style
border-top
border-right
border-bottom
border-left
border
计数器属性 counter-reset
counter-increment
content content
color color
字体属性 font-family
font-size
font-style
font-variant
font-weight
font
高度属性 height
min-height
max-height
行高 line-height
页边距属性 margin-top
margin-right
margin-bottom
margin-left
margin
轮廓属性 outline-width
outline-style
outline-color
outline
填充属性 padding-top
padding-right
padding-bottom
padding-left
padding
quotes quotes
文本属性 letter-spacing
text-align
text-decoration
text-indent
文本转换
空白符
字间距
垂直对齐 垂直对齐
可见性 可见性
宽度属性 宽度
min-width
max-width
z 索引 z 索引

命名页面

命名页面允许在打印时以声明方式执行每页布局并添加 分页符

命名页面可以使用 page 属性应用。这允许用户创建不同的页面配置,用于打印布局。

可以在 page 示例中找到一个示例。

示例

使用 size 属性更改页面方向

此示例演示了如何将 <section> 分割成 landscape 格式的独立页面,每个页面在打印时具有 20% 的边距。

HTML

html
<button>Print Webpage</button>
<article>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
</article>

CSS

css
@page {
  size: landscape;
  margin: 20%;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}

JavaScript

js
const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});

结果

单击打印按钮将启动打印对话框,其中 html 部分将被分割成独立的页面。

@page 伪类示例

请参考 @page 的各种 伪类 获取示例。

规范

规范
CSS 分页媒体模块 Level 3
# at-page-rule
CSS 逻辑属性和值 Level 1
# page

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅