1. 简介
CSS 的基本设计原则之一是 级联, 它允许多个样式表影响文档的呈现。 当不同的声明试图为同一个元素/属性组合设置值时, 必须以某种方式解决冲突。
当没有声明试图为元素/属性组合设置值时,会出现相反的问题。 在这种情况下,可以通过 继承 或查看属性的 初始值 来找到一个值。
级联 和 默认设置 过程 以一组声明作为输入, 并为每个元素的每个属性输出一个 指定值。
本文规范描述了在文档中为所有元素的所有属性找到指定值的规则。 在页面上下文及其边距框中找到指定值的规则在 [css-page-3] 中进行了描述。
1.1. 模块交互
本节是规范性的。
此模块替换并扩展了 [CSS2] 第六章中定义的分配属性值、级联和继承的规则。
其他 CSS 模块可能会扩展此处定义的一些语法和功能的定义。 例如,当与本模块结合使用时,媒体查询第四级规范 扩展了 <media-query> 值类型的定义,如本规范中所使用的。
2. 导入样式表: @import 规则
@import 规则允许用户从其他样式表导入样式规则。 如果 @import 规则引用了一个有效的样式表, 用户代理必须将样式表的内容视为在 @import 规则位置写入的内容, 但有两个例外:
-
如果一个特性 (例如 @namespace 规则)明确地 定义它仅适用于特定样式表, 而不适用于任何导入的样式表, 那么它不适用于导入的样式表。
-
如果一个特性依赖于样式表中两个或多个构造的相对顺序 (例如 @namespace 规则必须在任何其他规则之前,除非它们是 @import 规则), 那么它仅适用于同一样式表中的构造。
例如, 来自导入样式表的样式规则中的声明会与级联相互作用, 就像它们实际上是在 @import 规则处写入的一样。
任何 @import 规则必须位于样式表中所有其他有效的 at-规则和样式规则之前 (忽略 @charset),否则 @import 规则无效。 @import 的语法为:
@import [ <url> | <string> ] <media-query-list>? ;
其中 <url> 或 <string> 给出了要导入的样式表的 URL, 而可选的 <media-query-list>(导入条件) 指定了适用的条件。
如果提供了 <string>, 它必须被解释为具有相同值的 <url>。
@import "mystyle.css" ; @import url ( "mystyle.css" );
2.1. 条件 @import 规则
导入条件 允许导入依赖于媒体类型。 如果没有任何 导入条件,导入是无条件的。 (为 <media-query-list> 指定 all 会产生相同的效果。) 如果 导入条件 不匹配, 导入的样式表中的规则不适用, 就像导入的样式表被包裹在一个具有给定媒体查询的 @media 块中一样。
@import url ( "fineprint.css" ) print; @import url ( "bluish.css" ) projection, tv; @import url ( "narrow.css" ) handheld and( max-width:400 px );
因此,只要媒体查询不匹配,用户代理可以避免获取依赖于媒体的导入。
导入条件 的评估和完整语法由 媒体查询 规范 [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 设置了背景图像。
h1{ font-weight : bold; font-size : 12 pt ; line-height : 14 pt ; font-family : Helvetica; font-variant : normal; font-style : normal; }
因此可以重写为
h1{ font : bold12 pt /14 pt Helvetica}
在某些情况下,速记 可能具有不同的语法 或特殊关键字, 它们不直接对应其 子属性 的值。 (在这种情况下,速记 将明确定义其值的扩展。)
在其他情况下,某个属性可能是速记的 仅重置子属性: 与其他 子属性 一样,当未指定时,它会被速记重置为初始值, 但速记可能不包括将 子属性 设置为其任何其他值的语法。例如,border 速记将 border-image 重置为其初始值 none, 但没有语法将其设置为其他值。[css-backgrounds-3]
如果某个 速记 被指定为 CSS-全局关键字 之一 [css-values-3], 它将其所有的 子属性 设置为该关键字, 包括任何被 仅重置子属性。 (请注意,这些关键字不能与其他值组合在单个声明中,甚至在速记中也是如此。)
将 速记 属性声明为 !important 等同于将其所有 子属性 声明为 !important。
3.1. 重置所有属性: all 属性
名称: | all |
---|---|
值: | initial | inherit | unset |
初始值: | 见各个属性 |
适用范围: | 见各个属性 |
是否继承: | 见各个属性 |
百分比: | 见各个属性 |
计算值: | 见各个属性 |
动画类型: | 见各个属性 |
规范顺序: | 按照语法 |
all 属性是一个速记属性,它会重置所有 CSS 属性, 除了direction 和 unicode-bidi。 它仅接受CSS-全局关键字。 它不会重置自定义属性 [css-variables-1]。
注意: 例外的 CSS 属性 direction 和 unicode-bidi 实际上是标记级别的特性,
不应在作者的样式表中设置。
(它们作为 CSS 属性存在只是为了样式化用户代理不支持的文档语言。)
作者应使用适当的标记,例如 HTML 的 dir
属性。[css-writing-modes-3]
这对于包含在页面中的“小部件”的根元素非常有用,
它不希望继承外部页面的样式。
但是请注意,应用于该元素的任何“默认”样式
(例如,用户代理样式表在诸如 <div>
之类的块元素上的 display:
block)
也会被移除。
4. 值处理
一旦用户代理解析了文档并构建了文档树, 它必须为树中的每个元素, 并相应地为格式化结构中的每个框, 分配一个适用于目标媒体类型的每个属性的值。
给定元素或框的 CSS 属性的最终值 是多步骤计算的结果:
- 首先,收集应用于元素的所有 声明值, 每个元素的每个属性都有可能应用零个或多个 声明值。
- 级联生成 级联值。 每个元素的每个属性最多只有一个 级联值。
- 默认生成 指定值。 每个元素的每个属性都有且只有一个 指定值。
- 解决值依赖关系生成 计算值。 每个元素的每个属性都有且只有一个 计算值。
- 格式化文档生成 使用值。 某个属性仅在该属性适用于该元素时才具有 使用值。
- 最后,根据显示环境的限制将使用值转换为 实际值。 与 使用值 类似,元素上的某个属性可能有也可能没有 实际值。
4.1. 声明值
应用于某个元素的每个属性声明贡献了一个声明值, 该值与元素相关联。 有关详细信息,请参阅过滤声明。
然后,这些值由级联处理,以选择一个“获胜值”。
4.2. 级联值
级联值 表示级联的结果: 它是通过级联获胜的 声明值 (在 级联输出 中排序最靠前的声明值)。 如果 级联输出 是一个空列表, 则没有 级联值。
4.3. 指定值
指定值 是样式表作者为该元素设置的给定属性的值。 它是将 级联值 通过 默认 处理后的结果, 保证每个元素的每个属性都有一个 指定值。
在许多情况下,指定值 就是 级联值。 但是,如果没有 级联值, 则 指定值 是 默认的。 当 CSS-全局关键字是某个属性的 级联值 时,这些关键字会被特殊处理, 按照该关键字的要求设置 指定值, 请参阅§ 7.3 显式默认。
4.4. 计算值
计算值 是将 指定值 按照属性定义表中的“计算值”一行所定义的内容进行解析的结果, 通常是将其绝对化,为 继承 做准备。
注意: 计算值 是在 继承 过程中从父级传递给子级的值。
由于历史原因,
它不一定是 getComputedStyle()
函数返回的值,
该函数有时会返回 使用值。
[CSSOM] 此外,计算值
是一个抽象的数据表示:
它们的定义反映了数据表示,
而不是这些数据如何序列化。
例如,序列化规则通常允许省略在解析过程中隐含的某些值;
但这些值仍然是 计算值 的一部分。
- 具有相对单位的值 (em、ex、vh、vw) 必须通过与适当的参考大小相乘来使其绝对化
- 某些关键字 (例如 smaller、bolder) 必须根据其定义进行替换
- 某些属性上的百分比必须乘以一个参考值 (由属性定义)
- 有效的相对 URL 必须解析为绝对 URL。
请参阅下表中的示例 (f)、(g) 和 (h)。
注意: 一般来说,计算值 将 指定值 解析到尽可能远的程度,而不需要布局文档 或执行其他昂贵或难以并行化的操作, 如解析网络请求 或从元素及其父元素以外检索值。
计算值 存在 即使该属性不适用。 但是,某些属性可能会根据属性是否适用于元素而更改其确定 计算值 的方式。
4.5. 使用值
使用值是获取 计算值并完成所有剩余计算以使其成为用于格式化文档的绝对理论值的结果。
例如,width: auto 的声明在不知道元素祖先的布局时无法解析为长度, 因此 计算值是 auto, 而 使用值是一个绝对长度,例如 100px。[CSS2]
另一个例子是,一个<div>
可能有一个计算的break-before值为auto,
但通过从其第一个子元素传播获取一个使用的 break-before 值为 page。[css-break-3]
如果属性不 适用于这个元素或框 类型——如其“适用于”行中所述——则它对该类型的框或元素没有直接的格式化效果,因此该属性没有 使用值。
例如,flex 属性在不是 flex 项目 的元素上没有 使用值。
p
元素上(默认情况下,它是 display: block)
将产生影响,
即使 text-transform 仅适用于 内联框,
因为该属性会继承到段落的匿名 根内联框。
注意: 定义为“适用于所有元素”的属性 适用于所有元素和 display 类型, 但不一定适用于所有 伪元素 类型, 因为伪元素通常有自己特定的渲染模型 或其他限制。 然而,::before 和 ::after 伪元素被定义为几乎完全像普通元素一样生成框, 因此被定义为接受适用于“所有元素”的所有属性。 有关伪元素的更多信息,请参阅[CSS-PSEUDO-4]。
4.6. 实际值
使用值原则上已经可以使用, 但用户代理可能无法在给定的环境中使用该值。例如, 用户代理可能只能渲染具有整数像素宽度的边框, 因此可能不得不近似 使用值 的宽度。 此外,可能需要根据字体的可用性或 font-size-adjust 属性的值调整元素的字体大小。 实际值 是在进行任何此类调整后得到的使用值。
注意: 通过探测元素的实际值, 可以学到很多关于文档布局的信息。 但是,并非所有信息都记录在实际值中。 例如,page-break-after 属性的实际值 不反映元素后是否有分页符。 同样,orphans 的实际值也不反映某个元素中有多少孤行。 请参阅 下表 中的示例 (j) 和 (k)。
4.7. 示例
属性 | 获胜声明 | 级联值 | 指定值 | 计算值 | 使用值 | 实际值 | |
---|---|---|---|---|---|---|---|
(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
为了找到声明值, 实现必须首先识别所有适用于每个元素的声明。 如果声明符合以下条件,则该声明适用于元素:
- 它属于当前适用于该文档的样式表。
- 它没有被条件规则[CSS-CONDITIONAL-3]的错误条件限定。
- 它属于选择器与元素匹配的样式规则。[SELECT]
- 它在语法上是有效的: 声明的属性是已知的属性名称, 并且声明的值与该属性的语法匹配。
适用声明的值, 对每个元素的每个属性形成一个列表声明值。 下一节, 层叠, 优先级这些列表。
6. 层叠
层叠接收给定元素上给定属性的无序 声明值列表, 按如下所述的声明优先级对其进行排序, 并输出一个层叠值。
6.1. 层叠排序顺序
层叠根据以下标准对声明进行排序, 按优先级递减:
- 来源和重要性
-
声明的来源基于其来源
以及其重要性,
是否使用了!important声明(见下文)。
不同来源的优先级从高到低排序如下:
- 过渡声明[css-transitions-1]
- 重要的 用户代理 声明
- 重要的 用户 声明
- 重要的 作者 声明
- 动画声明[css-animations-1]
- 普通的 作者 声明
- 普通的 用户 声明
- 普通的 用户代理 声明
此列表中较早的来源的声明优先于较晚 的来源声明。
- 特异性
- 选择器模块 [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。 所有其他声明都是普通(非重要)。
重要声明优先于普通声明。 作者和用户样式表都可能包含重要声明, 其中用户来源 重要声明 优先于作者来源 重要声明。 该 CSS 功能通过为有特殊需求的用户 (大字体、颜色组合等) 提供对展示的控制,改善了文档的可访问性。
重要声明在所有来源中优先于动画。 这允许作者在重要情况下覆盖动画值。 (动画值通常优先于所有其他规则。)[css-animations-1]
用户代理样式表 也可能包含重要声明。 这些声明优先于所有作者和用户声明。
/* 用户样式表中的内容 */ p{ text-indent : 1 em !important} p{ font-style : italic !important} p{ font-size : 18 pt } /* 作者样式表中的内容 */ p{ text-indent : 1.5 em !important} p{ font : normal12 pt sans-serif !important} p{ font-size : 24 pt }
属性 | 获胜值 |
---|---|
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. 默认值
当层叠没有产生结果时, 必须通过其他方式找到指定值。继承属性从其父元素通过继承获取其默认值; 所有其他属性采用其初始值。 作者可以通过inherit和initial关键字显式地请求继承或初始化。
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日提议推荐版以来,本规范进行了以下更改:
- 修正了一个拼写错误
- 更新了W3C推荐标准的状态和样式
8.2. 自2018年8月28日候选推荐版后的变更
自2018年8月28日候选推荐版以来,本规范进行了以下更改:
8.3. 自2016年5月19日候选推荐版后的变更
自2016年5月19日候选推荐版以来,进行了以下重要变更:
-
澄清了自定义属性不会被all简写重置。
(2518)
all属性是一个简写属性,重置 所有CSS属性,除了direction和unicode-bidi。 … 它不会重置自定义属性[css-variables-1]。
-
指出了导入样式表与仅插入其内容之间的两个例外情况。
如果@import规则引用了一个有效的样式表, 用户代理必须将样式表的内容视为如果它们是直接写在@import规则位置, 有两个例外:
- 如果某个特性 (例如@namespace规则)明确规定仅适用于特定样式表, 而不适用于任何导入的样式表, 那么它不适用于导入的样式表。
- 如果某个特性依赖于样式表中两个或多个结构之间的相对顺序 (例如@charset必须不在任何其他内容之前), 那么它仅适用于同一样式表中的结构之间。
- 移除了对作用域样式表的所有提及, 因为该特性已从HTML中移除。 (Issue 637)
- 移除了对已废弃的“覆盖”来源的提及, 最初由DOM Level 2 Style定义,后被放弃。
可用的意见处置。
8.4. 自2013年10月3日候选推荐版后的变更
自2013年10月3日候选推荐版以来,本规范进行了以下更改:
-
定义了导入样式表的环境编码。
导入样式表的环境编码 是导入它的样式表的编码。[css-syntax-3]
-
引用了[css-syntax-3]的语法用于!important规则。
声明是重要的,如果它有!important标注, 如[css-syntax-3]中定义 。
-
解释了仅重置的子属性并澄清了它们在简写声明中被CSS全局关键字值影响的情况。
在其他情况下,属性可能是简写的仅重置的子属性: 像其他子属性一样, 它在未指定时被简写重置为其初始值, 但简写可能不包含设置子属性为其其他值的语法。 例如,border简写将border-image重置为其初始值none, 但没有设置它为其他值的语法。[css-backgrounds-3]
如果简写被指定为CSS全局关键字之一[css-values-3], 它将所有子属性设置为该关键字, 包括任何仅重置的子属性 。 (注意,这些关键字不能与其他值组合在一个声明中,甚至在简写中也不行。)
可用的意见处置。
8.5. 自Level 2以来的新增功能
自Level 2以来,新增了以下功能:
致谢
David Baron、Simon Sapin 和 Boris Zbarsky 对本规范做出了贡献。
隐私和安全考虑
-
层叠过程不区分同源和跨域样式表, 使得可以从它们应用于文档的计算样式中推断出跨域样式表的内容。
-
通过应用样式规则表达的用户偏好和用户代理默认值 通过层叠过程暴露, 并且可以从它们应用于文档的计算样式中推断出来。
-
@import规则假定没有
Content-Type
元数据(或者如果主机文档处于怪癖模式下的任何同源文件) 是text/css
, 可能允许任意文件被导入页面 并解释为CSS, 可能允许从它们应用于文档的计算样式中推断敏感数据。
一致性
文档约定
一致性要求以描述性声明和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邮件列表。
索引
本规范定义的术语
- 实际值,见 §4.6
- all,见 §3.1
- 动画来源,见 §6.2
- 适用于,见 §4.5
- 适用对象,见 §4.5
- 作者来源,见 §6.2
- 作者来源,见 §6.2
- 作者样式表,见 §6.2
- 级联,见 §6
- 级联值,见 §4.2
- 级联来源,见 §6.2
- 计算值,见 §4.4
- 声明值,见 §4.1
- @import,见 §2
- 重要声明,见 §6.3
- 导入条件,见 §2
- 继承
- 继承,见 §7.2
- 继承属性,见 §7.2
- 继承值,见 §7.2
- 初始,见 §7.3.1
- 初始值,见 §7.1
- 长手,见 §3
- 长手属性,见 §3
- 正常,见 §6.3
- 来源,见 §6.2
- 级联输出,见 §6.1
- 仅重置子属性,见 §3
- 简写,见 §3
- 简写属性,见 §3
- 指定值,见 §4.3
- 子属性,见 §3
- 过渡来源,见 §6.2
- 用户代理来源,见 §6.2
- UA来源,见 §6.2
- UA样式表,见 §6.2
- 未设置,见 §7.3.3
- 使用值,见 §4.5
- 用户代理来源,见 §6.2
- 用户代理样式表,见 §6.2
- 用户来源,见 §6.2
- 用户来源,见 §6.2
- 用户样式表,见 §6.2
引用定义的术语
-
[css-align-3] 定义了以下术语:
- auto
-
[css-backgrounds-3] 定义了以下术语:
- background
- background-color
- background-image
- border
- border-bottom-width
- border-image
- border-left-width
- border-right-width
- border-top-width
-
[css-break-3] 定义了以下术语:
- break-before
- orphans
-
[css-break-4] 定义了以下术语:
- page
-
[css-display-3] 定义了以下术语:
- display type
- inline box
-
[css-flexbox-1] 定义了以下术语:
- flex
- flex item
-
[css-fonts-3] 定义了以下术语:
- font
- font-family
- font-size
- font-size-adjust
- font-style
- font-variant
- font-weight
-
[css-inline-3] 定义了以下术语:
- root inline box
-
[css-lists-3] 定义了以下术语:
- list-style-position
-
[CSS-PSEUDO-4] 定义了以下术语:
- ::after
- ::before
-
[css-sizing-3] 定义了以下术语:
- height
- width
-
[css-syntax-3] 定义了以下术语:
- @charset
- environment encoding
-
[css-text-3] 定义了以下术语:
- text-align
- text-indent
- text-transform
-
[css-values-3] 定义了以下术语:
- <length>
- <string>
- <url>
- ?
- ch
- css-wide keywords
- em
- ex
- url()
- vh
- vw
- |
-
[css-variables-1] 定义了以下术语:
- custom property
-
[css-writing-modes-3] 定义了以下术语:
- direction
- unicode-bidi
-
[css-writing-modes-4] 定义了以下术语:
- text-orientation
- writing-mode
-
[CSS2] 定义了以下术语:
- bolder
- display
- italic
- line-height
- page-break-after
- red
- sans-serif
-
[css-conditional-3] 定义了以下术语:
- @media
-
[CSSOM] 定义了以下术语:
- getComputedStyle(elt)
-
[FETCH] 定义了以下术语:
- cors protocol
-
[HTML] 定义了以下术语:
- p
- s
-
[MEDIAQ] 定义了以下术语:
- <media-query-list>
- <media-query>
-
[selectors-4] 定义了以下术语:
- pseudo-element
参考文献
规范性引用
- [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 | 见各属性 | 见各属性 | 见各属性 | 见各属性 | 见各属性 | 按语法 | 见各属性 |