CSS | @page 规则

在CSS中，@page规则用来设置打印文档的样式。在打印文档时，浏览器会将页面渲染到纸张上，而@page规则可以控制页眉、页脚、页边距和页面大小等属性，以便更好地适应打印需求。

语法

@page规则的语法如下：

@page :pseudo-class {
   margin:4cm;
   size:8.5in 11in;
}

其中，:pseudo-class表示可选的伪类选择器。目前，CSS规范中定义了以下几个伪类选择器：

• :first：设置第一页的样式。
• :left：设置左侧每一页的样式。
• :right：设置右侧每一页的样式。
• :blank：设置空白页面的样式。

这些伪类选择器可以用来控制部分或全部页面的样式。比如，下面的代码设置第一页和空白页面的页边距：

@page :first,
@page :blank {
   margin:2cm;
}

属性

@page规则支持以下几个属性：

• size：设置页面大小。
• margin：设置页面边距。
• marks：设置页面标记的样式。
• page-break-before：在当前页面前插入分页符。
• page-break-after：在当前页面后插入分页符。

其中，size和margin应该是最常用的两个属性。size可以设置页面的尺寸，如A4、Letter等，也可以设置页面的宽度和高度，如8.5in 11in。而margin用来设置页面的边距，可以是一个值，如4cm，也可以是四个值，如2cm 1cm 3cm 1cm，表示上、右、下、左四个方向的边距。

示例

@page {
   size: A4;
   margin: 2cm;
}

@media print {
   /* 只适用于打印时 */
   body {
      margin: 0;
      padding: 0;
   }
   header, footer {
      position: fixed;
      left: 0;
      right: 0;
      color: #777;
      font-size: 10pt;
   }
   header {
      top: 0;
      border-bottom: 0.1pt solid #aaa;
   }
   footer {
      bottom: 0;
      border-top: 0.1pt solid #aaa;
   }
}

上面的代码设置了A4大小的纸张和2cm的页边距，同时使用@media print来设置打印时的样式。header和footer使用position:fixed来固定在页面上，同时设置了颜色和字号，header还画了一条底部边框，footer画了一条顶部边框。

总结

@page规则是CSS中一个很有用的特性，可以让开发者更好地控制打印时的样式，从而得到更好的打印效果。掌握@page规则的使用，可以加强我们的网页设计能力，提高我们的工作效率。