175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

如何使用CSS打印阻止网页

2019-09-06 来源:小领

虽然有各种各样的设备可用于查看网站(台式机,笔记本电脑,平板电脑,手机,可穿戴设备,电视等),但它们都包含某种屏幕。有人可能会以另一种方式查看您的网站,这种方式不包括屏幕。我们指的是您网页的实际打印输出。

多年前,你会发现人们打印网站是一种非常常见的情况。我们记得会见了许多不熟悉网络的客户,并且感觉更舒服地查看网站的打印页面。然后,他们给了我们反馈和编辑这些纸张,而不是在屏幕上讨论网站。随着人们对他们生活中的屏幕变得越来越熟悉,并且随着这些屏幕成倍增加,我们看到越来越少的人试图将网页打印到纸上,但它仍然会发生。当您计划您的网站时,您可能想要考虑这种现象。你想让人们打印你的网页吗?也许你没有。如果是这种情况,你有一些选择。

使用CSS很容易阻止人们打印您的网页。您只需创建一个名为“print.css”的1行样式表,其中包含以下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>此页面旨在在线查看,可能无法打印。请在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; }
这将确保打印消息仅显示在打印页面上,而网页仅显示在在线页面上。

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

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=269
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov All Rights Reserved
鲁ICP备18056479号-1站点地图

关注领创公众平台

添加官方微信

175 6191 5976