CSS - 分页媒体

CSS - 分页媒体 首页 / CSS入门教程 / CSS - 分页媒体

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

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

  • 定义特定页面布局的CSS2函数。
  • 用于控制文档分页的CSS2函数。

@page 规则

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 属性来设置页面的页边距。

默认情况下,不打印任何标签。您可以使用 crop 和 cross 关键字中的一个或两个在目标打印页面上分别创建裁切标签和套准标签。

Page Size

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>元素,并且当前页面布局是默认的纵向布局,则会启动新页面并在横向页面上打印表格。

Left,Right和First Page

当打印双面文档时,左右页面上的页面框应该不同。它可以通过两个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>

Pagination

除非另外指定,否则分页符只会在页面格式更改或内容溢出当前页面框时发生。要以其他方式强制或禁止分页符,请使用 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>

Widows 和 Orphans

在印刷术语中,Orphans是由于分页符而在页面底部滞留的段落的那些行,而Widows是在分页符后仍保留在页面顶部的那些行。

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

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

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

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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

朱赟的技术管理课 -〔朱赟〕

玩转Spring全家桶 -〔丁雪丰〕

移动端自动化测试实战 -〔思寒〕

性能测试实战30讲 -〔高楼〕

深入浅出云计算 -〔何恺铎〕

SRE实战手册 -〔赵成〕

软件设计之美 -〔郑晔〕

结构思考力 · 透过结构看表达 -〔李忠秋〕

互联网人的数字化企业生存指南 -〔沈欣〕

好记忆不如烂笔头。留下您的足迹吧 :)