CSS @page规则

CSS @page规则详解

一、什么是CSS @page规则

CSS @page规则指的是用于控制打印文档的CSS样式规则，可以为打印文档设置不同的页眉、页脚、页面大小、打印方向、页面边距等样式。

1.1 语法

CSS @page规则的语法如下：

@page :pseudo-class {

  /* 声明 */
}

其中，:pseudo-class 是伪类选择器，可以用来控制不同的打印状态，如 :first 用来控制打印第一页的样式，:left 和 :right 用来控制打印偶数页和奇数页的样式。

1.2 @page嵌套规则

CSS @page规则可以包含一组子规则，用于设置特定区域的样式。

@page :first {

  margin: 2cm;
  @top-center {
    content: "Page Header";
  }
  @bottom-left {
    content: "Page " counter(page);
  }
}

上面的代码中，@top-center 和 @bottom-left 就是子规则，用于分别设置打印文档的页眉和页脚。

二、常用CSS @page属性详解

2.1 size属性

size属性用于设置打印文档的页面大小，可以取值为 auto（默认）、A3、A4、A5、B4、B5、letter、legal等。也可以使用自定义大小，如：

@page {

  size: 21cm 29.7cm; /* 定义文档的大小为A4 */
}

2.2 margin属性

margin属性用于设置打印文档的边距，可以取值为 auto（默认）、inherit、设置具体数值等。可以使用 margin-top、margin-bottom、margin-right、margin-left 属性分别设置上下左右的边距。

@page {

  margin-top: 2cm;
  margin-left: 3cm;
}

2.3 @top-left、@top-right、@top-center、@bottom-left、@bottom-right、@bottom-center属性

这些属性用于设置打印文档的页眉和页脚样式。可以使用 content 属性为页眉和页脚添加文本内容，还可以使用 counter(page) 属性添加自动生成的页码。

@page {

  @top-left {
    content: "My website";
  }
  @bottom-center {
    content: "Page " counter(page);
  }
}

2.4 page-break-before、page-break-after属性

这两个属性用于控制分页，即在哪些元素之前或之后插入分页符。可以取值为 auto（默认）、always、avoid、left、right等。

h1 {

  page-break-before: always;
}

上面的代码表示在每个h1元素之前都插入分页符。

2.5 page-break-inside属性

这个属性用于控制打印文档分页时元素的处理方式，可以取值为 auto（默认）、avoid等。

p {

  page-break-inside: avoid;
}

上面的代码表示p元素不被允许出现在分页前或分页后。

三、浏览器兼容性

CSS @page规则在不同浏览器中的兼容性有所差别，比较成熟的浏览器如Chrome、Firefox等都支持CSS @page规则。但是由于IE浏览器的打印机设置比较古老，因此部分CSS @page规则属性可能不被支持，需要开发者手动调整。

四、总结

CSS @page规则可以为打印文档设置丰富的样式，包括页面大小、边距、页眉、页脚、分页符等样式，开发者可以根据实际需求灵活运用。需要注意的是，在不同浏览器中可能存在浏览器兼容性问题，需要开发者进行兼容性测试和调整。