CSS 级联与继承 第三层级

W3C 推荐标准,

此版本:
https://www.w3.org/TR/2021/REC-css-cascade-3-20210211/
最新发布版本:
https://www.w3.org/TR/css-cascade-3/
编辑草案:
https://drafts.csswg.org/css-cascade-3/
之前版本:
https://www.w3.org/TR/2020/PR-css-cascade-3-20201222/
实现报告:
https://drafts.csswg.org/css-cascade-3/implementation-report.html
测试套件:
http://test.csswg.org/suites/css-cascade-3_dev/nightly-unstable/
问题跟踪:
CSSWG 问题存储库
评论处理
编辑:
Elika J. Etemad / fantasai (受邀专家)
Tab Atkins Jr. (Google)
建议修改此规范:
GitHub 编辑器

请检查 勘误表, 以了解自发布以来报告的任何错误或问题。


摘要

此 CSS 模块描述了如何整理样式规则并为所有元素的所有属性分配值。通过级联和继承,所有属性的值都会在所有元素上传播。

CSS 是一种用于描述结构化文档(例如 HTML 和 XML)在屏幕、纸张等上的呈现的语言。

本文档状态

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

本文档由 CSS 工作组推荐标准 的形式发布。

W3C 推荐标准是一项经过广泛共识构建后,获得 W3C 及其成员支持的规范。W3C 建议广泛部署此规范作为 Web 的标准。

请通过 在 GitHub 中提交问题(优先), 在标题中包含规范代码“[css-cascade]”,例如: “[css-cascade] …评论摘要…”。 所有问题和评论都 存档。 或者,也可以将反馈发送至 (存档) 公共邮件列表 www-style@w3.org

本文档受 2020年9月15日 W3C 过程文档 管辖。

本文档由遵循 W3C 专利政策 的工作组生成。 W3C 维护一个 公共专利披露列表, 其中列出了与该工作组交付物相关的任何专利披露; 该页面还包括披露专利的说明。 任何个人如果知道其认为包含 必要权利要求 的专利, 必须按照 W3C 专利政策第6节 披露信息。

1. 简介

CSS 的基本设计原则之一是 级联, 它允许多个样式表影响文档的呈现。 当不同的声明试图为同一个元素/属性组合设置值时, 必须以某种方式解决冲突。

当没有声明试图为元素/属性组合设置值时,会出现相反的问题。 在这种情况下,可以通过 继承 或查看属性的 初始值 来找到一个值。

级联默认设置 过程 以一组声明作为输入, 并为每个元素的每个属性输出一个 指定值

本文规范描述了在文档中为所有元素的所有属性找到指定值的规则。 在页面上下文及其边距框中找到指定值的规则在 [css-page-3] 中进行了描述。

1.1. 模块交互

本节是规范性的。

此模块替换并扩展了 [CSS2] 第六章中定义的分配属性值、级联和继承的规则。

其他 CSS 模块可能会扩展此处定义的一些语法和功能的定义。 例如,当与本模块结合使用时,媒体查询第四级规范 扩展了 <media-query> 值类型的定义,如本规范中所使用的。

2. 导入样式表: @import 规则

@import 规则允许用户从其他样式表导入样式规则。 如果 @import 规则引用了一个有效的样式表, 用户代理必须将样式表的内容视为在 @import 规则位置写入的内容, 但有两个例外:

例如, 来自导入样式表的样式规则中的声明会与级联相互作用, 就像它们实际上是在 @import 规则处写入的一样。

任何 @import 规则必须位于样式表中所有其他有效的 at-规则和样式规则之前 (忽略 @charset),否则 @import 规则无效。 @import 的语法为:

@import [ <url> | <string> ] <media-query-list>? ;

其中 <url><string> 给出了要导入的样式表的 URL, 而可选的 <media-query-list>导入条件) 指定了适用的条件。

如果提供了 <string>, 它必须被解释为具有相同值的 <url>

