@page
**@page** 规则是 CSS 中用于修改打印页面不同方面的规则。它针对并修改页面的尺寸、方向和页边距。@page 规则可以用来针对打印输出中的所有页面,或者使用它的各种伪类来针对其中一部分页面。
语法
/* 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-top
、margin-right
、margin-bottom
和margin-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>
单位,包括 vh
、vw
、vmin
和 vmax
。在此期间,请不要在 @page
at-rule 中使用它们。
相关属性
@page
at-rule 允许用户为规则分配一个名称,然后在声明中使用 page
属性调用该名称。
page
-
允许选择器使用用户定义的命名页面
正式语法
页边距 at 规则
警告: 边距 at-rule 尚未由任何用户代理实现(更新时间:2023 年 8 月)。
边距 at-rule 用于 @page
at-rule 内部。它们各自针对打印页面中的不同部分,根据样式块中设置的属性值来设置打印页面区域的样式。
@page {
@top-left {
/* page-margin-properties */
}
}
@top-left
针对文档的左上角,并根据设置的页面边距属性应用更改。
其他边距 at-rule 包括
@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 索引 |
命名页面
示例
使用 size 属性更改页面方向
此示例演示了如何将 <section>
分割成 landscape
格式的独立页面,每个页面在打印时具有 20% 的边距。
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
@page {
size: landscape;
margin: 20%;
}
section {
page-break-after: always;
break-after: page;
}
@media print {
button {
display: none;
}
}
JavaScript
const button = document.querySelector("button");
button.addEventListener("click", () => {
window.print();
});
结果
单击打印按钮将启动打印对话框,其中 html 部分将被分割成独立的页面。
@page 伪类示例
规范
规范 |
---|
CSS 分页媒体模块 Level 3 # at-page-rule |
CSS 逻辑属性和值 Level 1 # page |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
@page
size
描述符page
属性- 查看 Bugzilla 中的 [META] CSS 分页媒体模块 Level 3 票证,以跟踪有关该主题的进展(基于页面的计数器等)。
CSS 分页媒体
模块- Paged.js:W3C 分页媒体填充程序