外部print.css文件 – 如何使元素仅在打印时可见,在屏幕上不可见？

1. 引言

在网页设计中，打印页面对于用户来说是非常重要的功能。当用户需要将网页内容打印出来时，我们需要通过CSS样式表来控制打印页面的显示。在这篇文章中，我们将探讨如何使用外部print.css文件来使元素仅在打印时可见，在屏幕上不可见。

2. 创建print.css文件

首先，我们需要创建一个用于控制打印页面样式的外部CSS文件。命名为print.css，并将其链接到网页中。

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

注意其中的`media`属性被设置为`print`，这将使该样式表仅在打印时生效。

3. 隐藏元素在屏幕上的显示

为了使元素在屏幕上不可见，我们可以使用CSS的`display`属性来控制元素的显示方式。

@media screen {
  .hide-on-screen {
    display: none;
  }
}

上面的代码使用了媒体查询`@media screen`，表明该样式仅在屏幕上生效。`.hide-on-screen`类被定义为`display: none;`，这将使元素在屏幕上不可见。

4. 显示元素在打印页面上的可见性

要使元素在打印页面上可见，我们可以使用`@media print`媒体查询，并通过CSS的`display`属性重新定义元素的显示方式。

@media print {
  .show-on-print {
    display: block;
  }
}

上面的代码定义了一个`.show-on-print`类，它将使元素在打印页面上以块级元素（`display: block;`）显示。

5. 将隐藏/显示类应用于元素

现在我们已经定义了用于隐藏和显示元素的CSS样式，我们可以将这些类应用于特定的元素。

<h2 class="hide-on-screen">这个标题在屏幕上不可见</h2>
<h2 class="show-on-print">这个标题只在打印时可见</h2>

结论

通过使用外部print.css文件，我们可以轻松地控制元素在打印页面上的可见性，从而为用户提供更好的打印体验。我们通过定义专门的隐藏和显示样式类，并将它们应用于适当的元素，可以很容易地将想要隐藏或显示的元素隔离出来。

现在你可以尝试创建一个带有隐藏和显示元素的print.css文件，并在打印页面上查看它们的效果。