CSS如何在HTML中引入打印样式_使用media="print"控制打印输出样式

使用@media print可控制网页打印样式，通过隐藏非必要元素、调整字体与颜色、设置分页等方式优化打印效果，提升用户体验。

在网页开发中，有时需要控制页面打印时的显示效果，比如隐藏导航栏、广告或按钮，只保留核心内容。CSS 提供了通过 media="print" 来定义打印样式的方法，让网页在打印时自动应用特定样式。

使用 @media print 定义打印样式

最常用的方式是在 CSS 文件或页面的 标签中使用 @media print 规则，专门设置打印时生效的样式。

例如：

@media print {
  .header, .sidebar, .footer, .no-print {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  .content {
    width: 100%;
    margin: 0;
  }
}

这样在打印时，带有 .no-print 类的元素将被隐藏，正文内容则以更合适的字体大小和布局输出。

在 HTML 中引入带 media 的样式表

也可以在 HTML 的 中单独引入一个专用于打印的 CSS 文件：

其中：

• media="screen" 表示仅在屏幕上显示时应用（如浏览器查看）
• media="print" 表示仅在打印或打印预览时应用

这种方式可以分离屏幕样式与打印样式，便于维护。

常见打印优化技巧

为了让打印结果更清晰实用，可以考虑以下做法：

• 隐藏不必要的元素：如按钮、菜单、广告等，添加 .no-print { display: none; }
• 调整颜色：避免背景色浪费墨水，可设为白色，文字设为黑色
• 控制分页：使用 page-break-before 或 page-break-after 控制打印分页位置
• 设置合适字体大小：打印建议使用 pt 单位，如 10pt–12pt

基本上就这些。通过 media="print"，你可以轻松控制网页打印时的外观，提升用户体验。不复杂但容易忽略。