CSS 在浏览器中查看打印样式

在本文中，我们将介绍如何使用CSS来设置打印样式，并在浏览器中预览打印效果。打印样式代码是一种特殊的CSS代码，用于定制网页在打印时的表现。

阅读更多：CSS 教程

什么是打印样式？

打印样式是一种CSS样式表，用于控制网页在打印时的呈现效果。通过设置不同的打印样式，您可以调整页面的布局、字体、颜色等方面，以确保打印输出的内容符合您的需求。

如何使用打印样式？

要使用打印样式，您可以在网页的<head>标签中添加一个专门用于打印样式的CSS样式表。以下是一个示例：

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

在上面的示例中，我们将打印样式表的链接放在<head>标签中，并且通过media="print"属性指定该样式表只适用于打印时。

CSS中的打印样式规则

在打印样式表中，您可以使用各种CSS规则来控制打印时的表现效果。以下是一些常用的打印样式规则示例：

@page规则：用于定义页面的特定打印样式，包括页面大小、页眉、页脚等。例如：

@page {
  size: A4;
  margin: 2cm;
  margin-header: 1cm;
  margin-footer: 1cm;
}

上面的代码设置了页面大小为A4，页边距为2cm，并且设置了1cm的页眉和页脚。

@media print规则：用于定义不同媒体类型下的样式表。通过@media print规则，您可以在网页打印时应用特定的样式。例如：

@media print {
  body {
    background-color: #fff;
    color: #000;
  }
  .no-print {
    display: none;
  }
}

上面的代码将打印样式应用到所有打印媒体类型，将背景颜色设置为白色，文字颜色设置为黑色。同时，.no-print类将在打印时隐藏。

@font-face规则：用于定义特定字体的打印样式。通过@font-face规则，您可以在打印时使用自定义字体。例如：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff') format('woff');
}

body {
  font-family: 'MyFont', sans-serif;
}

上面的代码定义了一个名为”MyFont”的字体，并将其应用于页面的body部分。

在浏览器中预览打印样式

现代浏览器通常都提供了预览打印样式的功能，以便您在打印前查看页面的打印效果。以下是几个常用的浏览器中预览打印样式的方法：

Chrome浏览器：打开网页，使用快捷键Ctrl + P，然后在打印设置中找到“打印预览”。
Firefox浏览器：打开网页，使用快捷键Ctrl + P，然后在打印设置中找到“打印预览”。
Safari浏览器：打开网页，使用快捷键Command + P，然后在打印设置中找到“打印预览”。

通过浏览器的打印预览功能，您可以在打印前查看页面的打印效果，并进行必要的调整。

示例：设置页面边距和页眉页脚

以下是一个示例，展示如何使用打印样式来设置页面边距和页眉页脚：

@page {
  size: A4;
  margin: 2cm;
  margin-header: 1cm;
  margin-footer: 1cm;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1cm;
  padding: 0 1cm;
  background-color: #ccc;
  color: #fff;
  text-align: center;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1cm;
  padding: 0 1cm;
  background-color: #ccc;
  color: #fff;
  text-align: center;
}