CSS Design Guide CSS Three mechanisms: inheritance, stacking and specifying

I. Inheritance

The ancestor elements in the CSS also pass the same thing to the descendants: the value of the CSS property. The BODY element is the ancestor of all the elements, all of which are descendants of it, such as setting a font for the BODY element, and all elements in the document, no matter how down in the hierarchy, inherit the styles. There are many properties in CSS that can be inherited, and a significant portion of it is related to text.

Two. Cascade

cascading, which is cascading in cascading style sheets, is the process by which a style is superimposed over the document hierarchy. The goal is to determine which value to use when the browser faces multiple sources of a particular property of a tag.

1. Style source

• Browser Default style sheet: Because you have not yet shown the setting CSS properties, H1 will display bold, em shows a skew.
• User style Sheets: Users who view Web pages can also provide style sheets, which are useful for visually impaired users, and can be used to force all Web pages loaded by the browser to display in a larger font, even though they are rare.
• Link Style sheet
• Embed style
• inline style

Now that there are so many style sources, the element should apply the property setting in which style, and the next step is to understand the cascading rules.

2. Cascading rules

Cascading Rule 1: Find all claims that are applied to each element and attribute.

Stacking Rule 2: Sort by order and weight.

The browser checks 5 sources in turn and sets the matching properties. If the matching attribute is also defined in the next source, the value of the property is updated so that it loops until the full 5 source is checked. When a property is finally set to what value, it is displayed with what value.

But there is one other, you can use "!important" to declare weights , so even if the next source of the Cascade set other property values, will eventually use the "!important" to declare the weight of the style.

Also be aware that!important is not inherited. As you can see, span inherits the Color property setting of p, but the inline style display overrides the inherited style

Stacking Rule 3: Sort by specificity.

The degree of specificity actually indicates how clear a rule is.

If a style sheet contains the following rules:

p{font-size:12px;}

p.largetext{font-size:16px;}

Then the following paragraph

<p class= "Largetext" >a bit of text</p>

A 16-pixel high text will be displayed because the second rule's selector contains both the tag name and the class name, so the meaning is clearer, and the second rule overrides the property with the same name in the first rule. So how do you judge which declaration is more specific in specificity?

Three. Calculating the specified degree

Scoring rules I-c-E,

I represents the ID, the ID of each element is unique, so it is the highest identification, such as I say a social security number, you must know who I am talking about. There is an ID in the selector, which adds 1 to the position of I.

C represents class, which represents the category. In each HTML document, there are many elements that have the same class attribute, so the recognition is the second. There is a class in the selector that adds 1 to the position of C.

E stands for element, representing the kind of elements, such as P, Div, etc. i say div where you are, no one will know what div I'm talking about. There is an element name in the selector, which adds 1 to the position of E.

In the I score high winning, if the score in the I item is the same, then in the C score high winning, if the C score is the same, then the E-score high winning. If the final I, C, E Three scores are the same, then the rule after the declaration wins. The element applies the most recognizable CSS property declaration.

Here are a few examples to understand the degree of specificity.

P 0-0-1

P.largetext 0-1-1

P#largetext 1-0-1

Body P#largetext 1-0-2

Body P#largetext ul.mylist 1-1-3

Summarize:

1. If several different sources define a style for the same attribute of the same label, the inline style is better than the inline style, and the embedding style is better than the link style. In a linked style sheet, a style that has the same degree of specificity is declared more than the first declaration.

2. A statement of higher specificity, regardless of where it is, will prevail.

3. The style that you set is better than the inherited style, so you don't have to consider the degree of specificity.

CSS Design Guide CSS Three mechanisms: inheritance, stacking and specifying