基础 CSS 基础版式打印样式

简介

CSS 是前端开发不可缺少的一部分，它能够为网页提供丰富的样式，包括颜色、字体、排版等等。在打印文档时，我们通常会需要一些特别的版式样式，比如去除页面背景、调整字体大小、设置页面边距、添加页眉页脚等等。

本文介绍如何使用基础 CSS 基础版式打印样式，让你的打印文档看起来更加专业和整洁。

代码实现

使用 @media 查询

在 CSS 中，可以使用 @media 查询来定义针对不同媒体类型的样式。这样就能够只针对打印文档设置特定的样式。下面是一个基础的打印样式示例。

@media print {
  /* 去除背景颜色和背景图片 */
  body {
    background-color: #fff;
    background-image: none;
  }

  /* 调整字体大小 */
  * {
    font-size: 12px;
  }

  /* 设置页面边距 */
  @page {
    margin: 2cm;
  }

  /* 添加页眉页脚 */
  @page {
    @top-center {
      content: "打印文档页眉";
    }
    @bottom-center {
      content: "打印文档页脚";
    }
  }
}

在上面的示例中，使用了 @media print 查询来定义针对打印文档的样式。其中，通过调整 body 的背景颜色和图片来去除页面背景；通过设置 * 的字体大小来调整整个页面的字体大小；通过定义 @page 来设置页面边距；通过定义 @top-center 和 @bottom-center 来添加页眉页脚。

使用基础版式样式表

当然，你也可以使用现成的基础版式样式表来快速地添加打印样式。比如，可以使用 Bootstrap 提供的打印样式表，它包含了通用的打印样式和适用于各种打印场景的版式样式。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/print.min.css">

总结

打印文档时，我们通常需要一些特别的版式样式来让打印出来的文档更加专业和整洁。本文介绍了如何使用基础 CSS 基础版式打印样式，包括使用 @media 查询和引入现成的基础版式样式表。希望本文可以帮助你更好地打印文档。