admin 管理员组文章数量: 887021
本文将教您开始为要打印的页面编写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项目，该项目为浏览器当前缺少的许多打印布局功能提供了多个填充。
版权声明：本文标题：教你10分钟内学习如何CSS 设置网页打印时的样式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726436054h960242.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论