教你10分钟内学习如何CSS 设置网页打印时的样式

本文将教您开始为要打印的页面编写CSS所需要的一切提供帮助。

@media 规则

If you’ve done any responsive design, you’ll already know about the @media rule. As well as different screen sizes, @media also lets you target “print” media. Here’s an example:
如果你做过任何响应性的设计，你就已经知道 @media 规则了。除了不同的屏幕大小，@media还可以为你控制打印样式。下面是一个例子：

@media print {
	/* 这些样式仅在页面打印或保存为PDF时使用。 */
	h1 { font-size: 16pt; }
}

使用此规则，您可以将标准的css指定为普通样式，然后添加一些仅在打印时使用的自定义样式。

p { margin: 1em 0; }

@media print {
 /* 打印时隐藏相关文章链接 */
 .related-articles { display: none; }
}

如果你想将所有标准屏幕样式“归零”并从头开始，你可以用另一个 @media 规则来包装你的屏幕样式：

@media screen {  
 /* 此处为标准样式。 */  
}  
  
@media print {  
 /* 在此处打印样式。 */  
}  

分页符属性

为了确保内容在页面之间流畅地流动，您需要控制内容在页面之间分割的时间。例如，如果一个大标题出现在页面底部，这看起来很尴尬——你希望它从一个新的页面开始。类似地，如果可能，您可能希望避免一个表跨越多个页面。

You can do this using page-break-before, page-break-after, and page-break-inside. You can set the value for these properties to always or avoid.
你可以使用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;  
}  

提示：重复表格标题

如果您的文档包含跨越多页的表格，则在打印时将很难阅读，除非表格标题在每一页的开头重复。这很容易实现，只需使用表中的 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>  

打印后，您的表格将如下所示：

提示：添加或删除内容

Sometimes you might want to add content that’s only shown when printing. For example - you might want to link URLs to be printed. You can do this by using the :after pseudo-element:
有时，您可能希望添加仅在打印时显示的内容。例如，您可能希望链接要打印的URL。您可以使用：:after 伪元素来完成此操作：

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

您可能还希望仅在打印时隐藏或显示某些元素。通过 @media 和 display 结合起来，这可以很容易地完成。

/* 隐藏屏幕水印。 */  
.watermark {  
 display: none;  
}  
  
@media print {  
 /* 打印时隐藏导航。 */  
 nav {  
   display: hide;  
 }  
 /* 打印时显示水印 */  
 .watermark {  
   display: initial;  
 }  
}  

提示：使用模拟css媒体进行开发

为了加快开发过程中的反馈循环，可以将浏览器设置为显示打印样式。要在Mac上的Chrome中实现这一点，请打开开发者工具，然后使用Command + shift + p快捷键运行命令，然后搜索“Emulate CSS print media type”。

其他浏览器的开发工具中也会有类似的功能。
遗憾的是，要查看分页符，您每次都需要手动打印到PDF。

高级提示：孤行和寡行

orphans 和 widows 属性控制元素中的文本跨页面拆分的方式。有时，调整这些值可以提高打印文档的可读性。

p {  
 /* 如果在换行符之前不少于3行，则将该元素移动到新页的开头。 */  
 orphans: 3;  
}  

在下面的左侧，orphans被设置为2，因此第二段开始于分页符之前。通过将orphans设置为3，就像右边那样，该段落被强制下移到下一页的开始。
widow 属性与 orphan 属性相反——它指定了新页面开始处可以包含的最少行数。

高级提示： @page规则

使用 @page 规则，您可以定制特定页面的页边距。

@page:first {  
 /* 首页没有页边距。 */  
 margin: 0;  
}  
  
@page {  
 /* 在所有其他页面上设置页边距。 */  
 margin: 2cm;  
}  

不幸的是，浏览器对此的支持目前有点有限，您只能使用：:first, :last, :left, :right 和 :blank 伪选择器来选择页面。

总结

您现在熟悉了Chrome、Firefox和Safari等现代浏览器支持的重要打印布局属性。
遗憾的是，在现代浏览器中对更高级的打印布局功能的支持通常是有限的。例如，浏览器不提供使用CSS添加自定义页眉或页脚内容的标准方法。您可能希望查看 paged.js项目，该项目为浏览器当前缺少的许多打印布局功能提供了多个填充。‍