CSS 打印 CSS – 为元素创建整页输出

在本文中，我们将介绍如何使用 CSS 打印样式表来为一个特定元素创建整页输出。CSS 打印样式表是一种特殊的样式表，用于定义在打印时如何显示和格式化页面内容。通过使用打印样式表，我们可以为页面的特定元素设置不同的样式和布局，以便在打印时呈现出最佳效果。

阅读更多：CSS 教程

什么是 CSS 打印样式表？

CSS 打印样式表是一种用于定义打印时页面布局和样式的 CSS 文件。它可以与普通屏幕样式表同时存在，并且在打印时会优先应用打印样式表。通过使用打印样式表，我们可以控制在打印时每个元素的显示方式，以及页面的页眉、页脚和其它打印相关的特性。

如何应用 CSS 打印样式表？

为了应用 CSS 打印样式表，我们需要在 HTML 文档的 head 部分添加一个 link 元素，并指定 rel=”stylesheet” 和 media=”print” 属性。rel 属性用于指定该样式表的关系类型，而 media 属性用于指定仅在打印时应用该样式表。下面是一个示例：

<head>
  <link rel="stylesheet" href="print.css" media="print">
</head>

在上面的示例中，我们将一个名为 print.css 的样式表应用于打印时。

如何为元素创建整页输出？

为了为一个特定元素创建整页输出，我们可以使用 CSS 打印样式表中的一些属性和选择器。下面是一些常用的属性和选择器：

打印相关的属性

page-break-before：指定该元素之前是否应该插入分页符。
page-break-after：指定该元素之后是否应该插入分页符。
page-break-inside：指定该元素是否允许分页。如果设置为 avoid，则在该元素内尽量避免出现分页。

选择器

@page选择器：用于定义页面盒模型的属性，如页边距、页眉和页脚的高度等。
@media print选择器：用于定义只在打印时应用的样式。

下面的示例演示了如何使用上述属性和选择器为一个特定元素创建整页输出：

@media print {
  @page {
    margin: 2cm;
    size: A4;
  }

  .print-page {
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
  }
}

在上面的示例中，我们通过使用 @page 选择器定义了页面的页边距和大小，然后使用 .print-page 类为一个特定元素创建了整页输出。通过设置相应的 page-break-* 属性，我们可以控制元素是否在新的页面开始和是否允许分页。

示例

下面的示例演示了如何为一个包含多个段落的文档创建整页输出：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="print.css" media="print">
</head>
<body>
  <div class="print-page">
    <h1>打印样式表示例</h1>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
  </div>
</body>
</html>

@media print {
  @page {
    margin: 2cm;
    size: A4;
  }

  .print-page {
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
  }
}

在上面的示例中，我们将一个包含多个段落的文档划分为一个 .print-page 的容器，并为它应用了打印样式表。该容器将在打印时的每个段落前后插入分页符，并且尽量避免段落内的分页。