通过CSS外部样式表和@media print控制打印样式，可隐藏非必要元素、调整字体颜色、设置分页及显示链接地址，提升打印效果的专业性与可用性。
在网页开发中，合理控制打印样式对提升用户体验至关重要。通过CSS的引入方式与媒体查询，特别是 @media print 的使用，可以精准控制页面在打印时的呈现效果。
CSS 引入方式与打印样式的关联
要应用打印样式，首先需要正确引入CSS文件或定义样式规则。主要有以下几种方式：
- 内联样式：直接写在HTML标签的 style 属性中，不推荐用于打印样式，难以维护。
- 内部样式表：使用 <style> 标签写在HTML头部，适合单页简单打印需求。
- 外部样式表：通过 <link> 标签引入，最常用且便于复用和管理。
对于打印样式，推荐使用外部样式表，并通过 media 属性 指定适用场景：
<link rel="stylesheet" type="text/css" href="print.css" media="print"><link rel="stylesheet" type="text/css" href="screen.css" media="screen">
这样浏览器在打印时只会加载 print.css，避免屏幕样式干扰打印输出。
立即学习“前端免费学习笔记（深入）”；
@media print 基本语法与常用技巧
使用 @media print 可以在通用CSS文件中专门定义打印时的样式规则：
@media print {body { font-size: 12pt; color: black; background: white; }
.no-print { display: none; }
.page-break { page-break-after: always; }
}
常见实用技巧包括：
-
隐藏非必要元素：导航栏、按钮、广告等在打印中无意义的内容应隐藏。
.navbar, .btn-edit, .ads { display: none; } - 调整字体与颜色：确保文字清晰可读，避免浅色文字在打印后看不清。
-
控制分页：使用
page-break-before、page-break-after避免内容被截断。 - 替换链接显示文本：打印时无法点击链接，可用CSS展示URL地址：
a[href]:after {
content: " (" attr(href) ")";
font-size: 90%;
color: gray;
}
}
打印优化建议与注意事项
为了让打印结果更专业、节省纸张和墨水，注意以下几点：
- 避免背景图和大图打印，默认多数浏览器不打印背景，如需强制打印图片，设置
background-image并提醒用户开启“打印背景”选项。 - 使用相对单位如
pt或mm更符合打印习惯，12pt约等于16px。 - 测试不同浏览器的打印预览（Ctrl+P），确保样式兼容性。
- 为表格、长列表设置分页断点，防止跨页断裂影响阅读。
基本上就这些。掌握CSS引入方式与 @media print 的配合使用，能有效提升网页打印的专业性和可用性。不复杂但容易忽略。
