Highly recommended: very good style sheet CSS Tutorial (3)

css| Tutorial | style sheet

Inheritance and Cascade

CSS rules affect the display shape of an element, but if there are no style matches or if there are multiple style rules that match the element, which rule does the shape of the element display follow? This section deals with the inheritance of styles and the knowledge of cascading aspects.

Inheritance

Some styles are "inherited" by default style settings, that is, child elements inherit the style rules of the parent element, including color, font, and text-align, and so on.

For example:

p {color:red}

...

<p>sample paragraph with <b>bold</b> text.</p>

The text inside the <B> and </B> tags is displayed in red because its parent element p tag has a style rule color:red and no matching style is set for the B tag, according to the inheritance principles <B> and </B> The text inside the tag is displayed in red.

Similarly, the child elements of any B-tag display the style of the inherited paragraph as red. For example:

<p>sample paragraph with <b>bold and <i>bold italic</i></b> text.</p>

But if it increases:

b {Color:green}

The text inside the <B> and </B> tags will become green,<i> and the text within the </I> tag also inherits the style of its parent tag B and appears as Green

Some style properties Permit a value of inherit, indicating that the value should is taken from the element ' s parent, even If the property isn't inherited by default

Style conflicts

Sometimes the element may match a number of model rules, and a conflict between style rules arises. In order to determine which rule is applied, CSS according to a certain cascade priority allocation rules, according to the priority decision to execute which rule.

It is very important to understand whether there is a conflict between model declarations, for example, the following style does not exist style conflicts:

b {font-size:12pt}/* No conflicts * *
P b {color:red;}

However, in the following style rules, there is a conflict for the B-tag in P-Tags:font-size

b {font-size:12pt}/* Conflict between font-size Property * *
P B {font-size:14pt;
color:red; }

The two rules determine which rule to execute, depending on the order of precedence.

CSS determines the attribution of precedence according to the following rules :

• If no inheritance or default style is applied, there is no precedence problem, and the style is shown by the set rules.
• Based on the source (Web page author or end user), cascade order, importance (especially!important keyword) to judge the execution.
• Execution is judged on the basis of specificity (based on the attribute level).
• The defined order, and the last defined rule is executed first.

Cascading

The style sheet has three sources: User agent, end user, web designer.

Each user agent has a default style sheet, which means that there is always a style sheet to apply to the page. Even if the browser does not use any of the custom styles. Most browsers allow users to change some of the default styles, such as fonts and colors, and set them in the option settings.

User style sheets allow you to define your own style sheets to apply to the page, and some users may need a color that is larger and more color-contrasting than the default style of the browser or the style of the page designer.

Program Designer style Sheet: Refer to the model definition or reference internal inclusion style information

Designer style Sheets > User styles > Default styles

!important keyword

The!imporant keyword can be used in a style description whose precedence is higher than the designer and user style. That is, if the user style sheet specifies a!important declaration, it will be used for the page across styles set by the designer.

* In the user ' s style sheet * *

p {
color:red;
FONT-SIZE:18PT!important;
}

/* In the author ' s style sheet * *

p {
Color:green;
font-size:12pt;
}

The body of the paragraph is displayed as a 18-point green text, and the designer specifies a font size of 12, a green color, and, as a general rule, the designer takes precedence over the user, but here the user style rule declares that the font size is!important level. So priority is highest.

Note: If the designer's style declares that the font size is!important, the font size of the user still has precedence.

Browser compatibility
The CSS Specification (CSS1) allows the designer to set!important declaration precedence over the user's!important declaration. and CSS2 to flip this rule over. User's! The important statement is higher than the designer's statement. Because some browsers still use the CSS1 standard, designers should avoid using!important declarations.

Netscape 6.0 uses the CSS2 standard, the user!important declaration always takes precedence. But a bug in Netscape 6.1 would cause the designer to claim that it exceeded the user's!important statement!!.

In the same "source" (User, designer ...) Style sheet inside, the!important keyword declaration also has absolute precedence. For example, the following second style rule should have precedence in common sense (because the order is back)

/* In the author ' s style sheet * *

p {
Color:green!important;
font-size:12pt;
}

p {
color:red;
font-size:18pt;
}

However, the body of the paragraph will appear as a 18-point green font. Because the color of the first rule is marked as!important.