📄 cascade.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>Assigning property values, Cascading, and Inheritance</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="selector.html"><link rel="next" href="media.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="selector.html">previous</a> <a href="media.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">6 Assigning property values, Cascading, and Inheritance</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="cascade.html#q1" class="tocxref">6.1 Specified, computed, and actual values</a> <ul class="toc"> <li class="tocline3"><a href="cascade.html#specified-value" class="tocxref">6.1.1 <span class="index-def" title="specified value"> Specified values</span></a> <li class="tocline3"><a href="cascade.html#computed-value" class="tocxref">6.1.2 <span class="index-def" title="computed value"> Computed values </span></a> <li class="tocline3"><a href="cascade.html#actual-value" class="tocxref">6.1.3 <span class="index-def" title="actual value"> Actual values</span></a> </ul> <li class="tocline2"><a href="cascade.html#inheritance" class="tocxref">6.2 Inheritance</a> <ul class="toc"> <li class="tocline3"><a href="cascade.html#value-def-inherit" class="tocxref">6.2.1 The <span class="index-def" title="inherit, definition of">'inherit'</span> value</a> </ul> <li class="tocline2"><a href="cascade.html#at-import" class="tocxref">6.3 The @import rule</a> <li class="tocline2"><a href="cascade.html#cascade" class="tocxref">6.4 The cascade</a> <ul class="toc"> <li class="tocline3"><a href="cascade.html#cascading-order" class="tocxref">6.4.1 Cascading order</a> <li class="tocline3"><a href="cascade.html#important-rules" class="tocxref">6.4.2 !important rules</a> <li class="tocline3"><a href="cascade.html#specificity" class="tocxref">6.4.3 Calculating a selector's specificity</a> <li class="tocline3"><a href="cascade.html#q12" class="tocxref">6.4.4 Precedence of non-CSS presentational hints</a> </ul> </ul></div><H2><a name="q1">6.1 Specified, computed, and actual values</a></h2><P>Once a user agent has parsed a document and constructed a <ahref="conform.html#doctree">document tree</a>, it must assign, forevery element in the tree, a value to every property that applies to thetarget <a href="media.html">media type</a>. <P>The final value of a property is the result of a three-stepcalculation: the value is determined through specification (the"specified value"), then resolved into an absolute value if necessary(the "computed value"), and finally transformed according tothe limitations of the local environment (the "actual value").<h3>6.1.1 <span class="index-def" title="specified value"><a name="specified-value">Specified values</a></span></h3><P>User agents must first assign a specified value to a property basedon the following mechanisms (in order of precedence):</p><ol><li>If the <a href="#cascade">cascade</a> results in a value,use it.<li>Otherwise, if the property is <ahref="#inheritance">inherited</a>, use the value of the parentelement, generally the computed value.<li>Otherwise use the property's <a name="x1"><span class="index-def"title="initial value">initial value</span></a>. The <aname="initial-value">initial value</a> of each property is indicatedin the property's definition.</ol><P>Since it has no parent, the root of the <ahref="conform.html#doctree">document tree</a> cannot use values fromthe parent element; in this case, the initial value is used ifnecessary.<h3>6.1.2 <span class="index-def" title="computed value"><a name="computed-value">Computed values</a></span></h3><P>Specified values may be absolute (i.e., they are not specifiedrelative to another value, as in 'red' or '2mm') or relative (i.e.,they are specified relative to another value, as in 'auto', '2em', and'12%'). For absolute values, no computation is needed to find thecomputed value.<p>Relative values, on the other hand, must be transformed intocomputed values: percentages must be multiplied by a reference value(each property defines which value that is), values with relativeunits (em, ex, px) must be made absolute by multiplying with theappropriate font or pixel size, 'auto' values must be computed by theformulas given with each property, certain keywords ('smaller','bolder', 'inherit') must be replaced according to their definitions.<P>In most cases, elements inherit computed values. However, there aresome properties whose specified value may be inherited (e.g., thenumber value for the <a href="visudet.html#propdef-line-height" class="noxref"><spanclass="propinst-line-height">'line-height'</span></a> property). In the cases where child elements do not inherit the computed value,this is described in the property definition.<h3>6.1.3 <span class="index-def" title="actual value"><a name="actual-value">Actual values</a></span></h3><P>A computed value is in principle ready to be used, but a user agentmay not be able to make use of the value in a given environment. Forexample, a user agent may only be able to render borders with integerpixel widths and may therefore have to approximate the computedwidth. The actual value is the computed value after any approximationshave been applied.<H2>6.2 <a name="inheritance">Inheritance</a></h2><P>Some values are inherited by the children of an element inthe <a href="conform.html#doctree">document tree</a>. Each property <ahref="about.html#property-defs">defines</a> whether it is inherited ornot.<div class="html-example"><P>Suppose there is an H1 element with an emphasizing element (EM)inside:</p><PRE><H1>The headline <EM>is</EM> important!</H1></PRE><P>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 thecolor blue, the EM element will likewise be in blue.</div><P> To set a "default" style property for a document, authors may setthe property on the root of the document tree. In HTML, for example,the HTML or BODY elements can serve this function. Note that this willwork even if the author omits the BODY tag in the HTML source sincethe HTML parser will infer the missing tag.<div class="example"><P style="display:none">Example(s):</P><P> For example, since the <a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a>property is inherited, all descendants of the BODY element willinherit the color 'black':<PRE>BODY { color: black; }</PRE></div><P>Specified percentage values are not inherited; computed values are.<div class="example"><P style="display:none">Example(s):</P><P> For example, given the following style sheet:</P><pre>BODY { font-size: 10pt }H1 { font-size: 120% }</pre><p>and this document fragment:<pre class="html-example"><BODY> <H1>A <EM>large</EM> heading</H1></BODY></pre><p>the <span class="prop-inst-font-size">'font-size'</span> propertyfor the H1 element will have the computed value '12pt' (120% times10pt, the parent's value). Since the computed value of <a href="fonts.html#propdef-font-size" class="noxref"><spanclass="propinst-font-size">'font-size'</span></a> is inherited, the EMelement will have the computed value '12pt' as well. If theuser agent does not have the 12pt font available, theactual value of <a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">'font-size'</span></a>for both H1 and EM might be, for example, '11pt'.</div><h3>6.2.1 The <span class="index-def" title="inherit, definitionof"><a name="value-def-inherit">'inherit'</a></span>value</h3><P>Each property may also have a specified value of 'inherit', whichmeans that, for a given element, the property takes the same <ahref="#computed-value">computed value</a> as the property for theelement's parent. The inherited value, which is normally only used asa fallback value, can be strengthened by setting 'inherit' explicitly.<div class="example"><P style="display:none">Example(s):</P><P>In the example below, the <a href="colors.html#propdef-color" class="noxref"><spanclass="propinst-color">'color'</span></a> and <a href="colors.html#propdef-background" class="noxref"><spanclass="propinst-background">'background'</span></a> properties are set onthe BODY element. On all other elements, the 'color' value will beinherited and the background will be transparent. If these rules arepart of the user's style sheet, black text on a white background willbe enforced throughout the document.<PRE>BODY { color: black !important; background: white !important;}* { color: inherit !important; background: transparent;}</PRE></div><H2>6.3 <a name="at-import">The @import rule</a></h2><P>The <a name="x5"><span class="index-def"title="@import"><dfn>'@import'</dfn></span></a> rule allows users toimport style rules from other style sheets. Any @import rules mustprecede all rule sets in a style sheet. The '@import' keyword must befollowed by the URI of the style sheet to include. A string is alsoallowed; it will be interpreted as if it had url(...) around it.<div class="example"><P style="display:none">Example(s):</P><P> The following lines are equivalent in meaning and illustrate both'@import' syntaxes (one with "url()" and one with a bare string):</p><PRE>@import "mystyle.css";@import url("mystyle.css");</PRE></div><p>So that user agents can avoid retrieving resources for unsupported<a href="media.html">media types</a>, authors may specifymedia-dependent <a name="x6"><span class="index-inst"title="@import">@import</span></a> rules. These <a name="x7"><span class="index-def"title="conditional import|media-dependent import">conditionalimports</span></a> specify comma-separated media types after the URI.<div class="example"><P style="display:none">Example(s):</P><p>The following rules have the same effect as if the imported stylesheet were wrapped in an @media rule for the same media, but it maysave the UA a fruitless download.⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -