Warning:
This wiki has been archived and is now read-only.
CSS2/media
媒介型態
内容概要
媒体类型介绍
样式表的一大重要特性就是指定文档如何呈现在不同媒体之中，这些媒体包含：屏幕、纸张、语音合成器以及盲文设备等。
某些CSS属性仅为特定媒体设计（例如： ‘page-break-before’属性仅适用于分页媒体）。尽管有时适用于不同媒体类型 的样式表可能共享一个属性，但它们需要不同的值。举例说明， ‘font-size’属性同时适用于屏幕和印刷媒体。两个媒体类型的差异造成通用属性需要不同的值；通常一个文档在计算机屏幕上需要比纸张上更大的字体。因此，显然需要在特定媒体类型上应用一个样式表或样式表章节。
指定媒体相关的样式表
通常存在两只指定媒体相关样式表的方法：
- 在样式表中使用 @media 或 @import 按照规则指定目标媒体。
@import url("fancyfonts.css") screen;
@media print {
/* 适用于印刷的样式 */
}
- 在文档语言中指定目标媒体。例如，在[HTML4]中，LINK元素的“media”属性可以指定目标媒体的样式表：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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>
@media 规则
@media 规则指定一段语句集合（由花括号分界）的目标媒体类型（逗号分隔）。 按照4.1.7 “规则集、声明块及选择器”和4.2 “解析錯誤的處理規則”，必须忽略无效语句。@media 概念允许在同一个样式表中为不同媒体定义样式表规则：
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }parsing-errors
}
@media screen, print {
body { line-height: 1.2 }
}
在 @media 规则之外的样式规则应该应用于样式表所应用的所有媒体类型。 @media 中的 At-规则在 CSS2.1 中无效。
公认的媒体类型
被选作CSS媒体类型的名称反映有关属性意义的目标设备。在下面的CSS媒体类型列表中，媒体类型的名称是规范的，但描述是信息的。同样的，每个属性的描述中的“媒体”字段也是信息的。
- all（所有）
- 适用于所有设备。
- braille（盲文）
- 用于盲文触摸反馈设备。
- embossed（凸字）
- 用于分页盲文印刷。
- handheld（手持）
- 用于手持设备（小屏幕、有限贷款）。
- print（印刷）
- 用于分页材料以及打印预览模式下在屏幕上的文档视图。为分页媒体指定的 格式问题请参与分页媒体章节。
- projection（投影）
- 用于投影演示文稿，例如投影仪。为分页媒体指定的格式问题请参与 分页媒体章节。
- screen（屏幕）
- 主要用于彩色计算机屏幕。
- speech（语音）
- 用于语音合成器。注：CSS2 中有一个类似的媒体类型，其成为 “aural（听觉）”，详见附录。
- tty（电传打字机）
- 用于使用等宽字符的媒体（例如电传打字机、终端、显示能力有限的便携设 备）。编码人员不应在“tty”媒体类型中使用 像素单位。
- tv（电视）
- 用于电视机类型设备（低分辨率、颜色、限制滚动能力、声音有效）。
媒体类型名称不区分大小写。
在某种意义上媒体类型是互斥的，用户代理在渲染一个文档时仅能支持一种媒体类型。然而，用户代理可能会在不同的画布上使用不同的媒体类型。举例说明，一个文档可能会在一个画布上使用“screen”模式展示同时在另一个画布上使用“print”模式展示。
注意一个混合媒体类型仍然仅为一个媒体类型。举例说明，“tv”媒体类型是一个混合媒体类型，它同时在一个画布上进行视觉上和听觉上的渲染。
未知媒体类型（但是为有效标识符）的 @media 和 @import 规则按照未知媒体类型不存在来进行处理。如果一个 @media/@import 规则包含一个畸形媒体类型（不是一个标识符）则语句无效。
举例说明，在下列片段中，P 元素上的规则应用在“screen”模式下（尽管“3D”媒体类型未知）。
@media screen, 3D {
P { color: green; }
}
媒体组
本节内容是信息的，不规范。
每个CSS属性都定义该属性将要应用到的媒体类型。由于属性通常会应用于多个媒体类型，每个属性的“应用至媒体”片段定义了一个媒体组列表而不是单一媒体类型。每个属性都应用于其定义的媒体组中的所有媒体类型。
CSS 2.1 定义了下列媒体组：
- continuous（连续）或paged（分页）.
- visual（视觉）、audio（音频）、speech（语音）或tactile（触觉）。
- grid（网格）（等宽字符设备）或bitmap（位图）。
- interactive（交互式）（允许用户交互的设备）或static（静态）。
- all（所有）（包含所有媒体类型）。
下面的表格展示了媒体组合媒体类型之间的关系：
| 媒体类型 | 连续/分页 | 视觉/音频/语音/触觉 | 网格/位图 | 交互式/静态 |
|---|---|---|---|---|
| 盲文 | 连续 | 触觉 | 网格 | 全部 |
| 凸字 | 分页 | 触觉 | 网格 | 静态 |
| 手持 | 全部 | 视觉、音频、语音 | 全部 | 全部 |
| 印刷 | 分页 | 视觉 | 位图 | 静态 |
| 投影 | 分页 | 视觉 | 位图 | 交互式 |
| 屏幕 | 连续 | 视觉、音频 | 位图 | 全部 |
| 语音 | 连续 | 语音 | N/A | 全部 |
| 电传打字机 | 连续 | 视觉 | 网格 | 全部 |
| 电视 | 全部 | 视觉、音频 | 位图 | 全部 |