blob: 3defa1a6007aca1ef497749998a0e0927a0f0a2b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
title: '@page'
slug: Web/CSS/@page
tags:
- '@page'
- CSS
- Web
- 参考
- 布局
- 打印
translation_of: Web/CSS/@page
---
<div>{{CSSRef}}</div>
<p>@page 规则用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。</p>
<pre class="brush: css no-line-numbers">@page {
margin: 1cm;
}
@page :first {
margin: 2cm;
}</pre>
<p><code>@page</code> 规则可以通过 CSS 对象模型接口的 {{domxref("CSSPageRule")}} 访问。</p>
<div class="note"><strong>注意：</strong>W3C 正在讨论如何处理和视图窗口有关的 {{cssxref("<length>")}} 的单位：<code>vh</code>、<code>vm</code>、<code>vmin</code> 和 <code>vmax</code>。目前，请不要在 <code>@page</code> 规则中使用他们。</div>
<h2 id="语法">语法</h2>
<h3 id="描述符">描述符</h3>
<dl>
<dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt>
<dd>指定页面盒模型所在的容器的大小和方向。一般情况下，因为一个页面盒模型被渲染到一面纸张上，所以这个属性也指示了目标纸张的大小。</dd>
</dl>
<dl>
<dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
<dd>向文档添加剪切标记和/或注册标记。</dd>
</dl>
<dl>
<dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
<dd>为页面框盒指定一个限制区域，超过这个区域的页面内容将被裁剪。</dd>
</dl>
<h3 id="形式化语法">形式化语法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="示例">示例</h2>
<p>请参考 <code>@page</code> 的各种<a href="/zh-CN/docs/CSS/Pseudo-classes">伪类</a>的例子。</p>
<ul>
<li>{{Cssxref(":blank")}}</li>
<li>{{Cssxref(":first")}}</li>
<li>{{Cssxref(":left")}}</li>
<li>{{Cssxref(":right")}}</li>
<li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
<li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
</ul>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
<td>{{Spec2('CSS Logical Properties')}}</td>
<td>Adds the <code>:recto</code> and <code>:verso</code> page selectors</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
<td>{{Spec2('CSS3 Paged Media')}}</td>
<td>No change from {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a <code>@page</code>.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.at-rules.page")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>See the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)</li>
</ul>
|
