网页意味着要在屏幕上查看。虽然可以使用各种各样的设备查看站点（台式机、笔记本电脑、平板电脑、手机、可穿戴设备、电视等），但它们都包括某种屏幕。有另一种方式，有人可能会查看您的网站，一种不包括屏幕的方式。我们指的是您网页的物理打印输出。

几年前，你会发现人们打印网站是一种非常常见的情况。我们还记得与许多新接触网络的客户会面，他们在浏览网站的打印页面时感觉更舒服。然后，他们给了我们反馈和编辑，而不是在屏幕上讨论网站。随着人们对生活中的屏幕越来越熟悉，并且随着屏幕的成倍增加，我们看到越来越少的人尝试将网页打印到纸上，但这种情况仍然存在。当你计划你的网站时，你可能会考虑这个现象。您希望人们打印您的网页吗？也许你没有。如果是这样，你有一些选择。

如何阻止使用css打印网页

使用CSS很容易防止人们打印您的网页。您只需创建一个名为“print.css”的单行样式表，其中包括以下一行css。

body { display: none; }

这一样式将使页面的“body”元素变为不显示，因为页面上的所有内容都是body元素的子元素，这意味着整个页面/站点将不显示。

一旦有了“print.css”样式表，就可以将其作为打印样式表加载到HTML中。下面是如何做到这一点的——只需在HTML页面的“head”元素中添加以下行。

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

此信息告诉浏览器，如果此网页设置为打印，则使用此样式表，而不是页面用于屏幕显示的任何默认样式表。当页面切换到这个“print.css”页面时，使整个页面不显示的样式将生效，所有将打印的页面都将是空白页面。

一次阻止一页

如果你不需要在你的网站上屏蔽很多页面，你可以在页面的基础上屏蔽打印，并将以下样式粘贴到你的HTML头部。

<style type="text/css"> @media print { body { display:none } } </style>

这种页面内样式比外部样式表中的任何样式都具有更高的特殊性，这意味着页面根本不会打印，而没有这一行的其他页面仍会正常打印。

让你的被阻止的页面变得更有趣

如果您想进行雕版印刷，但又不想让客户感到沮丧，该怎么办？如果他们看到空白页打印，他们可能会感到不安，认为他们的打印机或计算机坏了，而没有意识到您基本上禁用了打印！

为了避免访问者的沮丧，你可以稍微增加一点想象力，在页面中加入一条信息，这条信息只有在读者打印页面时才会显示出来——取代其他内容。要做到这一点，请构建标准网页，并在页面顶部的body标记后面放置：

<div id="noprint">

并在所有内容写入后关闭页面底部的标签：

</div>

然后，在关闭“noprint”div后，打开另一个div，其中包含打印文档时要显示的消息：

<div id="print"> <p>This page is intended to be viewed online and may not be printed. Please view this page at http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm</p> </div>

包括指向名为print.CSS的打印CSS文档的链接：

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

在该文档中包括以下样式：

#noprint { display: none; } #print { display: block; }

最后，在标准样式表（或文档头的内部样式）中，写下：

#print { display: none; } #noprint { display: block; }

这将确保打印消息仅显示在打印页面上，而网页仅显示在联机页面上。

考虑用户体验

打印网页通常是一种糟糕的体验，因为今天的网站通常不能很好地翻译成打印的网页。如果您不希望创建一个完全独立的样式表来指定打印样式，则可以考虑使用本文中的步骤来“关闭”页面上的打印。请注意这可能会对依赖打印网站的用户产生的影响（可能是因为他们视力差，难以阅读屏幕上的文本），并做出有利于网站受众的决策。

Jennifer Krynin的原创文章。杰里米·吉拉德编辑。