目录
  1. WIKI教程
  2. 学习CSS
  3. CSS - 分页媒体( Paged Media)

CSS - 分页媒体( Paged Media)

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

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

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

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

定义页面:@page规则

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

  • The page area - 页面区域包括在该页面上布置的框。 页面区域的边缘充当在分页符之间发生的布局的初始包含块。

  • The margin area - 它围绕页面区域。

您可以在@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, and margin-right属性来设置页面的边距。

最后，在@page规则中使用marks属性在目标工作表的页面框外创建裁剪和注册标记。 默认情况下，不打印任何标记。 您可以使用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>

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

元素并且当前页面布局是默认的纵向布局，则会启动新页面并在横向页面上打印表格。

Left, Right, and First pages

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

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

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

<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在元素之前或之后立即停止分页。 right关键字强制执行一个或两个分页符，以便在左侧或右侧页面上呈现该元素。

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

<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>

控制Widows 和 Orphans

在排版术语中，孤儿是由于分页而滞留在页面底部的段落的行，而寡妇是在分页后留在页面顶部的那些行。 通常，打印的页面看起来并不吸引人，在顶部或底部搁浅的单行文本。 大多数打印机尝试在每页的顶部或底部留下至少两行或更多行文本。

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

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

以下是在底部创建4行和在每页顶部创建3行的示例 - 

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>
<上一篇.CSS - 媒体类型( Media Types)
CSS - Aural Media( Aural Media).下一篇>
↑回到顶部↑
WIKI教程 @2018