1
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2
2
<html lang="en">
3
- <!-- $Id: cascade.src,v 2.46 2003-10-17 17:52:46 bbos Exp $ -->
3
+ <!-- $Id: cascade.src,v 2.47 2004-02-14 00:59:12 bbos Exp $ -->
4
4
<HEAD>
5
5
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
6
6
<TITLE>Assigning property values, Cascading, and Inheritance</TITLE>
7
+ <!-- Changed by Kimberly Blessing, 2004-02-13 -->
7
8
</HEAD>
8
9
<BODY>
9
10
@@ -22,11 +23,11 @@ calculation: the value is determined through specification (the
22
23
(the "computed value"), and finally transformed according to
23
24
the limitations of the local environment (the "actual value").
24
25
25
- <h3>
26
- <span class="index-def" title="specified value">
26
+
27
+ <h3>< span class="index-def" title="specified value">
27
28
<a name="specified-value">Specified values</a></span></h3>
28
29
29
- <p>User agents must first assign a specified value to a property based
30
+ <p>User agents must first assign a specified value to each property based
30
31
on the following mechanisms (in order of precedence):</p>
31
32
32
33
<ol>
@@ -35,22 +36,17 @@ on the following mechanisms (in order of precedence):</p>
35
36
<li>Otherwise use the property's <span class="index-def" title="initial value">initial value</span>. The initial value of each property is indicated in the property's definition.
36
37
</ol>
37
38
38
- <p>Since it has no parent, the root of the <a
39
- href="conform.html#doctree">document tree</a> cannot use values from
40
- the parent element; in this case, the initial value is used if
41
- necessary.
42
-
43
39
44
40
<h3><span class="index-def" title="computed value">
45
- <a name="computed-value">Computed values</a>
46
- </span>
47
- </h3>
41
+ <a name="computed-value">Computed values</a></span></h3>
42
+
43
+ <p>Specified values are resolved to computed values during the cascade;
44
+ for example valid relative URIs are made absolute and 'em' and 'ex'
45
+ units are computed to pixel or absolute lengths. Computing a value
46
+ never requires the user agent to render the document.
48
47
49
- <p>Specified values may be absolute (i.e., they are not specified
50
- relative to another value, as in 'red' or '2mm') or relative (i.e.,
51
- they are specified relative to another value, as in 'auto', '2em', and
52
- '12%'). For absolute values, no computation is needed to find the
53
- computed value.
48
+ <p>The computed value of invalid and absolute URIs is the specified
49
+ value.
54
50
55
51
<p>Relative values, on the other hand, must be transformed into
56
52
computed values: percentages must be multiplied by a reference value
@@ -74,15 +70,27 @@ properties may define the computed value of a property for an element
74
70
to depend on whether the property applies to that element.
75
71
76
72
73
+ <h3><span class="index-def" title="used value">
74
+ <a name="used-value">Used values</a></span></h3>
75
+
76
+ <p>Computed values can be relative to each other; for example a width
77
+ could be set as a percentage, which is dependent on the containing
78
+ block's width. The <dfn id="usedValue">used value</dfn> is the
79
+ result of taking the computed value and resolving these dependencies
80
+ into a final absolute value used for the actual layout.
81
+
82
+
77
83
<h3><span class="index-def" title="actual value">
78
84
<a name="actual-value">Actual values</a></span></h3>
79
85
80
- <p>A computed value is in principle ready to be used, but a user agent
81
- may not be able to make use of the value in a given environment. For
82
- example, a user agent may only be able to render borders with integer
83
- pixel widths and may therefore have to approximate the computed
84
- width. The actual value is the computed value after any approximations
85
- have been applied.
86
+ <p>A used value is in principle the value used for rendering, but a
87
+ user agent may not be able to make use of the value in a given
88
+ environment. For example, a user agent may only be able to render
89
+ borders with integer pixel widths and may therefore have to
90
+ approximate the computed width, or the user agent may be forced to
91
+ use only black and white shades instead of full colour. The actual
92
+ value is the used value after any approximations have been applied.
93
+
86
94
87
95
<h2><a name="inheritance">Inheritance</a></h2>
88
96
@@ -114,7 +122,7 @@ For example, given the following style sheet:</P>
114
122
115
123
<pre>
116
124
body { font-size: 10pt }
117
- h1 { font-size: 120 % }
125
+ h1 { font-size: 130 % }
118
126
</pre>
119
127
120
128
<p>and this document fragment:
@@ -126,13 +134,13 @@ h1 { font-size: 120% }
126
134
</pre>
127
135
128
136
<p>the <span class="prop-inst-font-size">'font-size'</span> property
129
- for the H1 element will have the computed value '12pt ' (120 % times
137
+ for the H1 element will have the computed value '13pt ' (130 % times
130
138
10pt, the parent's value). Since the computed value of <span
131
139
class="propinst-font-size">'font-size'</span> is inherited, the EM
132
- element will have the computed value '12pt ' as well. If the
133
- user agent does not have the 12pt font available, the
140
+ element will have the computed value '13pt ' as well. If the
141
+ user agent does not have the 13pt font available, the
134
142
actual value of <span class="propinst-font-size">'font-size'</span>
135
- for both H1 and EM might be, for example, '11pt '.
143
+ for both H1 and EM might be, for example, '12pt '.
136
144
</div>
137
145
138
146
<h3>The <span class="index-def" title="inherit, definition
@@ -239,10 +247,16 @@ browsers, the EM element in HTML is presented using an italic
239
247
font). See <a href="sample.html">A sample style sheet for HTML
240
248
</a> for a recommended default style sheet for HTML documents.
241
249
242
- <P>Note that the default style sheet may change if system settings are
243
- modified by the user (e.g., system colors). However, due to
244
- limitations in a user agent's internal implementation, it may be
245
- impossible to change the values in the default style sheet.
250
+ <p class="note">Note that the user may modify system settings (e.g.
251
+ system colors) that affect the default style sheet. However, some user
252
+ agent implementations make it impossible to change the values in the
253
+ default style sheet.
254
+
255
+
256
+ Note that the user may modify system settings
257
+ (e.g. system colors) that affect the default style sheet. However,
258
+ some user agent implementations make it impossible to change the
259
+ values in the default style sheet.
246
260
</ul>
247
261
248
262
<P>Style sheets from these three origins will overlap in scope, and
@@ -257,10 +271,6 @@ rules in user style sheets. Precedence is reversed, however, for
257
271
"!important" rules. All user and author rules have more weight
258
272
than rules in the UA's default style sheet.
259
273
260
- <P>Rules specified in a given style sheet override rules of the same
261
- weight imported from other style sheets. Imported style sheets can
262
- themselves import and override other style sheets, recursively, and
263
- the same precedence rules apply.
264
274
265
275
<H3><a name="cascading-order">Cascading order</a></H3>
266
276
@@ -274,7 +284,7 @@ must apply the following sorting order:</p>
274
284
Declarations apply if the associated selector <A
275
285
HREF="selector.html">matches</A> the element in question.
276
286
277
- <LI>Sort by weight (normal or important) and origin (author, user, or user agent). In ascending order:
287
+ <LI>Sort by importance (normal or important) and origin (author, user, or user agent). In ascending order:
278
288
279
289
<ol>
280
290
<li>user agent style sheets
@@ -311,23 +321,20 @@ and user style sheets. By default, rules in an author's style
311
321
sheet override those in a user's style sheet (see cascade
312
322
rule 3).
313
323
314
- <P>However, for balance, an "!important" declaration (the keywords "!"
315
- and "important" follow the declaration) takes precedence over a normal
316
- declaration. Both author and user style sheets may contain
324
+ <P>However, for balance, an "!important" declaration (the delimiter token
325
+ "!" and keyword "important" follow the declaration) takes precedence over
326
+ a normal declaration. Both author and user style sheets may contain
317
327
"!important" declarations, and user "!important" rules override author
318
328
"!important" rules. This CSS feature improves accessibility
319
329
of documents by giving users with special requirements (large
320
330
fonts, color combinations, etc.) control over presentation.
321
331
322
-
323
-
324
332
<P>Declaring a <span class="index-inst" title="shorthand
325
333
property">shorthand property</span> (e.g., <span
326
334
class="propinst-background">'background'</span>) to be "!important" is
327
335
equivalent to declaring all of its sub-properties to be "!important".
328
336
329
337
<div class="example">
330
-
331
338
<P>The first rule in the user's style sheet in the following example
332
339
contains an "!important" declaration, which overrides the corresponding
333
340
declaration in the author's style sheet. The second declaration
@@ -347,7 +354,7 @@ p { font-size: 18pt }
347
354
348
355
/* From the author's style sheet */
349
356
p { text-indent: 1.5em !important }
350
- p { font: 12pt sans-serif !important }
357
+ p { font: normal 12pt sans-serif !important }
351
358
p { font-size: 24pt }
352
359
</PRE>
353
360
</div>
@@ -418,7 +425,7 @@ defined as an "ID" in the source document's DTD.
418
425
419
426
<H3>Precedence of non-CSS presentational hints</H3>
420
427
421
- <P>The UA may choose to honor presentational attributes in the source
428
+ <P>The UA may choose to honor presentational attributes an HTML source
422
429
document. If so, these attributes are translated to the corresponding
423
430
CSS rules with specificity equal to 0, and are treated as if they were
424
431
inserted at the start of the author style sheet. They may therefore be
@@ -437,13 +444,11 @@ onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload,
437
444
onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
438
445
onreset, onselect, onsubmit, onunload, onunload, profile, prompt,
439
446
readonly, rel, rev, rowspan, scheme, scope, selected, shape, span,
440
- src, standby, start, style, summary, title, type, usemap, value,
441
- valuetype, version.
447
+ src, standby, start, style, summary, title, type (except on LI, OL and
448
+ UL elements), usemap, value, valuetype, version.
442
449
443
- <P>For XHTML and other languages written in XML, no attribute should
444
- be considered presentational. The styling of elements and
445
- non-presentational attributes should be handled in the user agent
446
- stylesheet.
450
+ <P>For other languages, all document language-based styling should be
451
+ handled in the user agent style sheet.
447
452
448
453
<div class="example">
449
454
0 commit comments