[分享]css3打印机page怎么用

CSS3提供了一个新的打印功能 Page Module（页面模块），让我们在打印页面时有更多的控制。下面我们来介绍一下如何使用CSS3的打印机page。首先，我们需要在CSS文件中声明打印机page...

CSS3提供了一个新的打印功能 - Page Module（页面模块），让我们在打印页面时有更多的控制。下面我们来介绍一下如何使用CSS3的打印机page。

首先，我们需要在CSS文件中声明打印机page使用的页面大小和页边距，如下代码：

@page {
  size: A4; /*页面大小*/
  margin: 10mm 20mm 30mm 40mm; /*页边距，上、右、下、左*/
} 

需要注意的是，size属性支持各种页面尺寸，如A4、A5、Letter等，也支持自定义尺寸。而margin属性则和普通CSS样式一样，可以设置多个值，如上右下左。

接下来，我们需要在样式表中插入分页符，以便在多页文档中正确分页。代码如下：

@media print {
  .page-break { /*分页符*/
    page-break-after: always;
  }
} 

然后，在需要分页的地方插入分页符：

<div class="page-break"></div> 

最后，我们可以在@media print媒体查询下编写打印页面的样式，并在需要打印的页面中使用print媒体查询，例如：

@media print {
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  h1, h2, h3 {
    page-break-after: avoid; /*避免标题被分页*/
  }
} 

同时，我们也可以使用CSS3的伪类选择器:before和:after在打印页面中添加额外的信息、边框等元素，为打印页面增添美观和实用性。

综上所述，CSS3的打印机page功能可以为我们在打印文档时提供更多的控制和自定义，让我们可以更加方便地制作有质量的、专业的打印页面。