- 发布日期:2014-05-06
- 点击数:1914
- 回到首页
制作适合打印的网页时,往往需要调整网页的显示方式。例如,取消背景翻色,将白色的文字变为黑色的文字,去掉一些图片、动画效果,去掉广告栏、导向菜单栏,将所有的链接加上下划线,对于具有滚动条的方框内容取滑滚动条等。我们可以通过定义一个适合打印的外部样式表,然后设置其media选项,有效地达到这一效果。具体操作步骤如下如下
(1)在html的head元素中,插入一行定义外部样式表的语句。如下:
css代码
"stylesheet"type="text/css"href="print.css"media="print">
在缺省情况下,media的属性值是screen,表示所定义的外部样式表是用于屏幕显示的,如果设置为print,则表示该外部样式表是用于打印的。有关link元素的media属性的其他设置,可以参见w3c标准:
(2)新建一个css的文本文件,例如文件名为print.css,然后将需要修改的样式表内容写在里面。一般说来,有以下修改:
①取消背景颜色,将白色的文字变为黑色的文字。
css代码
body{color:#000000:background:#ffffff}
②将所有的链接加上下划线并且变为蓝色字体。
css代码
a{text-decoration:underlinecolor:#0000ff}
③去掉一些图片、动画效果、去掉广告栏、导向菜单栏。首先为这些内容的元索分别定义标识,例如:
xml/html代码
<divid="navigation">...div>
<divid="advertising">...div>
<divid="other">...div>
然后定义样式表如下:
css代码
#navigation,#advertising,#other{display:none}
对于具有滚动条的方框内容取消滚动条。例如,有一个宽度为200px、高度为300px的div元素,当里面的内容很多时,屏幕就会显示垂直滚动条。
xml/html代码
<divid="scrollbox">...div>
屏幕显示时的样式表为:
css代码
#scrollbox{width:200pxheight:300pxoverflow:auto}
那么,在print.css中加入下述语句就可以了。
css代码
#scrollbox{width:200pxheight:auto}