What does the term cascade mean for style sheets? It means that a CSS rule tumbles down through the code, and sometimes bumps into a conflicting rule.
The cascade is about what programmers call precedence: Who wins when there's a conflict? More than one style can apply to a given tag. For example, there's always the default browser-defined style, such as black as the default text color. If you specify some other color in a CSS rule, the cascade allows your rule to dominate, to have precedence over the built-in style.
But how does the browser decide which style wins out if two CSS rules conflict with each other? Should the conflicting styles be combined? What if the styles are completely incompatible — such as one style specifying italic and the other non-italic?
Visualizing specificity
Several factors determine which style wins out when styles collide: inheritance, the structural tree in a document, and the specificity (or closeness)of a style. Probably the most easily understood collision rule involves where the style was defined. Your CSS styles can be defined in four major locations:
- The browser's default styles.
- An external style sheet (a .css file containing style definitions that is referenced from within the HTML document with a Link element).
- An embedded style sheet (styles defined within the HTML document, inside its <head> tag. This kind of style is also sometimes called internal).
- An inline style (a style defined as an attribute within an HTML element itself, and whose effect is limited to that element only). For example, this is a typical inline style:
<p style="border-bottom: blue">
This list also illustrates the order in which conflicting styles "win" in any conflict. Think of the order as the style closest to the element wins. For example, the inline style — nestled right inside the element itself — is the closest. So if more than one style is specified for that element, an inline style is the style used. This closenessof the style to the element that matches it is more formally known as specificity.
The style location with the second highest priority is the internal style sheet located in the HTML document's header. The third highest priority goes to the external style sheet — the separate file. And the weakest priority, the one that all the others trump, is the default style. After all, the default is the look that a style sheet is supposed to alter.
Here's an example illustrating how IE decides between blue and red colors:
<html>
<head>
<style type="text/css">
p {color:red;}
</style>
</head>
<body>
<p style="color: blue;">i guess i'm blue. </p>
</body>
</html>
To test this document, type the HTML code into Notepad, and then save it using the filename EmTest.htm. Load this Web page by double-clicking its filename in Windows Explorer. You'll see the sentence I guess I'm blue appear in blue. The <p> element here was defined in two conflicting ways. In the embedded style, it's defined as red, but that definition is overridden by the inline definition of the color blue.
Try removing the inline style to see what happens. Change the line to
<p>I guess I'm blue. </p>
Retest it by resaving the Notepad file you just modified.
No need to double-click again on this filename in Windows Explorer to load the new version into IE. After you've loaded a document, it's the default address in IE — in this case, an address of an .htm file on your hard drive. If you modify that file as you just did in this example, all you have to do to see the modification is to press F5. That "refreshes" IE.
Some people prefer to use the browser's built-in source view as a quick way of modifying and retesting CSS code. Choose View --> Source. You can make changes to the code, and then save it. Both Netscape and Firefox highlight the syntax, which some programmers find useful.
After you load the new version of this document into IE, the line I guess I'm blue is now displayed in red. The conflict between the embedded and inline style definitions has been resolved because you deleted the inline style.
You can override the normal rules of priority by using the !Important command to specify that this style must be used, no matter what. An !Important declaration overrides all other style definitions. You add the command like this:
p {color: blue !important;}
In CSS1, styles declared important by the author of the Web page override even any styles that the reader has declared important. However, in CSS2, important reader styles win out over important author styles, and indeed over any author styles, whether marked important or not.
Understanding CSS specificity
The term specificity is also used to describe a second way that a browser calculates which style wins when styles conflict. First, the browser looks for closeness — but what if the closeness is identical? That's when this second technique is applied.
Imagine, for example, that two different style sheets are referenced by the same HTML document (yes, you can attach more than on CSS file to a given Web page's HTML code). But, in one of these sheets, H1 is styled bold, and in another sheet it's styled italic. What's the poor browser to do in this case? Which specification wins?
Unlike the examples of style collision earlier in this chapter, where closeness could be used to declare a winner, here you've got both styles located at the same degree of closeness (the same specificity). Both of these style definitions are located in external style sheets.
In this case, the browser does a little bizarre math to make the decision about which style to use. As before, the more "specific" style wins. But what counts as specificity in this contest? It's not the same as the "closeness" factor. The browser has to do a bit of strange calculation, but you really can't call thismath. It's just an odd kind of accumulation of values where some styles have orders of magnitude more weight than others. Don't bother your pretty head about this stuff if you don't find peculiar calculations interesting.
What does the browser do to calculate the specificity of two competing styles if their "closeness" factor is identical? Three things:
- Looks at a style and counts the number of ID attributes it has, if any
- Counts the number of class attributes, if any
- Counts the number of selectors (you can group selectors in a style like this: h1, h2, h3)
The browser doesn't then add these numbers together; it merely concatenates the digits. Perhaps this is some kind of arithmetic used by aliens in their galaxy, but I've sure never heard of it. Imagine if you got the number 130 by the following concatenation process:
1 apple, 3 oranges, 0 bananas = 130
This process gives apples ten times the "weight" of oranges, and 100 times the weight of bananas. Here are a couple of examples showing how it works when used to determine specificity in a CSS. Just pretend you're back in third-grade math class.
Attention, class! What is the specificity number for this selector?
ul h1 li.red {color: yellow;}
Anyone get the answer 13?
The correct answer is 13. You have
0 IDs, 1 class attribute (red), and 3 selectors (ul h1 li)
That "adds up," so to speak, to 013. Now, kiddies, who can explain how you get a specificity of 1 for the following selector definition?
H1 {color: blue;}
After the specificity has been determined, the higher number wins. Assume that two styles are in conflict because they both define the color of H1, but define it differently. But because one definition has a specificity value of 13 and the other has only 1, the H1 headline is yellow, not blue.
What if two rules turn out to have the same specificity? In that case (assuming that both are in a style sheet, or otherwise are the same "closeness" to the HTML tag), the rule that was specified last wins.
dummies
Source:http://www.dummies.com/how-to/content/taking-a-tumble-with-css.html
No comments:
Post a Comment