以下几行在意义上是等价的, 并且说明了 @import 语法的两种形式 (一种使用 url(),另一种使用裸字符串):
@import "mystyle.css";
@import url("mystyle.css");

2.1. 条件 @import 规则

导入条件 允许导入依赖于媒体类型。 如果没有任何 导入条件,导入是无条件的。 (为 <media-query-list> 指定 all 会产生相同的效果。) 如果 导入条件 不匹配, 导入的样式表中的规则不适用, 就像导入的样式表被包裹在一个具有给定媒体查询的 @media 块中一样。

以下规则说明了如何使 @import 规则依赖于媒体类型:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

因此,只要媒体查询不匹配,用户代理可以避免获取依赖于媒体的导入。

导入条件 的评估和完整语法由 媒体查询 规范 [MEDIAQ] 定义。

2.2. 样式表导入处理

当同一个样式表在多个地方被导入或链接到文档时, 用户代理必须处理(或表现得像是在处理)每个链接, 就好像链接指向的是一个独立的样式表一样。

注意: 这对资源获取没有任何要求, 只涉及样式表如何在 CSSOM 中反映并在此类规范中使用。 假设适当的缓存, 即使样式表被多次链接或导入,用户代理也完全可以只获取一次样式表。

导入的样式表的 来源 是导入它的样式表的 来源

导入样式表的 环境编码 是导入它的样式表的编码。[css-syntax-3]

2.3. CSS 样式表的 Content-Type

导入样式表的处理取决于所链接资源的实际类型。 如果资源没有 Content-Type 元数据, 或者宿主文档处于 怪癖模式 且与导入的样式表具有 相同的来源, 那么所链接资源的类型为 text/css。 否则,类型由其 Content-Type 元数据 确定。

如果所链接资源的类型为 text/css, 则必须将其解释为 CSS 样式表。 否则,必须将其解释为网络错误。

3. 速记属性

一些属性是 速记属性, 这意味着它们允许作者使用一个属性来指定多个属性的值。 一个 速记属性 设置其所有的 长手子属性, 就像在当前位置展开一样。

当从 速记 形式中省略值时, 除非另有定义, 每个“缺失”的 子属性 将被赋予其 初始值

这意味着 速记 属性声明总是设置其所有 子属性, 即使那些没有明确设置的子属性。 不慎使用可能会导致无意中重置某些 子属性。 仔细使用时,速记 可以通过重置无意中从其他来源级联的 子属性 来确保“空白状态”。

例如,编写 background: green 而不是 background-color: green 确保背景颜色覆盖任何较早的声明, 这些声明可能通过 background-image 设置了背景图像。

例如,CSS 第一层级的 font 属性 是一个 速记 属性,用于同时设置 font-stylefont-variantfont-weightfont-sizeline-heightfont-family。 此示例的多次声明:
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}

因此可以重写为

h1 { font: bold 12pt/14pt Helvetica }

随着在 CSS 中引入更多的 font 子属性, 速记声明也会将它们重置为初始值。

在某些情况下,速记 可能具有不同的语法 或特殊关键字, 它们不直接对应其 子属性 的值。 (在这种情况下,速记 将明确定义其值的扩展。)

在其他情况下,某个属性可能是速记的 仅重置子属性: 与其他 子属性 一样,当未指定时,它会被速记重置为初始值, 但速记可能不包括将 子属性 设置为其任何其他值的语法。例如,border 速记将 border-image 重置为其初始值 none, 但没有语法将其设置为其他值。[css-backgrounds-3]

如果某个 速记 被指定为 CSS-全局关键字 之一 [css-values-3], 它将其所有的 子属性 设置为该关键字, 包括任何被 仅重置子属性。 (请注意,这些关键字不能与其他值组合在单个声明中,甚至在速记中也是如此。)

速记 属性声明为 !important 等同于将其所有 子属性 声明为 !important

3.1. 重置所有属性: all 属性

名称: all
值: initial | inherit | unset
初始值: 见各个属性
适用范围: 见各个属性
是否继承: 见各个属性
百分比: 见各个属性
计算值: 见各个属性
动画类型: 见各个属性
规范顺序: 按照语法

all 属性是一个速记属性,它会重置所有 CSS 属性, 除了directionunicode-bidi。 它仅接受CSS-全局关键字。 它不会重置自定义属性 [css-variables-1]

注意: 例外的 CSS 属性 directionunicode-bidi 实际上是标记级别的特性, 不应在作者的样式表中设置。 (它们作为 CSS 属性存在只是为了样式化用户代理不支持的文档语言。) 作者应使用适当的标记,例如 HTML 的 dir 属性。[css-writing-modes-3]

例如,如果作者在元素上指定 all: initial, 它将阻止所有继承并重置所有属性, 就像作者、用户或用户代理级别的级联中没有出现任何规则一样。

这对于包含在页面中的“小部件”的根元素非常有用, 它不希望继承外部页面的样式。 但是请注意,应用于该元素的任何“默认”样式 (例如,用户代理样式表在诸如 <div> 之类的块元素上的 display: block) 也会被移除。

4. 值处理

一旦用户代理解析了文档并构建了文档树, 它必须为树中的每个元素, 并相应地为格式化结构中的每个框, 分配一个适用于目标媒体类型的每个属性的值。

给定元素或框的 CSS 属性的最终值 是多步骤计算的结果:

  1. 首先,收集应用于元素的所有 声明值, 对于每个元素上的每个属性。 可能有零个或多个 声明值 应用于该元素。
  2. 层叠生成 层叠值。 每个元素每个属性至多有一个 层叠值
  3. 默认生成 指定值。 每个元素对于每个属性恰好有一个 指定值
  4. 解析值依赖关系生成 计算值。 每个元素对于每个属性恰好有一个 计算值
  5. 格式化文档生成 使用值。 只有当该属性适用于元素时,元素才会有该属性的 使用值
  6. 最后,根据显示环境的约束,将使用值转换为 实际值。 与 使用值 一样,某个元素的给定属性可能有或没有 实际值

4.1. 声明值

应用于某个元素的每个属性声明贡献了一个声明值, 该值与元素相关联。 有关详细信息,请参阅过滤声明

然后,这些值由级联处理,以选择一个“获胜值”。

4.2. 级联值

级联值 表示级联的结果: 它是通过级联获胜的 声明值 (在 级联输出 中排序最靠前的声明值)。 如果 级联输出 是一个空列表, 则没有 级联值

4.3. 指定值

定义为 指定值 的值是样式表作者为该元素意图设置的给定属性的值。 它是将 层叠值 经过 默认化 过程的结果, 确保每个元素的每个属性都有一个 指定值

在许多情况下,指定值层叠值。 然而,如果根本没有 层叠值指定值 将被 默认化。 当 层叠值 是属性的 CSS-wide 关键字 时,会特别处理, 将 指定值 设置为该关键字所要求的值, 详见 § 7.3 显式默认化

4.4. 计算值

计算值 是将 指定值 按照属性定义表中的“计算值”一行所定义的内容进行解析的结果, 通常是将其绝对化,为 继承 做准备。

注意: 计算值 是在 继承 过程中从父级传递给子级的值。 由于历史原因, 它不一定是 getComputedStyle() 函数返回的值, 该函数有时会返回 使用值[CSSOM] 此外,计算值 是一个抽象的数据表示: 它们的定义反映了数据表示, 而不是这些数据如何序列化。 例如,序列化规则通常允许省略在解析过程中隐含的某些值; 但这些值仍然是 计算值 的一部分。

一个 指定值 可以是绝对值(即,不相对于其他值,例如 red2mm) 或相对值(即,相对于其他值,例如 auto2em)。 计算相对值通常会将其绝对化:

请参阅下表中的示例 (f)、(g) 和 (h)。

注意: 一般来说,计算值指定值 解析到尽可能远的程度,而不需要布局文档 或执行其他昂贵或难以并行化的操作, 如解析网络请求 或从元素及其父元素以外检索值。

