CSS2标准引入了一些基本的分页控制函数,可以帮助浏览器确定如何最好地打印其文档。
CSS2页面模型指定如何在宽度和高度有限的矩形区域(页面框)内格式化文档,这些函数分为两组-
CSS2定义了一个"page box",即在其中呈现内容的有限尺寸的框。页面框是一个包含两个区域的矩形区域-
页面区域 - 页面区域包括该页面上布置的框。
边缘区域 - 它围绕页面区域。
您可以在@page规则中指定页面框的尺寸(dimensions),方向(orientation),边距(margins)等。页面框的尺寸通过'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 属性来设置页面的页边距。
size 属性指定页面框的大小和方向。有四个值可用于页面大小-
auto - 页面框将设置为目标图纸的大小和方向。
landscape - 水平。
portrait - 垂直。
length - '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>
创建命名页面布局后,可以通过将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>
除非另外指定,否则分页符只会在页面格式更改或内容溢出当前页面框时发生。要以其他方式强制或禁止分页符,请使用 page-break-before,page-break-after,和 page-break-inside 属性。
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-paged-media.html
来源:LearnFk无涯教程网
page-break-before 和 page-break-after 都接受 auto,always,avoid,left和 right 关键字。
关键字 auto 是默认值,它使浏览器可以根据需要生成分页符。 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是在分页符后仍保留在页面顶部的那些行。
orphans - 属性指定必须在页面底部保留的段落的最小行数。
widows - 属性指定必须在页面顶部保留的段落的最小行数。
这是在每个页面的底部创建4行,在顶部创建3行的示例-
<style type="text/css"> <!-- @page{orphans:4; widows:2;} --> </style>
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)