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 | 全部 |
电传打字机 | 连续 | 视觉 | 网格 | 全部 |
电视 | 全部 | 视觉、音频 | 位图 | 全部 |