计算值 存在 即使该属性不适用。 但是,某些属性可能会根据属性是否适用于元素而更改其确定 计算值 的方式。

4.5. 使用值

使用值是获取 计算值并完成所有剩余计算以使其成为用于格式化文档的绝对理论值的结果。

例如,width: auto 的声明在不知道元素祖先的布局时无法解析为长度, 因此 计算值auto, 而 使用值是一个绝对长度,例如 100px[CSS2]

另一个例子是,一个<div>可能有一个计算的break-before值为auto, 但通过从其第一个子元素传播获取一个使用的 break-before 值为 page[css-break-3]

如果属性不 适用于这个元素或框 类型——如其“适用于”行中所述——则它对该类型的框或元素没有直接的格式化效果,因此该属性没有 使用值

例如,flex 属性在不是 flex 项目 的元素上没有 使用值

注意:一些不适用于某些元素或框的属性 仍然可能有间接的格式化效果: 它们的计算值可能会在计算其他对元素或框有影响的属性或单位时被考虑; 继承属性也经常在不适用的元素上设置, 以使其继承到适用的后代元素, 包括这些后代是匿名框的情况。
即使 writing-modetext-orientation 不适用于表格行, 在此类框上设置它们 仍会影响字体相对单位的计算,例如 ch, 因此可能会影响任何采用 <length> 的属性。
在 HTML 上设置 text-transform p 元素上(默认情况下,它是 display: block) 将产生影响, 即使 text-transform 仅适用于 内联框, 因为该属性会继承到段落的匿名 根内联框

注意: 定义为适用于“所有元素”的属性适用于所有元素和 显示类型, 但不一定适用于所有 伪元素 类型, 因为伪元素通常具有其特定的渲染模型或其他限制。 然而,::before::after 伪元素被定义为生成几乎与普通元素完全相同的盒子, 因此被定义为接受所有适用于“所有元素”的属性。 有关 伪元素 的更多信息,请参见 [CSS-PSEUDO-4]

4.6. 实际值

使用值原则上已经可以使用, 但用户代理可能无法在给定的环境中使用该值。例如, 用户代理可能只能渲染具有整数像素宽度的边框, 因此可能不得不近似 使用值 的宽度。 此外,可能需要根据字体的可用性或 font-size-adjust 属性的值调整元素的字体大小。 实际值 是在进行任何此类调整后得到的使用值。

注意: 通过探测元素的实际值, 可以学到很多关于文档布局的信息。 但是,并非所有信息都记录在实际值中。 例如,page-break-after 属性的实际值 不反映元素后是否有分页符。 同样,orphans 的实际值也不反映某个元素中有多少孤行。 请参阅 下表 中的示例 (j) 和 (k)。

4.7. 示例

CSS 值计算示例
属性 获胜声明 级联值 指定值 计算值 使用值 实际值
(a) text-align text-align: left left left left left left
(b) border-top-width, border-right-width, border-bottom-width, border-left-width border-width: inherit inherit 4.2px 4.2px 4.2px 4px
(c) width (none) (none) auto (初始值) auto 120px 120px
(d) list-style-position list-style-position: inherit inherit inside inside inside inside
(e) list-style-position list-style-position: initial initial outside (初始值) outside outside outside
(f) font-size font-size: 1.2em 1.2em 1.2em 14.1px 14.1px 14px
(g) width width: 80% 80% 80% 80% 354.2px 354px
(h) width width: auto auto auto auto 134px 134px
(i) height height: auto auto auto auto 176px 176px
(j) page-break-after (none) (none) auto (初始值) auto auto auto
(k) orphans orphans: 3 3 3 3 3 3

5. Filtering

为了找到声明值, 实现必须首先识别所有适用于每个元素的声明。 如果声明符合以下条件,则该声明适用于元素:

适用声明的值, 对每个元素的每个属性形成一个列表声明值。 下一节, 层叠, 优先级这些列表。

