|
1 | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
2 | 2 | <html lang="en"> |
3 | | -<!-- $Id: cascade.src,v 2.11 1998-03-12 19:27:20 bbos Exp $ --> |
| 3 | +<!-- $Id: cascade.src,v 2.12 1998-03-14 23:30:05 ijacobs 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> |
@@ -72,8 +72,12 @@ actual value is the computed value after any approximations have been |
72 | 72 | applied. |
73 | 73 |
|
74 | 74 |
|
75 | | -<P>Whenever an element inherits a value, it inherits an |
76 | | -actual value. |
| 75 | +<P>In most cases, elements inherit actual values. However, there are |
| 76 | +some properties whose specified or calculated values may be inherited |
| 77 | +(e.g., a number value for the <span |
| 78 | +class="propinst-line-height">'line-height'</span> property). The |
| 79 | +definition of a property whose actual value is not what other elements |
| 80 | +inherit will clearly say so. |
77 | 81 |
|
78 | 82 | <h3>Order of value calculation</h3> |
79 | 83 | <P><em>This section is under construction</em> |
@@ -279,8 +283,10 @@ must apply the following algorithm:</p> |
279 | 283 | Sort the declarations by weight. |
280 | 284 | <span class="index-def" title="important">"!important"</span> |
281 | 285 | declarations in the user's style sheet have more weight than |
282 | | - all other declarations. <!-- or do !important declarations in |
283 | | - author and UA ss still have some effect? --> |
| 286 | + all other declarations. |
| 287 | + <span class="index-def" title="important">"!important"</span> |
| 288 | + declarations in the author's style sheets have more weight than |
| 289 | + those in the UA's default style sheet. |
284 | 290 |
|
285 | 291 | <LI> |
286 | 292 | Sort by origin: the author's style sheets override the user's |
@@ -314,48 +320,45 @@ the reader. It is therefore important that the User Agent gives the |
314 | 320 | user the ability to turn off the influence of a certain style sheet, |
315 | 321 | e.g., through a pull-down menu. |
316 | 322 |
|
317 | | -<H3><a name="important-rules">!override and !important rules</a></H3> |
| 323 | +<H3><a name="important-rules">!important rules</a></H3> |
318 | 324 |
|
319 | 325 | <P>CSS attempts to create a balance of power between author |
320 | | -and user style sheets. Authors are given "extra power" in the |
321 | | -cascade (see point 3 above) so that, by default, the author's |
322 | | -stylistic intentions will prevail. However, CSS offers two mechanisms |
323 | | -that give more weight to user preferences: !important and !override |
324 | | -declarations. |
325 | | - |
326 | | -<P>An "!important" declaration (the keywords "!" and "important" |
327 | | -follow the declaration) takes precedence over a normal declaration. |
328 | | -Both author and user style sheets may contain "!important" declarations, |
329 | | -and author "!important" rules override user "!important" rules. |
330 | | - |
331 | | -<P>An "!override" declaration (the keywords "!" and "override" follow |
332 | | -the declaration) takes precedence over an "!important" declaration. |
333 | | -<em>Only</em> user style sheets may contain "!override" declarations, |
334 | | -giving the user the final say in the cascade. |
| 326 | +and user style sheets. By default, rules in an author's style |
| 327 | +sheet override those in a user's style sheet (see cascade |
| 328 | +rule 3). |
| 329 | + |
| 330 | +<P>However, for balance, an "!important" declaration (the keywords "!" |
| 331 | +and "important" follow the declaration) takes precedence over a normal |
| 332 | +declaration. Both author and user style sheets may contain |
| 333 | +"!important" declarations, and user "!important" rules override author |
| 334 | +"!important" rules. |
| 335 | + |
| 336 | +<div class="note"><P> |
| 337 | +<em><strong>Note.</strong> |
| 338 | +This is a semantic change since CSS1. In CSS1, author "!important" |
| 339 | +rules took precedence over user "!important" rules. </em> |
| 340 | +</div> |
335 | 341 |
|
336 | 342 | <P>Declaring a shorthand property (e.g., <span |
337 | | -class="propinst-background">'background'</span>) to be "!important" |
338 | | -(respectively, "!override") is equivalent to declaring all of its |
339 | | -sub-properties to be "!important" (respectively, "!override"). |
| 343 | +class="propinst-background">'background'</span>) to be "!important" is |
| 344 | +equivalent to declaring all of its sub-properties to be "!important". |
340 | 345 |
|
341 | 346 | <div class="example"><P> |
342 | 347 | The first rule of the user's style sheet in the following example |
343 | | -contains two "!override" declarations. These user preferences will |
344 | | -override all rules that have H1 as a <a |
345 | | -href="selector.html#subject">subject</a>, namely the author's H1 |
346 | | -rule. For the P element, on the other hand, the <span |
347 | | -class="propinst-font-size">'font-size'</span> will be '18pt' and the |
348 | | -<span class="propinst-font-style">'font-style'</span> will be 'italic' |
349 | | -since the author's "!important" rule takes precedence.</p> |
| 348 | +contains two "!important" declarations, which override |
| 349 | +the corresponding color and background properties in the |
| 350 | +author's style sheet even though the author has also specified |
| 351 | +"!important". The second rule of the user's style sheet will |
| 352 | +override the author's 'font-style' specification.</p> |
350 | 353 |
|
351 | 354 | <PRE> |
352 | 355 | /* From the user's style sheet */ |
353 | | - H1 { color: black ! override; background: white ! override } |
354 | | - P { font-size: 18pt ! important; font-style: normal ! important} |
| 356 | + H1 { color: black ! important; background: white ! important } |
| 357 | + P { font-size: 18pt; font-style: normal ! important} |
355 | 358 |
|
356 | 359 | /* From the author's style sheet */ |
357 | 360 | H1 { color: yellow ! important; background: blue ! important } |
358 | | - P { font-size: 12pt; font-style: italic ! important } |
| 361 | + P { font-size: 12pt; font-style: italic } |
359 | 362 | </PRE> |
360 | 363 | </div> |
361 | 364 |
|
|
0 commit comments