打印样式

基本用法

@media print命令可以设置打印样式，即用户选择打印当前网页时，生效的 CSS 规则。

1
2
3

@media print {
  h1 { font-size: 16pt; }
}

上面代码设置的h1样式，对屏幕浏览不产生效果，只有用户打印网页时才会生效。

@media print命令可以与正常样式规则混合使用。

p { margin: 1em 0; }

@media print {
  .related-articles { display: none; }
}

上面代码中，p元素的样式对屏幕浏览和打印都有效，.related-articles的样式只对打印有效。

如果要设置某些规则只对屏幕浏览有效，可以像下面这样写。

@media screen {
  /* 只对屏幕浏览有效 */
}

@media print {
  /* 只对打印有效 */
}

分页符

分页符属性用来设置页面的分页（即另起一页），共有三个相关属性。

page-break-before：元素之前分页
page-break-after：元素之后分页
page-break-inside：元素内部分页

这三个属性的值都是两个：always（生效）和avoid（避免）。

h1 {
  /* 总是在 h1 元素之前分页 */
  page-break-before: always;
}

section.city-map {
  /* 在元素之前和之后分页，即该元素单独占据一页 */
  page-break-before: always;
  page-break-after: always;
}

table {
  /* 表格尽可能不要分页 */
  page-break-inside: avoid;
}

orphans 属性，widow 属性

orphans属性和widow属性设置某个元素如何跨页拆分。

orphans属性设置跨页前的行数少于多少行时，所有行都移到下一页打印。

1
2
3

p {
  orphans: 3;
}

上面代码设置，如果某个段落出现在上一页的结尾少于3行（比如只有两行），那么该段落全部移到下一页显示。

widow属性设置出现在新页面的行数，最少应该有几行。

1
2
3

p {
  widow: 2;
}

上面代码设置，如果某个段落出现在新页面的开头少于两行（比如只有一行），那么该段落全部移到上一页显示。

@page 命令

@page命令主要用来定义页面距。

1
2
3

@page {
  margin: 2cm;
}

此外，还可以用:first、:last、:left、:right和:blank选择器，选中特殊页面。

1
2
3

@page:first {
  margin: 0;
}

上面代码设置第一页的页边距为0。

技巧

重复表格的表头

如果希望打印表格的时候，每一页都出现表头，只需要使用<thead>元素定义表头，<tbody>元素定义表的数据部分即可。

<table>
  <thead>
    <tr>
      <th>City</th>
      <th>Population</th>
  </thead>
  <tbody>
    <tr>
      <td>Sydney</td>
      <td>4.627 million (2018)</td>
    </tr>
  </tbody>
</table>

上面代码中，如果表格跨页，表头的City和Population字段会在每一页都打印出来。

打印链接的网址

如果希望打印出链接的网址，可以使用:after伪元素。

@media print {
  a[href]:after {
    content: "(" attr(href) ")";
  }
}

参考链接

Print CSS basics in 10 minutes, Paperplay

本教程来自“网道项目”（wangdoc.com），采用知识共享署名-相同方式共享 3.0协议。