6. 层叠

层叠接收给定元素上给定属性的无序 声明值列表, 按如下所述的声明优先级对其进行排序, 并输出一个层叠值

6.1. 层叠排序顺序

层叠根据以下标准对声明进行排序, 按优先级递减:

来源和重要性
声明的来源基于其来源 以及其重要性, 是否使用了!important声明(见下文)。 不同来源的优先级从高到低排序如下:
  1. 过渡声明[css-transitions-1]
  2. 重要的 用户代理 声明
  3. 重要的 用户 声明
  4. 重要的 作者 声明
  5. 动画声明[css-animations-1]
  6. 普通的 作者 声明
  7. 普通的 用户 声明
  8. 普通的 用户代理 声明

此列表中较早的来源的声明优先于较晚 的来源声明。

特异性
选择器模块 [SELECT] 描述了如何计算选择器的特异性。 每个声明具有与其所在样式规则相同的特异性。 就此步骤而言, 不属于样式规则的声明 (例如样式属性的内容) 被认为具有高于任何选择器的特异性。 具有最高特异性的声明获胜。
出现顺序
文档顺序中的最后一个声明获胜。 为此目的:
  • 来自导入的样式表的声明被排序,就好像它们的样式表代替 @import规则一样。
  • 由原始文档独立链接的样式表中的声明 被视为按照链接顺序串联, 由宿主文档语言确定。
  • 样式属性中的声明 按样式属性出现的元素的文档顺序排序, 并且都放置在任何样式表之后。

层叠的输出是 每个元素的每个属性的声明值的一个(可能为空的)排序列表。

6.2. 层叠来源

每个样式规则都有一个层叠来源, 它决定了它在层叠中的位置。 CSS 定义了三个核心的来源

作者来源
作者根据文档语言的约定为源文档指定样式表。 例如,在 HTML 中, 样式表可以包含在文档中或外部链接。
用户来源
用户可以为特定文档指定样式信息。 例如,用户可以指定包含样式表的文件 或者用户代理可以提供生成用户样式表的界面 (或表现得像这样)。
用户代理来源
符合标准的用户代理必须应用默认样式表 (或表现得像这样)。 用户代理的默认样式表应以满足文档语言的常规展示期望的方式呈现文档语言的元素 (例如,对于视觉浏览器,HTML 中的 EM 元素使用斜体字呈现)。 参见例如HTML 用户代理样式表[HTML]

对 CSS 的扩展定义了以下其他来源

动画来源
CSS 动画[css-animations-1] 在运行时生成表示其效果的“虚拟”规则。
过渡来源
与 CSS 动画类似,CSS 过渡[css-transitions-1] 在运行时生成表示其效果的“虚拟”规则。

6.3. 重要声明:!important注解

CSS 尝试在作者和用户样式表之间建立一种平衡。 默认情况下,作者样式表中的规则优先于用户样式表中的规则, 用户样式表中的规则优先于用户代理的默认样式表中的规则。 为了平衡这一点,可以将声明标记为重要, 这会增加其在层叠中的权重并颠倒优先级顺序。

如果声明带有!important注解, 则该声明为重要 ,根据[css-syntax-3]定义, 即如果其值中的最后两个(非空白、非注释)标记 是分隔符标记!,后跟标识符标记important。 所有其他声明都是普通(非重要)。

[hidden] { display: none !important; }

重要声明优先于普通声明。 作者和用户样式表都可能包含重要声明, 其中用户来源 重要声明 优先于作者来源 重要声明。 该 CSS 功能通过为有特殊需求的用户 (大字体、颜色组合等) 提供对展示的控制,改善了文档的可访问性。

重要声明在所有来源中优先于动画。 这允许作者在重要情况下覆盖动画值。 (动画值通常优先于所有其他规则。)[css-animations-1]

用户代理样式表 也可能包含重要声明。 这些声明优先于所有作者用户声明。

