CSS 媒体类型
样式表最重要的特性之一是它们指定了如何在不同媒体上呈现文档:屏幕上、纸张上、语音合成器上、盲文设备上等等。
目前有两种方式用于指定样式表的媒体依赖关系 −
- 使用
@media
或@import at-rules
从样式表中指定目标媒体。 -
在文档语言内指定目标媒体。
@media
规则
@media 规则指定了一组规则的目标媒体类型(用逗号分隔)。
以下是一个示例 −
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>
文档语言
在HTML 4.0中,LINK元素上的media属性指定外部样式表的目标媒体-
以下是一个示例-
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>
识别的媒体类型
为CSS媒体类型选择的名称反映了相关属性在哪些目标设备上是有意义的。它们给出了媒体类型所指的设备的概念。下面是各种媒体类型的列表−
序号 | 值及描述 |
---|---|
1 | all 适用于所有设备。 |
2 | aural 用于语音合成器。 |
3 | braille 用于点字触觉反馈设备。 |
4 | embossed 用于分页点字打印机。 |
5 | handheld 适用于手持设备(通常是小屏幕,单色,带宽有限)。 |
6 | print 用于分页,不透明材料以及在打印预览模式下屏幕查看的文档。请参阅分页媒体部分。 |
7 | projection 用于投影演示,例如投影仪或打印到透明胶片。请参阅分页媒体部分。 |
8 | screen 主要用于彩色计算机屏幕。 |
9 | tty 用于使用固定间距字符网格的媒体,如电传打字机,终端或具有有限显示功能的便携设备。 |
10 | tv 用于电视类型设备。 |
注意 - 媒体类型名称不区分大小写。