CSS 使用CSS打印带有应用样式的div内容

在本文中，我们将介绍如何使用CSS打印带有应用样式的div内容。CSS打印功能是一种强大的工具，可以使我们更好地控制打印页面的样式和排版。

阅读更多：CSS 教程

CSS打印介绍

CSS打印是指使用CSS样式将网页内容输出到打印机或保存为PDF等格式的功能。使用CSS打印，我们可以自定义打印页面的样式，包括页面尺寸、页眉页脚、页码以及如何分页等。

在HTML文档中，我们可以使用<style>标签内嵌CSS样式，也可以使用外部CSS文件链接样式表。

在打印样式中，我们通常会使用@media print媒体查询来定义打印页面的样式。例如，我们可以使用以下代码来设置打印页面的字体为12pt，并隐藏某些元素：

@media print {
  body {
    font-size: 12pt;
  }
  .no-print {
    display: none;
  }
}

接下来，我们将介绍如何使用CSS打印带有应用样式的div内容。

打印特定的div内容

有时候，我们只需要打印页面中的一部分内容，而不是整个页面。这可以通过在CSS中设置打印样式来实现。我们可以给要打印的div添加一个类名，并在样式表中使用该类名进行样式设置。

例如，假设我们有以下HTML代码：

<div class="print-content">
  <h1>打印标题</h1>
  <p>打印内容</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

我们可以使用以下CSS代码，在打印时只显示该div的内容：

@media print {
  body * {
    display: none;
  }
  .print-content, .print-content * {
    display: block !important;
  }
}

在上述代码中，我们首先将所有元素的显示设置为none，然后将要打印的div和其内部元素的显示设置为block。注意，添加!important可以确保样式优先级。

格式化打印页面

除了打印特定的div内容，我们还可以格式化整个打印页面。这包括页面尺寸、页眉页脚、页码、打印方向等。

要设置打印页面的尺寸，我们可以使用CSS的@page规则。例如，以下代码将打印页面设置为A4尺寸：

@page {
  size: A4;
}

要设置页眉页脚，我们可以使用@top-left、@top-center、@top-right、@bottom-left、@bottom-center和@bottom-right属性。例如：

@page {
  @top-left {
    content: "打印页眉";
  }
  @bottom-center {
    content: counter(page) " / " counter(pages);
  }
}

要设置打印方向，我们可以使用@page规则中的size属性。例如：

@page {
  size: landscape;
}

示例说明

假设我们有一个带有样式的网页，我们只想打印其中的一个div内容，并在打印的页面上显示页码。我们可以使用以下HTML和CSS代码实现：

<!DOCTYPE html>
<html>
<head>
  <title>打印示例</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    @media print {
      body * {
        display: none;
      }
      #print-div, #print-div * {
        display: block !important;
      }
      @page {
        size: A4;
      }
      @bottom-center {
        content: counter(page) " / " counter(pages);
      }
    }
  </style>
</head>
<body>

  <h1>打印示例</h1>

  <div id="print-div">
    <h2>要打印的内容</h2>
    <p>这是要打印的内容。</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
  </div>

  <p>其他页面内容</p>

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

在上述示例中，我们将要打印的div的id设置为print-div，并在CSS样式中设置相关的打印样式。在打印样式中，我们使用@page设置页面尺寸为A4，并使用@bottom-center显示页码。