以下示例中用户样式表中的第一个规则包含!important声明, 它覆盖了作者样式表中的相应声明。 由于标记为!important,第二个规则中的声明也将获胜。 但是,用户样式表中的第三个声明不是!important,因此将输给作者样式表中的第二条规则 (碰巧在简写属性上设置样式)。 此外,由于第二个声明为!important,因此第三个作者规则将输给第二个作者规则。 这表明!important声明在作者样式表中也有作用。
/* 用户样式表中的内容 */
p { text-indent: 1em !important }
p { font-style: italic !important }
p { font-size: 18pt }

/* 作者样式表中的内容 */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }
属性 获胜值
text-indent 1em
font-style italic
font-size 12pt
font-family sans-serif

6.4. 非CSS展示提示的优先级

UA 可以选择在源文档的标记中遵循展示提示, 例如s 元素中的bgcolor属性在[HTML]。 所有基于文档语言的样式必须转换为相应的CSS规则, 并作为UA来源规则进入层叠,或者 被视为具有零特异性的作者来源规则, 并放置在作者样式表的开始。 文档语言可以定义这样的展示提示是否 作为层叠的一部分进入, 作为UA来源作者来源; 如果是这样,UA必须相应地行为。 例如,[SVG11]将其展示属性映射到作者级别。

注意:作为层叠一部分进入的展示提示作为UA来源规则 可以被作者来源用户来源样式覆盖。 作为作者来源规则进入层叠的展示提示 可以被作者来源样式覆盖, 但不能被非重要的用户来源样式覆盖。 主机语言应在选择展示提示的适当来源时考虑这些因素。

7. 默认值

层叠没有产生结果时, 必须通过其他方式找到指定值继承属性从其父元素通过继承获取其默认值; 所有其他属性采用其初始值。 作者可以通过inheritinitial关键字显式地请求继承或初始化。

7.1. 初始值

每个属性都有一个初始值, 在属性的定义表中定义。 如果该属性不是继承属性, 且层叠未产生结果, 则该属性的指定值 为其初始值

7.2. 继承

继承将属性值从父元素传播到其子元素。 元素上某个属性的继承值 是其父元素上该属性的计算值。 对于根元素, 它没有父元素, 该属性的继承值为该属性的初始值

伪元素根据为每个伪元素描述的虚拟标签序列继承。[SELECT]

一些属性是继承属性, 如其属性定义表中所定义。 这意味着, 除非层叠产生了结果, 否则该值将由继承决定。

属性也可以显式继承。请参阅inherit关键字。

注意:继承遵循文档树,不会被 匿名框拦截, 或者受框树操作的影响。

7.3. 显式默认值

以下定义了几个CSS全局属性值; 声明属性具有这些值明确指定了特定的默认行为。 如CSS 值和单位第 3 级 [css-values-3]中规定, 所有 CSS 属性都可以接受这些值。

7.3.1. 重置属性:initial关键字

如果属性的层叠值initial关键字, 则该属性的指定值为其初始值

7.3.2. 显式继承:inherit关键字

如果属性的层叠值inherit关键字, 则该属性的指定值计算值继承值

7.3.3. 擦除所有声明:unset关键字

如果属性的 层叠值unset 关键字, 那么如果它是一个继承属性,这被视为 inherit, 而如果不是,则视为 initial。 该关键字有效地抹去之前在 声明值 中出现的所有值, 根据属性的适用性正确地继承或不继承 (或所有 简写属性 的长属性)。 这对于 层叠 来说是重要的。

8. 变更

8.1. 自2020年12月22日提议推荐版后的变更

2020年12月22日提议推荐版以来,本规范进行了以下更改:

8.2. 自2018年8月28日候选推荐版后的变更

2018年8月28日候选推荐版以来,本规范进行了以下更改:

8.3. 自2016年5月19日候选推荐版后的变更

2016年5月19日候选推荐版以来,进行了以下重要变更:

可用的意见处置

8.4. 自2013年10月3日候选推荐版后的变更

2013年10月3日候选推荐版以来,本规范进行了以下更改:

