层叠样式表 2 级修订版 2 (CSS 2.2) 规范

摘要

本规范定义了层叠样式表第 2 级。CSS 是一种样式表语言，允许作者和用户为结构化文档（例如 HTML 文档和 XML 应用程序）附加样式（例如字体和间距）。通过将文档的呈现样式与文档内容分离，CSS 简化了网页创作和网站维护。

CSS 2.2 是 CSS 第 2 级的第二次修订版 [CSS2]。它修正了 CSS 2.1（CSS 第 2 级的第一次修订版）中的一些错误。它不是最新版本的 CSS。有关构成整个 CSS 的规范概述，请参阅“CSS 快照”[CSS]。

CSS 第 2 级支持特定媒体的样式表，以便作者可以根据视觉浏览器、听觉设备、打印机、盲文设备、手持设备等调整其文档的呈现方式。它还支持内容定位、表格布局、国际化功能以及与用户界面相关的一些属性。

本文件的状态

本节描述了本文档在发布时的状态。其他文档可能会取代本文档。当前 W3C 出版物的列表和本技术报告的最新修订版可以在 W3C 技术报告索引 http://www.w3.org/TR/ 中找到。

作为首次公开工作草案发布并不意味着得到 W3C 成员的认可。这是一个草案文档，可能会随时被更新、替换或废弃。在引用本文档时，应将其视为进展中的工作。

本文档由 CSS 工作组（样式活动的一部分）制作。

（存档）的公共邮件列表 www-style@w3.org（参见 说明）是讨论本规范的首选方式。发送电子邮件时，请在主题中加入“CSS22”字样，最好像这样：“[CSS22] …评论摘要…”。

本文档由一个根据 2004 年 2 月 5 日 W3C 专利政策 运营的小组制作。W3C 维护着一份公开的专利披露列表，其中列出了与该小组的交付成果相关的任何专利披露；该页面还包括披露专利的说明。个人如果实际了解某项专利，并且该个人认为该专利包含必要声明，则必须根据W3C 专利政策第 6 节披露相关信息。

本文档受 2015 年 9 月 1 日 W3C 流程文档 管辖。

自上一个推荐书以来的所有变更列在附录 C中。

完整目录

• 1 关于 CSS 2.2 规范
  • 1.1 CSS 2.2 与 CSS 2 的比较
  • 1.2 阅读规范
  • 1.3 规范的组织结构
  • 1.4 约定
    • 1.4.1 文档语言元素和属性
    • 1.4.2 CSS 属性定义
      • 1.4.2.1 值
      • 1.4.2.2 初始值
      • 1.4.2.3 适用于
      • 1.4.2.4 继承
      • 1.4.2.5 百分比值
      • 1.4.2.6 媒体组
      • 1.4.2.7 计算值
    • 1.4.3 简写属性
    • 1.4.4 注释和示例
    • 1.4.5 图像和长描述
  • 1.5 致谢
• 2 CSS 2.2 简介
  • 2.1 CSS 2.2 简短教程 (HTML)
  • 2.2 CSS 2.2 简短教程 (XML)
  • 2.3 CSS 2.2 处理模型
    • 2.3.1 画布
    • 2.3.2 CSS 2.2 地址模型
  • 2.4 CSS 设计原则
• 3 一致性：要求和建议
  • 3.1 定义
  • 3.2 用户代理的一致性
  • 3.3 错误条件
  • 3.4 text/css 内容类型
• 4 语法和基本数据类型
  • 4.1 语法
    • 4.1.1 词法分析
    • 4.1.2 关键字
      • 4.1.2.1 厂商特定扩展
      • 4.1.2.2 相关历史注释
    • 4.1.3 字符和大小写
    • 4.1.4 语句
    • 4.1.5 At-rules
    • 4.1.6 块
    • 4.1.7 规则集、声明块和选择器
    • 4.1.8 声明和属性
    • 4.1.9 注释
  • 4.2 解析错误处理规则
  • 4.3 值
    • 4.3.1 整数和实数
    • 4.3.2 长度
    • 4.3.3 百分比
    • 4.3.4 URL 和 URI
    • 4.3.5 计数器
    • 4.3.6 颜色
    • 4.3.7 字符串
    • 4.3.8 不支持的值
  • 4.4 CSS 样式表表示法
    • 4.4.1 引用字符编码中未表示的字符
