如何编写网页的打印样式
内容提要
本文讨论了创建适合打印的网页的方法，包括设置打印样式、隐藏非文本内容、处理超链接、添加媒体内容和插入页面分隔符等。通过这些方法，可以提高打印结果的质量和可读性。
延伸解读
打印样式表的结构规划
文章建议将样式表按 :root、@media screen 和 @media print 的顺序组织，把非基础样式放在 @media screen 中。这样在打印时无需额外重置或使用 !important，能更清晰地控制屏幕与打印的差异。使用 Sass 等预处理器时，还可以在规则内嵌套媒体查询，使代码更简洁。
隐藏非文本内容与工具类
打印时，页眉、页脚、侧边栏和操作按钮等非文本内容会干扰阅读。文章提出通过 .no-print 和 .print-only 工具类来灵活控制显示与隐藏。在 @media print 中设置 .no-print { display: none; } 和 .print-only { display: block; }，可以确保打印结果只保留核心内容。
超链接与媒体内容的打印处理
黑白打印下，超链接的颜色可能不明显，文章建议为链接添加下划线，并利用 ::after 伪元素显示实际 URL。对于视频和音频，可以添加脚注信息和二维码，并通过 .print-only 和 .no-print 类控制打印内容。还可以使用 data-print-content 属性自定义链接的打印文本。
分页控制与阅读体验
为避免打印时出现奇怪的分页，文章建议使用 page-break-after: avoid 防止标题与后续内容分离，用 page-break-inside: avoid 避免代码块和引用被拆分。还可以通过 .page-break 类手动插入分页元素，在文章合适位置强制分页，从而提升打印文档的阅读体验。
Q&A
如何设置网页的打印样式？
可以使用@media print查询来规划样式表的整体结构，并在其中定义打印样式。
在打印网页时如何处理超链接？
在黑白打印中，超链接应添加下划线样式，并直接显示实际链接。
如何隐藏网页中的非文本内容以优化打印效果？
可以通过CSS规则隐藏页眉、页脚、侧边栏和操作按钮等非文本内容。
如何在打印网页中插入页面分隔符？
可以使用CSS规则插入页面分隔符，以避免奇怪的分页，确保阅读体验。
在打印时如何处理视频和音频内容？
可以为视频和音频添加脚注信息和二维码，灵活控制打印内容。
如何避免打印时标题与内容分开？
可以使用CSS规则设置，避免在打印时将标题与其后内容分开。