可用的意见处置

8.5. 自Level 2以来的新增功能

Level 2以来,新增了以下功能:

致谢

David Baron、Simon Sapin 和 Boris Zbarsky 对本规范做出了贡献。

隐私和安全考虑

一致性

文档约定

一致性要求以描述性声明和RFC 2119术语的结合形式表达。关键字“MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”和“OPTIONAL”在本规范的规范性部分中应按RFC 2119中描述的方式解释。 然而,为了可读性,这些词语在本规范中不以全大写字母出现。

本规范的所有文本都是规范性的,除非明确标记为非规范的部分、示例和注释。[RFC2119]

本规范中的示例以“例如”一词引入, 或者与规范性文本分开,使用class="example"设置, 例如:

这是一个信息性示例。

信息性注释以“注释”一词开头,并与规范性文本分开,使用class="note"设置,例如:

注释,这是一个信息性注释。

建议是规范性部分,旨在引起特别注意,并使用<strong class="advisement">与其他规范性文本分开,例如:用户代理必须提供一个可访问的替代方案。

一致性类别

本规范的一致性 定义了三个一致性类别:

样式表
CSS样式表
渲染器
用户代理,解释样式表的语义并渲染 使用它们的文档。
创作工具
用户代理,编写样式表。

样式表符合本规范 如果它的所有使用本模块定义的语法的语句都是有效的 根据通用CSS语法和每个功能的单独语法定义。

渲染器符合本规范 如果,在按照 适当的规范定义样式表,支持本规范定义的所有功能,通过正确解析它们 并相应地渲染文档。然而,由于设备限制,用户代理无法正确渲染文档 并不意味着用户代理不符合规范。(例如,用户代理不 需要在单色显示器上渲染颜色。)

创作工具符合本规范 如果它编写的样式表在语法上是正确的,根据 通用CSS语法和本模块中每个功能的单独语法,并符合样式表的所有其他一致性要求 如本模块中所述。

部分实现

为了让作者能够利用向前兼容的解析规则来 分配后备值,CSS渲染器必须将没有可用支持级别的 支持的任何@规则、属性、属性值、关键字 和其他语法结构视为无效(并适当地忽略)。 特别是,用户代理不得选择性地 忽略不支持的组件值并在单个 多值属性声明中采用支持的值:如果任何值被认为是无效的 (因为不支持的值必须是无效的),CSS要求忽略整个声明。

不稳定和专有功能的实现

为了避免与未来稳定的CSS功能发生冲突,CSS工作组建议遵循最佳实践来实现不稳定的功能和专有的CSS扩展

非实验性实现

一旦规范达到候选推荐阶段,就可以进行非实验性的实现,实施者应该发布任何符合规范的CR级功能的未加前缀的实现。

为了建立和保持CSS在各实现之间的互操作性,CSS工作组要求非实验性的CSS渲染器在发布任何CSS功能的未加前缀实现之前向W3C提交实现报告(如果有必要,还需提交用于该实现报告的测试用例)。提交给W3C的测试用例将由CSS工作组进行审核和修正。

关于提交测试用例和实现报告的进一步信息,可以在CSS工作组的网站上找到,网址为https://www.w3.org/Style/CSS/Test/。有问题请发邮件至public-css-testsuite@w3.org邮件列表。

索引

本规范定义的术语

引用定义的术语

参考文献

规范性引用

