CSS2.1 设定属性值，级联和继承

6 Assigning property values, Cascading, and Inheritance 设定属性值，级联和继承 6.1 Specified, computed, and actual values 指定值，计算值和真实值 Once a user agent has parsed a document and constructed a document tree, it must assign, for every element in the tree, a value to every property that applies to the target media type. 一旦浏览器解析某个文档并生成了一个文档树，它会为文档树中的每个元素的每个属性分配一个值来应用到目标媒体类型上。 The final value of a property is the result of a four-step calculation: the value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value"). 一个属性的最终值分四个步骤来计算：首先该值通过规范来指定（指定值），然后将其转换为一个用来继承的值（计算值），如果需要还会将其转变为一个绝对值（使用值），最后将根据本地环境的相关因素转换为最终值（真实值）。 6.1.1 Specified values 指定值 User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence): 首先，浏览器会根据下面几个机制为每个属性分配指定值（特殊性按先后顺序）：

1. If the cascade results in a value, use it. 如果级联的结果是一个值，那么就使用这个值作为指定值。
2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element. 另外，如果一个元素的某个属性是继承过来的且这个元素不是文档树的根元素，那么就使用其父元素的计算值作为指定值。
3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition. 否则就使用该属性的初始值作为指定值。每个属性的初始值都会在属性定义时指定。

