CSS分页媒体 - @page规则

CSS分页媒体@page规则 - 适用于初学者和高级开发人员的CSS教程通过示例简单易行地学习级联样式表。 CSS2和CSS3属性的完整参考手册。

分页媒体与连续媒体的不同之处在于文档的内容被分成一个或多个离散页面.分页媒体包括纸张，透明胶片，计算机屏幕上显示的页面等.

CSS2标准引入了一些基本的分页控制功能，让作者帮助浏览器找出如何最好地打印他们的文档.

CSS2页面模型指定文档在矩形区域(页面框)中的格式，它具有有限的宽度和高度.这些功能分为两组 :

定义页面:@page规则

CSS2定义一个"页面框"，一个有限维度的框，其中呈现内容.页面框是一个矩形区域，包含两个区域 :

您可以在@page中指定页面框的尺寸，方向，边距等.规则.页面框的尺寸使用'size'属性设置.页面区域的尺寸是页面框的尺寸减去边距区域.

例如，以下@page规则将页面框大小设置为8.5× 11英寸并在页面框边缘和页面区域之间的所有边上创建"2cm"边距 :

您可以使用保证金，保证金保证金，保证金保证金，保证金保证金保证金，保证金权利保证金和保证金权利 @page规则来设置页面的边距.

最后，在@page规则中使用标记属性在页面框外创建裁剪和注册标记在目标表上.默认情况下，不打印任何标记.您可以使用裁剪和交叉关键字中的一个或两个分别在目标打印页面上创建裁剪标记和注册标记.

size 属性指定页面框的大小和方向.有四个值可用于页面大小和减号;

在以下示例中，页面框的外边缘将与目标. 'margin'属性上的百分比值是相对于目标大小的，因此如果目标工作表尺寸是21.0cm× 29.7厘米(即A4)，边距为2.10厘米和2.97厘米.

以下示例将页面框的宽度设置为8.5英寸，高度设置为11英寸.此示例中的页面框要求目标工作表大小为8.5"&次; 11"或更大.

创建命名页面布局后，可以通过将页面属性添加到稍后应用于您的元素中的元素的样式中将其用于文档中.文献.例如，此样式会在横向页面上显示文档中的所有表格 :

由于上述规则，在打印时，如果浏览器遇到< table>文档中的元素和当前页面布局是默认的纵向布局，它启动一个新页面并在横向页面上打印表格.

打印双面文档时，左右页面上的页面框应不同.它可以通过两个CSS伪类表示如下:<

 < style type ="text/css"> <！ -   @page:left { margin-left:4cm;  margin-right:3cm; }  @page:右{ margin-left:3cm;  margin-right:4cm; }   - >

您可以使用以下命令指定文档第一页的样式:first pseudo-class :

除非另有说明，否则仅在页面格式更改或内容溢出时才会发生分页符当前页面框.要以其他方式强制或抑制分页符，请使用 page-break-before，page-break-after，和 page-break-inside 属性.

page-break-before 和 page-break-after 都接受 auto，always，avoid，left，和正确关键字.

关键字 auto 是默认设置，它允许浏览器根据需要生成分页符.关键字始终强制在元素之前或之后进行分页，而避免会在元素之前或之后立即禁止分页. 左和右关键字强制执行一个或两个分页符，以便在左侧或右侧页面上呈现该元素.

使用分页属性非常简单.假设您的文档具有level-1标题，则开始使用level-2标题的新章节来表示节.您希望每章都从一个新的右侧页面开始，但您不希望在后续内容的分页符中拆分节标题.您可以使用以下规则和减号实现此目的;

 < style type ="text/css"> <！ -   h1 {page-break-before:right}  h2 {page-break-after:avoid}   - >

在 page-break-inside <中仅使用 auto 和避免值/i>财产.如果你愿意，如果可能的话你的表格不会被打破，你可以写下规则 :

在排版术语中，orphans是一段滞留在底部的段落由于分页而导致的页面，而widows 是分页后页面顶部剩余的那些行.通常，打印页面看起来并不吸引人，其中单行文本在顶部或底部搁浅.大多数打印机尝试在每页的顶部或底部留下至少两行或多行文本.

此处是在底部创建4行和在每页顶部创建3行的示例 :