• 5 选择器
  • 5.1 模式匹配
  • 5.2 选择器语法
    • 5.2.1 分组
  • 5.3 通用选择器
  • 5.4 类型选择器
  • 5.5 后代选择器
  • 5.6 子选择器
  • 5.7 相邻兄弟选择器
  • 5.8 属性选择器
    • 5.8.1 匹配属性和值
    • 5.8.2 DTD 中的默认属性值
    • 5.8.3 类选择器
  • 5.9 ID 选择器
  • 5.10 伪元素和伪类
  • 5.11 伪类
    • 5.11.1 :first-child 伪类
    • 5.11.2 链接伪类：:link 和 :visited
    • 5.11.3 动态伪类：:hover，:active，和 :focus
    • 5.11.4 语言伪类：:lang
  • 5.12 伪元素
    • 5.12.1 :first-line 伪元素
    • 5.12.2 :first-letter 伪元素
    • 5.12.3 :before 和 :after 伪元素
• 6 属性值的分配、层叠和继承
  • 6.1 指定、计算和实际值
    • 6.1.1 指定值
    • 6.1.2 计算值
    • 6.1.3 使用值
    • 6.1.4 实际值
  • 6.2 继承
    • 6.2.1 "inherit" 值
  • 6.3 @import 规则
  • 6.4 层叠
    • 6.4.1 层叠顺序
    • 6.4.2 !important 规则
    • 6.4.3 计算选择器的特异性
    • 6.4.4 非 CSS 呈现提示的优先级
• 7 媒体类型
  • 7.1 媒体类型简介
  • 7.2 指定依赖媒体的样式表
    • 7.2.1 @media 规则
  • 7.3 认可的媒体类型
    • 7.3.1 媒体组
• 8 盒模型
  • 8.1 盒尺寸
  • 8.2 边距、填充和边框示例
  • 8.3 边距属性："margin-top"，"margin-right"，"margin-bottom"，"margin-left"，和 "margin"
    • 8.3.1 边距折叠
  • 8.4 填充属性："padding-top"，"padding-right"，"padding-bottom"，"padding-left"，和 "padding"
  • 8.5 边框属性
    • 8.5.1 边框宽度："border-top-width"，"border-right-width"，"border-bottom-width"，"border-left-width"，和 "border-width"
    • 8.5.2 边框颜色："border-top-color"，"border-right-color"，"border-bottom-color"，"border-left-color"，和 "border-color"
    • 8.5.3 边框样式："border-top-style"，"border-right-style"，"border-bottom-style"，"border-left-style"，和 "border-style"
    • 8.5.4 边框简写属性："border-top"，"border-right"，"border-bottom"，"border-left"，和 "border"
  • 8.6 双向上下文中内联元素的盒模型
• 9 可视化格式模型
  • 9.1 可视化格式模型简介
    • 9.1.1 视口
    • 9.1.2 包含块
  • 9.2 控制盒生成
    • 9.2.1 块级元素和块盒
      • 9.2.1.1 匿名块盒
    • 9.2.2 内联级元素和内联盒
      • 9.2.2.1 匿名内联盒
    • 9.2.3 Run-in 盒
    • 9.2.4 "display" 属性
  • 9.3 定位方案
    • 9.3.1 选择定位方案："position" 属性
    • 9.3.2 盒偏移："top"，"right"，"bottom"，"left"
  • 9.4 正常流
    • 9.4.1 块格式化上下文
    • 9.4.2 内联格式化上下文
    • 9.4.3 相对定位
  • 9.5 浮动
    • 9.5.1 浮动定位："float" 属性
    • 9.5.2 控制浮动旁的流："clear" 属性
  • 9.6 绝对定位
    • 9.6.1 固定定位
  • 9.7 "display"、"position" 和 "float" 之间的关系
  • 9.8 正常流、浮动和绝对定位的比较
    • 9.8.1 正常流
    • 9.8.2 相对定位
    • 9.8.3 浮动盒
    • 9.8.4 绝对定位
  • 9.9 分层展示
    • 9.9.1 指定堆叠层级："z-index" 属性
  • 9.10 文字方向："direction" 和 "unicode-bidi" 属性
