SoleilNeon's Blog

一般设计网页的时候只会给网页添加一个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属性的不同值的名字和用途。

Related Posts

• November 27, 2009 -- 用图片解释CSS盒子模型 (6)
• October 21, 2009 -- IE6，IE7，IE8 CSS兼容查询表 (4)
• October 2, 2009 -- 推荐一本学习CSS和HTML的书 (7)
• September 28, 2009 -- CSS中何时使用id何时使用class (4)
• September 6, 2009 -- 用HTML描述内容 用CSS描述样式 (3)