6.1.2 Computed values 计算值 Specified values are resolved to computed values during the cascade; for example URIs are made absolute and 'em' and 'ex' units are computed to pixel or absolute lengths. Computing a value never requires the user agent to render the document. 在级联过程下，指定值由计算值决定；例如绝对URIs的'em' 和 'ex'单位将被计算成像素或者绝对长度。计算一个值不需要浏览器渲染文档。 The computed value of URIs that the UA cannot resolve to absolute URIs is the specified value. 浏览器不能解决的绝对URIs的计算值就是其指定值。 When the specified value is not 'inherit', the computed value of a property is determined as specified by the Computed Value line in the definition of the property. See the section on inheritance for the definition of computed values when the specified value is 'inherit'. 当某个属性的指定值不是继承自其祖先元素时，它的计算值将取决于该属性定义中关于计算值的相关说明。当指定值继承自其祖先元素，请查阅这章inheritance中关于计算值的定义。 The computed value exists even when the property does not apply, as defined by the 'Applies To' line. However, some properties may define the computed value of a property for an element to depend on whether the property applies to that element. 就像'Applies To'中定义的那样，即使某个属性没有应用到元素上，它的计算值依然存在。然而，一些属性可能会根据某属性是否应用到某元素上来定义这个属性的计算值。 6.1.3 Used values 使用值 Computed values are processed as far as possible without formatting the document. Some values, however, can only be determined when the document is being laid out. For example, if the width of an element is set to be a certain percentage of its containing block, the width cannot be determined until the width of the containing block has been determined. The used value is the result of taking the computed value and resolving any remaining dependencies into an absolute value. 计算值是尽可能在文档没有格式化之前进行处理的。然而一些值只能在文档布局时来决定。例如，如果一个元素的宽度设置为其包含块的某个百分比，那么在其包含块的宽度没有决定之前，它的宽度也是决定不了的。使用值就是结合计算值和解析的其他相关因素所转换出来的一个绝对值。 6.1.4 Actual values 真实值 A used value is in principle the value used for rendering, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades instead of full color. The actual value is the used value after any approximations have been applied. 一般使用值就是渲染页面所用的值，但是一个浏览器可能在给定的环境中不能够使用这个值。例如，浏览器在只能够使用整数格式的像素宽度来渲染边框，因此可能会取非整数计算值的近似值，或者，浏览器可能会强制使用黑色或者白色来替代全色。真实值就是某些经过近似计算的应用值。 6.2 Inheritance 继承 Some values are inherited by the children of an element in the document tree, as described above. Each property defines whether it is inherited or not. 就像上面描述的，在文档树中，一个元素的子元素将会继承其父元素的一些属性值。每个属性都会定义其是否可以被继承。 Suppose there is an H1 element with an emphasizing element (EM) inside: 假设有一个内部含有EM元素的H1元素： <H1>The headline <EM>is</EM> important!</H1> If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent element, so if H1 has the color blue, the EM element will likewise be in blue. 如果EM元素没有指定颜色，该元素将继承其父元素的颜色值，因此如果H1元素的颜色是蓝色，那么EM元素的颜色也为蓝色。 When inheritance occurs, elements inherit computed values. The computed value from the parent element becomes both the specified value and the computed value on the child. 当发生继承时，元素将继承计算值。父元素的计算值将成为其子元素的指定值及计算值。 Example(s): For example, given the following style sheet: 例如，给出下面的样式： body { font-size: 10pt } h1 { font-size: 130% } and this document fragment: 和下面的文档片段： <BODY> <H1>A <EM>large</EM> heading</H1> </BODY> the 'font-size' property for the H1 element will have the computed value '13pt' (130% times 10pt, the parent's value). Since the computed value of 'font-size' is inherited, the EM element will have the computed value '13pt' as well. If the user agent does not have the 13pt font available, the actual value of 'font-size' for both H1 and EM might be, for example, '12pt'. H1元素的'font-size'属性的计算值是'13pt'(130% 乘以 10pt, 10pt是其父元素的字体大小)。因为'font-size'得计算值被继承了，所以EM元素的计算值也是'13pt'。如果浏览器认为13pt无效，那么'font-size'的H1和EM元素的真实值可能是其他值，例如'12pt'。 Note that inheritance follows the document tree and is not intercepted by anonymous boxes. 注意文档树中的继承将不会被匿名盒子截断。 6.2.1 The 'inherit' value 继承值 Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent. The 'inherit' value can be used to strengthen inherited values, and it can also be used on properties that are not normally inherited. 每一个属性都会拥有一个指定的'inherit'值，也就是说，对于一个元素和其父元素的统一属性计算值是相同的。'inherit'值可以强化某些继承的值，它一般用在非正常继承的属性上。 If the 'inherit' value is set on the root element, the property is assigned its initial value. 如果'inherit'值用在根元素上，它的值等于其初始值。 Example(s): In the example below, the 'color' and 'background' properties are set on the BODY element. On all other elements, the 'color' value will be inherited and the background will be transparent. If these rules are part of the user's style sheet, black text on a white background will be enforced throughout the document. 在下面的例子中，'color' 和 'background'属性设置在了BODY元素上。其他元素的'color'将继承自BODY元素，而背景色为透明。如果这些规则使一个用户样式的一部分，很色的字体和白色的背景将贯穿这个文档。 body { color: black !important; background: white !important; } * { color: inherit !important; background: transparent !important; } 6.3 The @import rule @import规则 The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present). See the section on parsing for when user agents must ignore @import rules. The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it. '@import'允许用户从其他样式文件中导入样式。在CSS2.1中， @import规则应该在任何其他规则之前（除了@charset规则）。对于浏览器忽略@import的情况，请查看section on parsing。'@import'关键字后面必须跟随包含样式文件的URI。允许使用字符串；此时浏览器将其当做url(...)形式（括号内为字符串）。 Example(s): The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and one with a bare string): 下面两个行代码意思相同，都是'@import'的语法（一个使用"url()"，一个使用字符串形式）： @import "mystyle.css"; @import url("mystyle.css"); So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI. 为了避免浏览器检索不能支持的设备，作者需要定义可支持设备的@import规则。这些条件可以通过在URI后指定以逗号分隔的媒体类型来表示。 Example(s): The following rules illustrate how @import rules can be made media-dependent: 下面的规则说明了@import规则怎么指定媒体类型。 @import url("fineprint.css") print; @import url("bluish.css") projection, tv; In the absence of any media types, the import is unconditional. Specifying 'all' for the medium has the same effect. The import only takes effect if the target medium matches the media list. 如果没有指定的媒体类型，@import将没有任何限制。如果设置为'all',效果一样。导入只会在匹配的媒体类型上执行。 A target medium matches a media list if one of the items in the media list is the target medium or 'all'. 如果目标媒体类型是媒体类型列表中一个或者列表媒体类型设置为'all'，那么目标媒体匹配这个@import规则。 Note that Media Queries [MEDIAQ] extends the syntax of media lists and the definition of matching. 说明：媒体类型的查询[MEDIAQ]扩展自媒体列表的语法和匹配的定义。 When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to a separate style sheet. 当同一个样式文件没文档多个地方引用或导入，浏览器会把每个样式文件当做一个独立文件来处理（或者与他们想要做的一样）。 6.4 The cascade 级联 Style sheets may have three different origins: author, user, and user agent. 样式表有三个来源：作者，用户和浏览器。

• Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally. 作者：作者会根据文档语言的相关约定为源文档指定样式。例如，在HTML中，样式可以包含在文档内部或者外部样式文件中。
• User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did). 用户：用户可以为某个特定的文档指定样式信息。例如，用户可以指定一个包含样式的文件或者浏览器提供给一个接口来生成一个用户样式。
• User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents. 浏览器：标准浏览器都会有一个默认的样式。一个浏览器的默认样式应该使其文档中元素的表现符合该文档语言的一般描述。（举例来说，对于可视化浏览器,HTML中的EM元素字体表现为斜体）。对于HTML文档的标准默认样式，请查看A sample style sheet for HTML 。

Note that the user may modify system settings (e.g., system colors) that affect the default style sheet. However, some user agent implementations make it impossible to change the values in the default style sheet. 说明：用户可以修改系统设定（例如，系统的颜色），这将会影响到默认样式。然而，一个浏览器可能会不允许用户修改默认样式。 Style sheets from these three origins will overlap in scope, and they interact according to the cascade. 这个三个来源的样式将会发生重叠，它们根据级联关系互相影响。 The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. CSS级联为每一个样式规则分配一个权值。当同时应用几条规则时，权值越大特殊性越高。 By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style sheet. 默认情况下，作者定义的样式权值高于用户定义的。然而，当应用"!important"规则是，特殊性顺序会颠倒。所有用户和作者定义的样式权值都高浏览器的默认样式。 6.4.1 Cascading order 级联顺序 To find the value for an element/property combination, user agents must apply the following sorting order: 浏览器按照以下顺序来查找某个组合元素或属性的值：

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached. 对于目标媒体类型，查找相关元素和属性上的所有声明。
2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: 根据重要性（普通的和重要）和来源（作者，用户或浏览器）进行排序。特殊性按照升序顺序排列：
   1. user agent declarations  浏览器声明
   2. user normal declarations 用户普通声明
   3. author normal declarations 作者普通声明
   4. author important declarations 作者重要声明
   5. user important declarations 用户重要声明
3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. 有相同重要性和来源的规则按照选择器的特殊性来排序:特殊性高的选择器会覆盖普通选择器。伪元素和伪类分别被当做普通元素和普通类。
4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. 最后，按照指定顺序排序：如果两个声明有相同的权值，来源和特异性，最晚定义的声明有效。导入的样式被认为在当前文件的所有样式声明之前。

Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. User agents must give the user the ability to turn off the influence of specific author style sheets, e.g., through a pull-down menu. Conformance to UAAG 1.0 checkpoint 4.14 satisfies this condition [UAAG10]. 尽量不要使用"!important"设置单个声明,因为这个策略会给作者的样式分配更高的特殊性。浏览器必须让用户有能力来改变某些特殊的作者样式，例如下拉菜单。与UAAG 1.0 4.14 [UAAG10]保持一致性。 6.4.2 !important rules !important规则 CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3). CSS试图使作者样式和用户样式之间能够相互平衡。默认情况下，作者的样式会覆盖用户样式（查看级联规则3）。 However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation. 然而，一个带有"!important"声明(有"!"和关键词"important"紧随声明之后)的特殊性要高于普通的声明。作者和用户的声明都可以使用"!important"，用户的"!important"声明会覆盖作者的"!important"声明。这个CSS特性改善了文档的易用性，有某些特殊要求（大的字体，组合颜色，等等）的用户也可以通过这个特性来控制某个元素的外观。 Declaring a shorthand property (e.g., 'background') to be "!important" is equivalent to declaring all of its sub-properties to be "!important". 在简写属性上使用"!important"与在其所有子属性上使用"!important"等价。 Example(s): The first rule in the user's style sheet in the following example contains an "!important" declaration, which overrides the corresponding declaration in the author's style sheet. The second declaration will also win due to being marked "!important". However, the third rule in the user's style sheet is not "!important" and will therefore lose to the second rule in the author's style sheet (which happens to set style on a shorthand property). Also, the third author rule will lose to the second author rule since the second rule is "!important". This shows that "!important" declarations have a function also within author style sheets. 下面包含"!important"声明的例子中，用户样式的第一个规则会覆盖响应的作者规则。由于第二条规则也标记了"!important"，所以效果同上一个一样。然而第三条没有标记"!important"的用户规则将不会覆盖作者样式的第二条规则（使用了简写属性设置样式）。作者样式的第三条规则也不会覆盖它的第二条规则，因为第二条是"!important"规则。这说明了在作者样式中"!important"规则同样生效。 /* From the user's style sheet */ p { text-indent: 1em ! important } p { font-style: italic ! important } p { font-size: 18pt } /* From the author's style sheet */ p { text-indent: 1.5em !important } p { font: normal 12pt sans-serif !important } p { font-size: 24pt } 6.4.3 Calculating a selector's specificity 计算选择器的特殊性 A selector's specificity is calculated as follows: 一个选择器的特殊性按照下面的方式来计算：