• 10 可视化格式模型细节
  • 10.1 “包含块”的定义
  • 10.2 内容宽度："width" 属性
  • 10.3 计算宽度和边距
    • 10.3.1 内联、非替换元素
    • 10.3.2 内联、替换元素
    • 10.3.3 正常流中的块级、非替换元素
    • 10.3.4 正常流中的块级、替换元素
    • 10.3.5 浮动的、非替换元素
    • 10.3.6 浮动的、替换元素
    • 10.3.7 绝对定位的、非替换元素
    • 10.3.8 绝对定位的、替换元素
    • 10.3.9 正常流中的 'inline-block'、非替换元素
    • 10.3.10 正常流中的 'inline-block'、替换元素
  • 10.4 最小和最大宽度："min-width" 和 "max-width"
  • 10.5 内容高度："height" 属性
  • 10.6 计算高度和边距
    • 10.6.1 内联、非替换元素
    • 10.6.2 内联替换元素、正常流中的块级替换元素、正常流中的 'inline-block' 替换元素和浮动替换元素
    • 10.6.3 当 'overflow' 计算为 'visible' 时，正常流中的块级非替换元素
    • 10.6.4 绝对定位的、非替换元素
    • 10.6.5 绝对定位的、替换元素
    • 10.6.6 复杂情况
    • 10.6.7 块格式化上下文根的 'auto' 高度
  • 10.7 最小和最大高度："min-height" 和 "max-height"
  • 10.8 行高计算："line-height" 和 "vertical-align" 属性
    • 10.8.1 上下行距和半行距
• 11 视觉效果
  • 11.1 溢出和裁剪
    • 11.1.1 溢出："overflow" 属性
    • 11.1.2 裁剪："clip" 属性
  • 11.2 可见性："visibility" 属性
• 12 生成的内容、自动编号和列表
  • 12.1 :before 和 :after 伪元素
  • 12.2 "content" 属性
  • 12.3 引号
    • 12.3.1 使用 "quotes" 属性指定引号
    • 12.3.2 使用 "content" 属性插入引号
  • 12.4 自动计数器和编号
    • 12.4.1 嵌套计数器和范围
    • 12.4.2 计数器样式
    • 12.4.3 'display: none' 元素中的计数器
  • 12.5 列表
    • 12.5.1 列表："list-style-type"，"list-style-image"，"list-style-position"，和 "list-style" 属性
• 13 分页媒体
  • 13.1 分页媒体简介
  • 13.2 页框：@page 规则
    • 13.2.1 页边距
    • 13.2.2 页选择器：选择左、右和首页
    • 13.2.3 页框外的内容
  • 13.3 分页符
    • 13.3.1 分页符属性："page-break-before"，"page-break-after"，"page-break-inside"
    • 13.3.2 元素内的分页符："orphans"，"widows"
    • 13.3.3 允许的分页符
    • 13.3.4 强制分页符
    • 13.3.5 “最佳”分页符
  • 13.4 页上下文中的层叠
• 14 颜色和背景
  • 14.1 前景色："color" 属性
  • 14.2 背景
    • 14.2.1 背景属性："background-color"，"background-image"，"background-repeat"，"background-attachment"，"background-position"，和 "background"
