CSS ::分页媒体@page规则

  • Z时代
  • 2024-01-10
  • 分类：综合

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

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，top-top，margin-bottom，margin-left和margin-right属性来设置页面的页边距。

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

设定页面大小

在 大小 属性指定页面框的大小和方向。有四个值可用于页面大小-

  • 自动 -页面框将设置为目标图纸的尺寸和方向。

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

  • 纵向 -覆盖目标的方向。页面框与目标的尺寸相同，较短的边是水平的。

  • length  -'size'属性的长度值将创建一个绝对页面框。如果仅指定一个长度值，则它会设置页面框的宽度和高度。'size'属性不允许使用百分比值。

在下面的示例中，页面框的外边缘将与目标对齐。“页边距”属性上的百分比值是相对于目标尺寸的，因此，如果目标纸张尺寸为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>

创建命名页面布局后，可以通过将page属性添加到稍后应用于文档元素的样式中，来在文档中使用它。例如，此样式在横向页面上呈现文档中的所有表-

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

控制分页

除非另外指定，否则分页符仅在页面格式更改或内容溢出当前页面框时发生。若要以其他方式强制或禁止分页符，请使用“ 分页前-前”，“分页后-后” 和“ 分页中-内” 属性。

无论是 分页-之前 和 分页，之后 接受了 汽车，总是避免，左 和 右 的关键字。

关键字 auto 是默认值，它使浏览器可以根据需要生成分页符。关键字 始终 在元素之前或之后强制分页符，而避免在元素之前或之后  禁止分页符。在 左 和 右 的关键字强迫一个或两个分页符，使单元在左手或右手页面呈现。

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

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

 在page-break-inside 属性中仅使用 auto 并 避免使用值 。如果您希望表尽可能不跨页中断，则可以编写规则-

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

控制寡妇和孤儿

在印刷术语中，孤儿是由于分页符而在页面底部滞留的段落的那些行，而寡妇是在分页符后仍保留在页面顶部的那些行。通常，打印的页面看起来似乎没有吸引力，因为单行文本停留在顶部或底部。大多数打印机尝试在每页的顶部或底部至少保留两行或更多行文本。

  • 该 孤儿 属性指定段落的行必须在页面底部留下的最少数量。

  • 该 寡妇 属性指定段落的行必须在页面的顶部留下的最少数量。

这是在每个页面的底部创建4行，在顶部创建3行的示例-

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

以上是 CSS ::分页媒体@page规则 的全部内容， 来源链接： utcz.com/z/341469.html

回到顶部