CSS 设置打印样式

介绍

在网页开发中，我们经常需要将网页内容打印出来，例如打印一篇文章、一份报告或者一张表格。然而，网页在屏幕上显示的样式可能并不适合打印输出，因为屏幕和打印机的显示方式和光学特性有所不同。为了能够更好地控制网页的打印样式，CSS 提供了一些针对打印的特殊样式设置。

本文将详细解释 CSS 如何设置打印样式，并提供一些示例代码和输出结果，帮助读者更好地理解和应用这些技巧。

打印样式选项

在 CSS3 中，打印样式主要由 @page 规则来定义。通过 @page 规则，可以设置页面大小、页边距、页眉页脚等样式。除了 @page 规则，CSS 也提供了一些其他的打印相关属性，如 page-break-*、orphans、widows 等，用于控制打印时的分页行为和文本排版。

下面是一些常用的 @page 相关属性：

size：设置页面大小，可以使用预定义的关键字（如 auto、letter、a4 等）或者自定义长度单位（如 cm、in、mm 等）。
margin：设置页面的边距，可以设置一个值用于同时指定四个边距，也可以设置四个值分别定义上、右、下、左边距。
marks：定义是否在页面边缘显示标记线（crop marks）。
page-break-before：控制页面在打印时是否分页，常用的属性值有 auto、always 和 avoid。
page-break-after：类似于 page-break-before，控制页面在打印时的分页行为。

示例代码

接下来，我们将通过一些示例代码来演示如何使用 CSS 设置打印样式。

示例 1: 设置页面大小和边距

<!DOCTYPE html>
<html>
<head>
  <style>
    @page {
      size: A4;
      margin: 2cm;
    }
  </style>
</head>
<body>
  <h1>示例文章标题</h1>
  <p>这是一段示例文章内容。</p>
</body>
</html>

运行上述代码，将会生成一个 A4 大小的页面，上下左右均有 2cm 的边距。下面是示例代码的打印输出效果：

-----------------------------
|           上边距            |
|                           |
|          示例文章标题              |
|                           |
|       这是一段示例文章内容。         |
|                           |
|           下边距            |
-----------------------------

示例 2: 设置打印页眉页脚

<!DOCTYPE html>
<html>
<head>
  <style>
    @page {
      size: A4;
      margin: 2cm;

      @top-center {
        content: "示例页眉";
      }

      @bottom-center {
        content: "示例页脚";
      }
    }
  </style>
</head>
<body>
  <h1>示例文章标题</h1>
  <p>这是一段示例文章内容。</p>
</body>
</html>

运行上述代码，将会生成一个 A4 大小的页面，上下左右均有 2cm 的边距，并在页眉和页脚位置显示相应的内容。下面是示例代码的打印输出效果：

----------------------------------------
|                上边距                 |
|                                      |
|                示例页眉               |
|                                      |
|              示例文章标题              |
|                                      |
|           这是一段示例文章内容。            |
|                                      |
|                示例页脚               |
|                                      |
|                下边距                 |
----------------------------------------

示例 3: 控制分页行为

<!DOCTYPE html>
<html>
<head>
  <style>
    @page {
      size: A4;
      margin: 2cm;
    }

    h1 {
      page-break-before: always;
    }
  </style>
</head>
<body>
  <h1>第一节</h1>
  <p>这是第一节的内容。</p>

  <h1>第二节</h1>
  <p>这是第二节的内容。</p>
</body>
</html>

运行上述代码，将会生成一个 A4 大小的页面，上下左右均有 2cm 的边距，并且每篇文章节之前都有分页效果。下面是示例代码的打印输出效果：

-----------------------------
|           上边距            |
|                           |
|          第一节                |
|                           |
|      这是第一节的内容。           |
|                           |
|           分页线            |
|                           |
|          第二节                |
|                           |
|      这是第二节的内容。           |
|                           |
|           下边距            |
-----------------------------

总结

通过 CSS 的 @page 规则，我们可以很方便地设置网页的打印样式。通过设置页面大小、边距、页眉页脚等样式，我们可以更好地控制打印输出的效果。除了 @page 规则，CSS 还提供了其他打印相关的属性，如 page-break-*、orphans、widows 等，用于进一步控制打印样式和排版。