如何添加媒体样式表
How to Add Media Style Sheets
媒体样式表只是CSS样式表:它们可能是内部的也可能是外部的。然而,当你要网页浏览器只应用样式给一个特殊的设备例如屏幕或者打印机时,就需要以一种略不同于平常的方式把这个样式表添加到你的网页中。
给外部样式表指定媒体类型
Specifying the Media Type for an External Style Sheet
要在指定一个特殊的媒体类型时附上一个样式表,就用带有media属性的<link>标签。要链接这个只用于打印的样式表,就给网页添加这个HTML:
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
注意:从技术上来说,CSS规则也让你在使用@import方法附加外部样式表时定义一个媒体类型(见第33页),像这样:@import url(print.css) print;。但是由于Internet Explorer不识别这个代码,所以你应该避免使用它。
如果不指定任何媒体,网页浏览器会假设你正面向所有媒体,因此它使用针对屏幕显示、打印等的样式表。此外,你可以用逗号分隔的方式来指定多个媒体类型。一个链接的外部样式表锁定多个媒体,可能看起来就像:
<link rel="stylesheet" type="text/css" media="screen, projection, handheld"
href="screen.css"/>
在浏览器开始认可多个媒体类型之前,可能还不需要指定多于一个的媒体类型。
提示:当你创建和测试打印机样式表时,关闭media="print"属性,并关闭所有只对屏幕的样式表。例如,改变media="screen"为media="speech"。这种方法让你在网页浏览器上观看网页,但是让它显示为好像是对打印机进行的格式。一旦打印机样式表看起来很好,就要确保设置它的媒体类型为print,并打开所有只对屏幕的样式表。
在样式表内部指定媒体类型
Specifying the Media Type Within a Style Sheet
也可以利用@media指令直接把特定媒体的样式包括在一个样式表内部。可能你要添加几个特别针对打印的样式给内部样式表,或者可能你喜欢保持所有样式在一个独立的外部表单里面,并仅添加一些只对打印机的样式。你可以利用@media指令来进行,像这样:
@media print {
/* 把用于打印的样式放在这里 */
}
注意要包括那个右大括号字符(在最后一行),否则这个指令将不起作用。这里是一个利用@media来包括两个只对打印机的样式的实例:
@media print {
h1 {
font-size: 24pt;
}
p {
font-size: 12pt;
}
}
从技术上来说,是否把所有样式放在单个文件里面并利用@media方法,或者把特别媒体的样式放在它们自己的外部样式表中(比如screen.css和printer. css),这
实在无关紧要。把你所有只对打印机的样式放进它们自己的外部样式表中。这些表以类似于printer.css这样的名字命名,使得查找和编辑只对打印的样式变得容易得多。







