7 媒体类型

内容

7.1 媒体类型简介

样式表的最重要特性之一是它们指定了如何在不同的媒体上展示文档：在屏幕上、纸上、使用语音合成器、使用盲文设备等。

某些CSS属性仅为特定的媒体设计（例如，“page-break-before” 属性仅适用于分页媒体）。然而，有时针对不同媒体类型的样式表可能共享某个属性，但需要为该属性指定不同的值。例如，“font-size” 属性对于屏幕和打印媒体都很有用。这两种媒体类型之间的差异足以需要为共同属性指定不同的值；文档在计算机屏幕上通常需要比在纸上更大的字体。因此，有必要表达某个样式表或样式表的某个部分适用于某些特定的媒体类型。

7.2 指定依赖媒体的样式表

目前有两种方式可以为样式表指定媒体依赖性：

使用@media或@import at-rules在样式表中指定目标媒体。

@import url("fancyfonts.css") screen;
@media print {
  /* 打印用的样式表在此 */
}

在文档语言中指定目标媒体。例如，在HTML 4中 ([HTML4])，LINK元素的“media”属性指定外部样式表的目标媒体：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>链接到一个目标媒体</TITLE>
      <LINK REL="stylesheet" TYPE="text/css" 
	 MEDIA="print, handheld" HREF="foo.css">
   </HEAD>
   <BODY>
      <P>正文...
   </BODY>
</HTML>

@import规则在层叠规则章节中定义。

7.2.1 @media 规则

@media 规则指定了一组媒体类型（用逗号分隔）的目标媒体，并在大括号内包含一组语句。无效的语句必须根据4.1.7 “规则集、声明块和选择器”和4.2 “处理解析错误的规则”被忽略。@media结构允许在同一样式表中为各种媒体定义样式规则：

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

@media规则之外的样式规则适用于样式表适用的所有媒体类型。@media 内的 at-rule 在 CSS 2.2 中无效。

7.3 已识别的媒体类型

为 CSS 媒体类型选择的名称反映了相关属性有意义的目标设备。在以下 CSS 媒体类型列表中，媒体类型的名称是规范性的，但描述是信息性的。同样，每个属性描述中的“媒体”字段也是信息性的。

all: 适用于所有设备。
braille: 用于盲文触觉反馈设备。
embossed: 用于分页盲文打印机。
handheld: 用于手持设备（通常是小屏幕，带宽有限）。
print: 用于分页材料和在打印预览模式下在屏幕上查看的文档。有关特定于分页媒体的格式化问题的信息，请参阅分页媒体部分。
projection: 用于投影演示，例如投影仪。有关特定于分页媒体的格式化问题的信息，请参阅分页媒体部分。
screen: 主要用于彩色计算机屏幕。
speech: 用于语音合成器。注意：CSS2 之前有一个类似的媒体类型，称为 'aural'，用于此目的。有关详细信息，请参阅关于听觉样式表的附录。
tty: 用于使用固定间距字符网格的媒体（例如电传打字机、终端或显示能力有限的便携设备）。作者不应在 "tty" 媒体类型中使用像素单位。
tv: 用于电视类设备（低分辨率、彩色、有限滚动能力的屏幕，具有声音）。

媒体类型名称不区分大小写。

媒体类型是互斥的，因为用户代理在呈现文档时只能支持一种媒体类型。然而，用户代理可以在不同的画布上使用不同的媒体类型。例如，一个文档可以在一个画布上以“屏幕”模式显示，同时在另一个画布上以“打印”模式显示。

请注意，多模式媒体类型仍然只是一种媒体类型。例如，“tv”媒体类型是一种多模式媒体类型，可以同时在单一画布上进行视觉和听觉渲染。

带有未知媒体类型（但仍然是有效标识符）的 @media 和 @import 规则被视为如果不存在这些未知媒体类型。如果 @media/@import 规则包含格式错误的媒体类型（不是标识符），则该语句无效。

注意：媒体查询（Media Queries）取代了这种错误处理。

例如，在以下代码片段中，P 元素上的规则适用于“屏幕”模式（即使“3D”媒体类型未知）。

@media screen, 3D {
  P { color: green; }
}

注意： 将来的 CSS 更新可能会扩展媒体类型列表。作者不应依赖 CSS 规范尚未定义的媒体类型名称。

7.3.1 媒体组

本节为信息性内容，不具有规范性。

每个 CSS 属性定义都会指定该属性适用的媒体类型。由于属性通常适用于多种媒体类型，每个属性定义的“适用于媒体”部分列出了媒体组，而不是单个媒体类型。每个属性适用于其定义中列出的所有媒体组的媒体类型。

CSS 2.2 定义了以下媒体组：

连续或分页。
视觉，音频，语音，或触觉。
网格（用于字符网格设备），或位图。
交互式（用于允许用户交互的设备），或静态（用于不允许用户交互的设备）。
全部（包括所有媒体类型）。

下表显示了媒体组和媒体类型之间的关系：

媒体组与媒体类型之间的关系
媒体类型	媒体组
	连续/分页	视觉/音频/语音/触觉	网格/位图	交互式/静态
盲文	连续	触觉	网格	两者
浮雕	分页	触觉	网格	静态
手持设备	两者	视觉、音频、语音	两者	两者
打印	分页	视觉	位图	静态
投影	分页	视觉	位图	交互式
屏幕	连续	视觉、音频	位图	两者
语音	连续	语音	不适用	两者
TTY	连续	视觉	网格	两者
电视	两者	视觉、音频	位图	两者