📜  CSS分页媒体-@page规则

📅  最后修改于: 2020-10-26 04:53:46             🧑  作者: Mango


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

CSS2标准引入了一些基本的分页控制功能,这些功能使作者可以帮助浏览器确定如何最好地打印其文档。

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

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

定义页面:@page规则

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

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

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

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

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


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

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

设定页面大小

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

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

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

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

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

在下面的示例中,页面框的外边缘将与目标对齐。 “页边距”属性上的百分比值是相对于目标尺寸的,因此,如果目标纸张尺寸为21.0cm×29.7cm(即A4),则页边距为2.10cm和2.97cm。


下面的示例将页面框的宽度设置为8.5英寸,高度设置为11英寸。此示例中的页面框要求目标纸张尺寸为8.5“×11”或更大。


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


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

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

左,右和第一页

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


您可以使用:first伪类为文档的首页指定样式-


控制分页

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

page-before-beforepage-break-after都接受auto,always,void,leftright关键字。

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

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


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


控制寡妇和孤儿

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

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

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

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