CSS 如何制作一个网页的打印版本

在本文中，我们将介绍如何用CSS制作一个网页的打印版本。通常情况下，网页的打印版本和其在浏览器上的展示版本有所不同。打印版本需要考虑到打印纸张的大小、颜色、排版等因素，以确保内容在打印时能够正常显示和打印。

阅读更多：CSS 教程

为打印版本定义样式表

要制作一个网页的打印版本，首先需要定义一个专门的CSS样式表，用于控制打印时的样式。你可以通过将以下代码保存为一个独立的CSS文件，然后在HTML文件中引入该文件来定义打印版本的样式。

/* 打印版本的样式 */
@media print {
  /* 页面背景颜色 */
  body {
    background: white;
  }

  /* 隐藏不必要的元素 */
  .hide-on-print {
    display: none;
  }

  /* 图片按照原尺寸进行打印 */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 去除超链接的下划线 */
  a {
    text-decoration: none;
  }

  /* 调整文本字体和颜色 */
  p, h1, h2, h3, h4, h5, h6 {
    color: black;
    font-family: Arial, sans-serif;
  }

  /* 设置页面样式 */
  @page {
    size: A4; /* 设置页面纸张大小 */
    margin: 1cm; /* 设置页面边距 */
  }
}

在上述代码中，我们使用了CSS的媒体查询@media print来定义打印版本的样式。@media print指示打印媒体特定的样式规则，只有在打印时才会生效。我们通过设置body背景颜色为白色、隐藏不必要的元素、调整图片尺寸和字体样式等方式，来确保打印版本的网页适合打印输出。

控制页面排版

在打印时，网页的排版也需要进行调整，以适应纸张的大小和方向。在CSS中，我们可以使用@page规则来控制页面的排版样式。

/* 页面排版样式 */
@page {
  size: A4; /* 设置页面纸张大小 */
  margin: 1cm; /* 设置页面边距 */
  orphans: 4; /* 设置页面底部最少行数 */
  widows: 4; /* 设置页面顶部最少行数 */
}

在上述代码中，我们使用了@page规则来设置页面的排版样式。通过设置页面纸张大小、边距、最少行数等属性，可以使得打印版本的网页更加合理地分页，避免在打印时产生奇怪的截断。

添加打印按钮

为了方便用户打印页面，我们可以添加一个打印按钮，点击该按钮时自动触发浏览器的打印功能。

<!-- 打印按钮 -->
<button onclick="window.print()">打印</button>

在上述代码中，我们使用了HTML的元素来创建一个打印按钮。通过设置onclick事件为window.print()，点击该按钮时会触发浏览器的打印功能。

运用示例

下面是一个示例，演示如何制作一个网页的打印版本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>打印版本示例</title>
  <link rel="stylesheet" href="print.css">
</head>
<body>
  <h1>网页打印版本示例</h1>
  <p>这是一个网页的打印版本示例，你可以点击下面的按钮来打印本页。</p>

  <button onclick="window.print()">打印</button>

  <script src="print.js"></script>
</body>
</html>

在上述示例中，我们定义了一个网页的打印版本，并添加了一个打印按钮。点击该按钮后，浏览器将自动触发打印功能，打印当前网页的内容。