CSS 分页媒体 @page规则

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

CSS2标准引入了一些基本的分页控制功能，让作者可以帮助浏览器更好地打印他们的文档。

CSS2页面模型指定了如何在一个具有有限宽度和高度的矩形区域-页面框内对文档进行格式化。这些功能分为两组：

• CSS2功能，用于定义特定的页面布局。
• CSS2功能，用于控制文档的分页。

定义页面：@page规则

CSS2定义了一个”页面框”，一个有限尺寸的框，其中呈现内容。页面框是一个包含两个区域的矩形区域：

• 页面区域 - 页面区域包括在该页面上布局的盒子。页面区域的边缘作为页面断裂之间发生的布局的初始包含块。

• 页边距区域 - 它包围页面区域。

您可以在@page规则内指定页面框的尺寸、方向、页边距等。页面框的尺寸由’size’属性设置。页面区域的尺寸是页面框尺寸减去边距区域的尺寸。

例如，以下@page规则将页面框尺寸设置为8.5×11英寸，并在页面框边缘和页面区域之间创建’2cm’的边距。

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

您可以在@page规则中使用margin、margin-top、margin-bottom、margin-left和margin-right属性来设置页面的边距。

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

设置页面大小

size属性指定页面框的大小和方向。这里有四个可用于页面大小的值:

• auto - 页面框将设置为目标工作表的大小和方向。

• landscape - 覆盖目标的方向。页面框的大小与目标相同，较长的一边是水平的。

• portrait - 覆盖目标的方向。页面框的大小与目标相同，较短的一边是水平的。

• length - “size”属性的长度值创建一个绝对页面框。如果只指定一个长度值，则设置页面框的宽度和高度。百分比值不允许用于“size”属性。

在下面的示例中，页面框的外边缘将与目标对齐。在“margin”属性上的百分比值相对于目标尺寸。因此，如果目标工作表的尺寸为21.0cm × 29.7cm（即A4），则边距为2.10cm和2.97cm。

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

下面的示例将页面框的宽度设置为8.5英寸，高度设置为11英寸。这个示例中的页面框需要一个8.5英寸×11英寸或更大的目标纸张尺寸。

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   -->
</style>

一旦您创建了一个命名的页面布局，您可以通过将页面属性添加到样式中，将其用于文档中以后将应用于文档中的元素。例如，这个样式在文档中的所有表格上呈现横向页面-

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

基于上述规则，在打印时，如果浏览器在您的文档中遇到

<

table>元素，并且当前页面布局为默认的纵向布局，则会开始一个新页面，并将表格打印到横向页面上。

左侧，右侧和第一页

在打印双面文档时，左侧和右侧页面的页面框应该不同。可以通过两个CSS伪类来表达如下−

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

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

您可以使用:first伪类指定文档的第一页的样式。

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   -->
</style>

控制分页

除非你另有指定，否则页面断点只在页面格式发生变化或内容溢出当前页面框时才会发生。要强制或取消分页断点，可以使用page-break-before、page-break-after和page-break-inside属性。

page-break-before和page-break-after都接受auto、always、avoid、left和right关键字。

关键字auto是默认的，它会根据需要让浏览器生成分页断点。关键字always会在元素之前或之后强制分页断点，而avoid会抑制元素之前或之后的分页断点。left和right关键字会强制生成一到两个分页断点，以便在左侧或右侧页面上呈现元素。

使用分页属性非常简单。假设你的文档有一级标题，使用二级标题表示章节的开头。你希望每个章节都从一个新的右侧页面开始，但又不希望章节标题从后续内容中断开。可以使用以下规则实现这一点 –

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

仅在 page-break-inside 属性中使用 auto 和 avoid 值。如果您希望尽可能避免表格跨页显示，您可以编写以下规则 –

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

控制孤行和寡头

在印刷行业术语中，孤行指的是由于分页导致段落中的某些行被滞留在页面底部，而寡头则指的是分页后页面顶部剩余的行。通常情况下，单个行文字滞留在页面顶部或底部是不美观的。大多数印刷机都会尽量在每一页的顶部或底部保留至少两行或更多文字。

• orphans属性 指定了段落在页面底部必须保留的最少行数。

• widows属性 指定了段落在页面顶部必须保留的最少行数。

以下是一个示例，每页底部有4行文字，每页顶部有3行文字 –

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>