跳到主要内容

CSS 打印样式

介绍​

在网页开发中，我们通常关注的是屏幕上的显示效果，但有时用户可能需要将网页内容打印出来。为了让打印的页面看起来更专业、更易读，我们可以使用CSS打印样式来优化打印效果。通过CSS打印样式，我们可以控制打印时的页面布局、字体、颜色、分页等属性，确保打印结果符合预期。

为什么需要CSS打印样式？​

默认情况下，浏览器会尝试将网页内容直接打印出来，但这可能会导致以下问题：

  • 不必要的元素（如导航栏、广告）被打印出来。
  • 页面布局在打印时变得混乱。
  • 颜色和背景可能不适合打印（例如，深色背景在打印时会消耗大量墨水）。

通过CSS打印样式，我们可以解决这些问题，确保打印内容简洁、清晰。

如何使用CSS打印样式​

1. 使用 @media print 规则​

CSS提供了 @media print 规则，专门用于定义打印样式。你可以在样式表中使用这个规则来指定只在打印时应用的样式。

css
@media print {
  /* 在这里定义打印样式 */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }

  /* 隐藏不需要打印的元素 */
  nav, .ad-banner {
    display: none;
  }

  /* 调整页面布局 */
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

2. 隐藏不需要打印的元素​

在打印时，通常不需要打印导航栏、广告、侧边栏等元素。你可以通过设置 display: none; 来隐藏这些元素。

css
@media print {
  nav, .ad-banner, .sidebar {
    display: none;
  }
}

3. 调整字体和颜色​

打印时，通常使用黑色文字和白色背景，以确保打印效果清晰。你可以通过以下方式调整字体和颜色：

css
@media print {
  body {
    color: black;
    background: white;
    font-family: "Times New Roman", serif;
    font-size: 12pt;
  }
}

4. 控制分页​

在打印时，你可能希望某些内容始终在新的一页开始。可以使用 page-break-before 或 page-break-after 属性来控制分页。

css
@media print {
  h1 {
    page-break-before: always;
  }

  .chapter {
    page-break-after: always;
  }
}

5. 优化链接显示​

在打印时，链接的URL通常不会显示出来。为了让用户知道链接的目标，你可以使用 :after 伪元素将URL显示在链接文本后面。

css
@media print {
  a::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #666;
  }
}

实际案例​

假设你有一个博客页面，其中包含导航栏、文章内容和侧边栏。你希望打印时只显示文章内容，并且文章标题始终在新的一页开始。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的博客</title>
  <style>
    /* 屏幕样式 */
    body {
      font-family: Arial, sans-serif;
      color: #333;
      background: #f4f4f4;
    }

    nav, .sidebar {
      display: block;
    }

    /* 打印样式 */
    @media print {
      body {
        font-size: 12pt;
        color: black;
        background: white;
      }

      nav, .sidebar {
        display: none;
      }

      h1 {
        page-break-before: always;
      }

      a::after {
        content: " (" attr(href) ")";
        font-size: 90%;
        color: #666;
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>

  <div class="content">
    <h1>我的博客文章</h1>
    <p>这是一篇关于CSS打印样式的文章。</p>
    <p>了解更多，请访问 <a href="https://example.com">示例网站</a>。</p>
  </div>

  <div class="sidebar">
    <p>侧边栏内容</p>
  </div>
</body>
</html>

总结​

通过使用CSS打印样式，你可以确保网页在打印时具有良好的可读性和布局。关键步骤包括使用 @media print 规则、隐藏不需要打印的元素、调整字体和颜色、控制分页以及优化链接显示。

提示

在实际开发中，建议在浏览器中预览打印效果，确保样式符合预期。大多数浏览器都提供了打印预览功能，可以帮助你调试打印样式。

附加资源​

练习​

  1. 为你的个人博客页面创建打印样式，确保打印时只显示文章内容。
  2. 尝试使用 page-break-before 和 page-break-after 属性控制分页。
  3. 优化链接显示，确保打印时链接的URL可见。

通过这些练习，你将更好地掌握CSS打印样式的使用技巧。