[CSS-ANIMATIONS-1]
Dean Jackson 等人. CSS 动画 第1级. 2018年10月11日. WD. URL: https://www.w3.org/TR/css-animations-1/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS 语法模块 第3级. 2019年7月16日. CR. URL: https://www.w3.org/TR/css-syntax-3/
[CSS-TRANSITIONS-1]
David Baron 等人. CSS 过渡. 2018年10月11日. WD. URL: https://www.w3.org/TR/css-transitions-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS 值与单位模块 第3级. 2019年6月6日. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VARIABLES-1]
Tab Atkins Jr.. CSS 自定义属性用于层叠变量模块 第1级. 2015年12月3日. CR. URL: https://www.w3.org/TR/css-variables-1/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS 书写模式 第3级. 2019年12月10日. REC. URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS2]
Bert Bos 等人. 层叠样式表 第2级修订1版 (CSS 2.1) 规范. 2011年6月7日. REC. URL: https://www.w3.org/TR/CSS21/
[css-conditional-3]
David Baron; Elika Etemad; Chris Lilley. CSS 条件规则模块 第3级. 2020年12月8日. CR. URL: https://www.w3.org/TR/css-conditional-3/
[FETCH]
Anne van Kesteren. Fetch 标准. 现行标准. URL: https://fetch.spec.whatwg.org/
[HTML]
Anne van Kesteren 等人. HTML 标准. 现行标准. URL: https://html.spec.whatwg.org/multipage/
[MEDIAQ]
Florian Rivoal; Tab Atkins Jr.. 媒体查询 第4级. 2020年7月21日. CR. URL: https://www.w3.org/TR/mediaqueries-4/
[RFC2119]
S. Bradner. 在 RFC 中表示需求级别的关键字. 1997年3月. 当前最佳实践. URL: https://tools.ietf.org/html/rfc2119
[SELECT]
Tantek Çelik 等人. 选择器 第3级. 2018年11月6日. REC. URL: https://www.w3.org/TR/selectors-3/
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr.. 选择器 第4级. 2018年11月21日. WD. URL: https://www.w3.org/TR/selectors-4/

资料性引用

[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS 盒子对齐模块 第3级. 2020年4月21日. WD. URL: https://www.w3.org/TR/css-align-3/
[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS 背景与边框模块 第3级. 2017年10月17日. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS 分段模块 第3级. 2018年12月4日. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS 分段模块 第4级. 2018年12月18日. WD. URL: https://www.w3.org/TR/css-break-4/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS 显示模块 第3级. 2020年12月18日. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-FLEXBOX-1]
Tab Atkins Jr.; 等人. CSS 弹性盒布局模块 第1级. 2018年11月19日. CR. URL: https://www.w3.org/TR/css-flexbox-1/
[CSS-FONTS-3]
John Daggett; Myles Maxfield; Chris Lilley. CSS 字体模块 第3级. 2018年9月20日. REC. URL: https://www.w3.org/TR/css-fonts-3/
[CSS-INLINE-3]
Dave Cramer; Elika Etemad; Steve Zilles. CSS 内联布局模块 第3级. 2020年8月27日. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr.. CSS 列表与计数器模块 第3级. 2020年11月17日. WD. URL: https://www.w3.org/TR/css-lists-3/
[CSS-PAGE-3]
Elika Etemad; Simon Sapin. CSS 分页媒体模块 第3级. 2018年10月18日. WD. URL: https://www.w3.org/TR/css-page-3/
[CSS-PSEUDO-4]
Daniel Glazman; Elika Etemad; Alan Stearns. CSS 伪元素模块 第4级. 2019年2月25日. WD. URL: https://www.w3.org/TR/css-pseudo-4/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS 盒子大小调整模块 第3级. 2020年12月18日. WD. URL: https://www.w3.org/TR/css-sizing-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS 文本模块 第3级. 2020年11月19日. WD. URL: https://www.w3.org/TR/css-text-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS 书写模式 第4级. 2019年7月30日. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSSOM]
Simon Pieters; Glenn Adams. CSS 对象模型 (CSSOM). 2016年3月17日. WD. URL: https://www.w3.org/TR/cssom-1/
[SVG11]
Erik Dahlström 等人. 可缩放矢量图形 (SVG) 1.1 (第二版). 2011年8月16日. REC. URL: https://www.w3.org/TR/SVG11/

属性索引

名称 初始值 适用范围 继承 百分比 动画类型 规范顺序 计算值
all initial | inherit | unset 见各属性 见各属性 见各属性 见各属性 见各属性 按语法 见各属性