• count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) 如果一个声明来自style而不是选择器，将其计算为1，其他情况计算为0（=a）（在HTML中，元素style属性的值为该元素样式规则。这些规则没有选择器，因此 a=1, b=0, c=0, d=0）。
• count the number of ID attributes in the selector (= b) 计算选择器中ID的个数（=b）
• count the number of other attributes and pseudo-classes in the selector (= c) 计算选择器中除ID外的其他属性和伪类的个数（=c）
• count the number of element names and pseudo-elements in the selector (= d) 计算选择器中的元素名称及伪元素的个数（=d）。

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. 特殊性是以选择器形态为基础的。尤其是当选择器为"[id=p33]"形态时，它将被做为属性选择器（a=0, b=0, c=1, d=0）,即使在源文档的DTD中id属性定义为"ID"。 Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity. 把这四个数字连到一起就给出了元素的特殊性。 Example(s): Some examples: 例如： *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ <HEAD> <STYLE> #x97z { color: red } </STYLE> </HEAD> <BODY> <P style="color: green"> </BODY> In the above example, the color of the P element would be green. The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity. 上面的例子中，P元素的颜色将为绿色。因为级联规则3,style属性的特殊性高于id选择器，所以Style属性的声明的样式将会覆盖STYLE中的声明的样式 。 6.4.4 Precedence of non-CSS presentational hints 非CSS隐式呈现属性的优先级 The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets. 在HTML源文档中，浏览器可能会选择优先呈现一些属性。此时，这些属性将被转换为相应特殊性为0的CSS规则，并且被当做好像插入到了作者样式的起始位置。这些规则可能会被后面的规则所覆盖。在转换阶段，这个策略使这些格式的属性与样式表更容易共存。 For HTML, any attribute that is not in the following list should be considered presentational: abbr, accept-charset, accept, accesskey, action, alt, archive, axis, charset, checked, cite, class, classid, code, codebase, codetype, colspan, coords, data, datetime, declare, defer, dir, disabled, enctype, for, headers, href, hreflang, http-equiv, id, ismap, label, lang, language, longdesc, maxlength, media, method, multiple, name, nohref, object, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, onunload, profile, prompt, readonly, rel, rev, rowspan, scheme, scope, selected, shape, span, src, standby, start, style, summary, title, type (except on LI, OL and UL elements), usemap, value, valuetype, version. 对于HTML中不在下面列表中的属性，都被认为呈现属性：abbr, accept-charset, accept, accesskey, action, alt, archive, axis, charset, checked, cite, class, classid, code, codebase, codetype, colspan, coords, data, datetime, declare, defer, dir, disabled, enctype, for, headers, href, hreflang, http-equiv, id, ismap, label, lang, language, longdesc, maxlength, media, method, multiple, name, nohref, object, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, onunload, profile, prompt, readonly, rel, rev, rowspan, scheme, scope, selected, shape, span, src, standby, start, style, summary, title, type (除了应用在 LI, OL 和 UL 元素上), usemap, value, valuetype, version。 For other languages, all document language-based styling must be translated to the corresponding CSS and either enter the cascade at the user agent level or, as with HTML presentational hints, be treated as author level rules with a specificity of zero placed at the start of the author style sheet. 而对于其他语言，所有基于语言的文档样式必须被转换成相应的CSS样式，并将其作为浏览器规则或者HTML的隐式呈现，该呈现将被当做好像插入到了作者样式起始位置的特殊性为0的作者样式。 Example(s): The following user style sheet would override the font weight of 'b' elements in all documents, and the color of 'font' elements with color attributes in XML documents. It would not affect the color of any 'font' elements with color attributes in HTML documents: 下面的用户样式表将会覆盖所有文档中'b'元素的字体宽度和XML文档中'font'元素的color属性。但是它不会影响到HTML文档中'font'元素的color属性： b { font-weight: normal; } font[color] { color: orange; } The following, however, would override the color of font elements in all documents: 然而下面的规则将会覆盖所有文档中的字体元素的颜色： font[color] { color: orange ! important; }
说明：本站所有W3C翻译文稿皆为原创，如果转载，请大家注明出处，谢谢。

转载于:https://www.cnblogs.com/-Milo/archive/2010/12/23/2873635.html