CSS分页媒体-@page规则

介绍

CSS分页媒体是CSS的一个重要特性之一，通过它我们可以精确地控制打印中的分页表现。其中最常用的就是@page规则，它是用于定义打印文档的页面样式的。@page规则可以控制诸如页面边距、纸张大小、页眉页脚等在打印文档中的表现。具体来说，@page规则在CSS中用于定义页面打印时的样式，如纸张大小，边距等等。

语法

在CSS中，@page规则的语法如下：

@page {
  /* 定义一个或多个页面规则 */
}

其中，花括号中的内容是一组CSS规则，用于定义一组页面规则，如下所示：

@page {
  size: A4 landscape;
  margin: 1cm;
}

以上示例定义了一个横向的A4页面，页面边距为1厘米。

常用属性

在@page规则中，以下是最常用的属性：

• size：用于设置页面大小，可以是长度值或预定义的名称（如A4、Letter等）。默认值是auto，表示可以根据实际打印设备而定。

• margin：用于设置页面边距的大小，可以是一个值或四个值。默认值是0。

• marks：用于控制是否显示打印页眉和页脚的标记。可选值为crop（剪裁标记）、cross（交叉标记）、none（无标记）。

• page-break-before和page-break-after：用于定义在哪里分页。可选的值为auto、always、left、right、avoid（避免分页）。

• bleed：用于设置出血，即打印到纸张边缘之外的区域。

示例

以下示例演示如何使用@page规则在打印文档中显示页眉和页脚：

@page {
  margin: 2cm;
  @top-center {
    content: "My Header";
    font-size: 18pt;
  }
  @bottom-left {
    content: "My Footer";
    font-size: 12pt;
  }
}

以上示例定义了一个页面边距为2厘米的页面样式，并在顶部中央设置了一个字号为18pt的页眉，底部左侧设置了一个字号为12pt的页脚。