• 15 字体
  • 15.1 简介
  • 15.2 字体匹配算法
  • 15.3 字体族："font-family" 属性
    • 15.3.1 通用字体族
      • 15.3.1.1 衬线字体
      • 15.3.1.2 非衬线字体
      • 15.3.1.3 草书字体
      • 15.3.1.4 幻想字体
      • 15.3.1.5 等宽字体
  • 15.4 字体样式："font-style" 属性
  • 15.5 小型大写："font-variant" 属性
  • 15.6 字体粗细："font-weight" 属性
  • 15.7 字体大小："font-size" 属性
  • 15.8 字体简写属性："font" 属性
• 16 文本
  • 16.1 缩进："text-indent" 属性
  • 16.2 对齐："text-align" 属性
  • 16.3 装饰
    • 16.3.1 下划线、上划线、删除线和闪烁："text-decoration" 属性
  • 16.4 字母和单词间距："letter-spacing" 和 "word-spacing" 属性
  • 16.5 大小写转换："text-transform" 属性
  • 16.6 空白："white-space" 属性
    • 16.6.1 'white-space' 处理模型
    • 16.6.2 带有空白折叠的双向性示例
    • 16.6.3 控制和组合字符的详细信息
• 17 表格
  • 17.1 表格简介
  • 17.2 CSS 表格模型
    • 17.2.1 匿名表格对象
  • 17.3 列
  • 17.4 可视化格式模型中的表格
    • 17.4.1 标题位置和对齐
  • 17.5 表格内容的视觉布局
    • 17.5.1 表格层次和透明度
    • 17.5.2 表格宽度算法："table-layout" 属性
      • 17.5.2.1 固定表格布局
      • 17.5.2.2 自动表格布局
    • 17.5.3 表格高度算法
    • 17.5.4 列的水平对齐
    • 17.5.5 动态行和列效果
  • 17.6 边框
    • 17.6.1 分离边框模型
      • 17.6.1.1 空单元格的边框和背景："empty-cells" 属性
    • 17.6.2 折叠边框模型
      • 17.6.2.1 边框冲突解决
    • 17.6.3 边框样式
• 18 用户界面
  • 18.1 光标："cursor" 属性
  • 18.2 系统颜色
  • 18.3 字体的用户首选项
  • 18.4 动态轮廓："outline" 属性
    • 18.4.1 轮廓和焦点
  • 18.5 放大
• 附录 A. 听觉样式表
  • A.1 'aural' 和 'speech' 媒体类型
  • A.2 听觉样式表简介
    • A.2.1 角度
    • A.2.2 时间
    • A.2.3 频率
  • A.3 音量属性："volume"
  • A.4 语音属性："speak"
  • A.5 暂停属性："pause-before"，"pause-after"，和 "pause"
  • A.6 提示属性："cue-before"，"cue-after"，和 "cue"
  • A.7 混音属性："play-during"
  • A.8 空间属性："azimuth" 和 "elevation"
  • A.9 语音特性属性："speech-rate"，"voice-family"，"pitch"，"pitch-range"，"stress"，和 "richness"
  • A.10 语音属性："speak-punctuation" 和 "speak-numeral"
  • A.11 表格的音频呈现
    • A.11.1 朗读表头："speak-header" 属性
  • A.12 HTML 的示例样式表
  • A.13 Emacspeak
• 附录 B. 参考文献
  • B.1 规范性引用
  • B.2 信息性引用
• 附录 C. 更改
  • C.1 自 2011 年 6 月 7 日推荐标准以来的变更
• 附录 D. HTML 4 默认样式表
• 附录 E. 堆叠上下文的详细描述
  • E.1 定义
  • E.2 绘制顺序
  • E.3 注释
• 附录 F. 完整的属性表
• 附录 G. CSS 2.2 的语法
  • G.1 语法
  • G.2 词法扫描器
  • G.3 CSS 2.2 和 CSS1 词法分析的比较
  • G.4 实施说明
• 附录 I. 索引