为网页不同应用类型添加不同的CSS样式表

一般设计网页的时候只会给网页添加一个CSS样式表,这个样式表用于屏幕显示。但是可以给打印,手持设备,语音朗读设置不同的CSS样式表。

为什么要设置不同的样式表?网页中一般会包含很多除了内容之外的其他内容,没有必要把这些也打印出来,可以为打印机设备另外一个样式表,这样去掉网页中的导航条,边栏之类的部分,节约油墨和打印空间。同样对于盲人可以添加另外一个适合语音朗读程序的样式表,对于手持设备可以针对小屏幕设置另外一个内容更为紧凑的CSS样式表。

有两种方法给网页添加不同应用类型的CSS样式表,一种是把样式表分为不同应用类型的单个文CSS文件,或者把所有内容写在一个CSS文件里。

例如,现在有3个样式表,screen.css用于屏幕显示,print.css用于打印,handheld.css用于手持设备。在HTML源代码的head部分添加下面几行:

<link rel=”stylesheet” type=”text/css” href=”screen.css” media=”screen”</>
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”</>
<link rel=”stylesheet” type=”text/css” href=”handheld.css” media=”handheld”</>

media属性用于设置不同用途的CSS,media=”print”属性用于打印,screen是屏幕显示,handhel就是手持设备。

另外还可以用@media在同一个样式表中指定不同的类型:

<style type=”text/css”>
<!--
@media screen{
    body{font:12pt verdana, arial, sans-serif}
}
@media print{
    body{font:10pt times, georgia, serif}
}
@media screen, print, projection{
    body{line-height:120%}
}
-->
</style>

创建一个打印样式时,可以把这些样式加到print.css文件中,这样它们只有在打印时才会被调用。这就确保了打印页面不会浪费空间,打印图片不会浪费油墨。

我顺便整理了media属性的不同值的名字和用途。

媒体类型 设备
all 用于所有设备
aural 用于语音和声音合成器
braille 用于盲人使用的触觉反应设备
embossed 用于盲人打印机
handheld 用于掌上设备或更小的装置
print 用于打印机和打印预览
projection 用于投影设备
screen 用于显示器
tty 用于固定的字符网络
tv 用于电视和网络电视

11 Comments

Leave a Comment.