From scratch, I learned the inheritance, cascade and particularity of html (9) CSS, and css cascade.

From scratch, I learned the inheritance, cascade and particularity of html (9) CSS, and css cascade.
1. Inheritance

1 <! Doctype html> 2 Inheritance
Some CSS styles are inherited. What is inheritance?
Inheritance is a rule that allows styles to be applied not only to a specific html Tag Element, but also to its descendants.
For example, the following code: If a color is applied to the p tag, this color setting applies not only to the p tag,
It is also applied to the text of all child elements in the p tag, where the child element is a span tag.
P {color: red ;}< p> when I was in grade 3, I was a girl <span> timid </span>. </P>
In the visible result window, both the text in p and the text in span are set to red. Note that some css styles are not inherited. Such as border: 1px solid red;
P {border: 1px solid red;} <p> when I was in grade 3, I was a girl <span> timid </span>. </P>
In the above example, the function of the code is to set the border of the p label to 1 pixel, red, and solid border line, but it is useless for the child element span.
Task
Let me try again and add a border for the paragraph.
1. In row 8th of the editor, enter:
p{border:1px solid red;}
Do the span label in the p label have a border style?
 
Ii. particularity
1 <! Doctype html> 2 Special
Sometimes we set different CSS style codes for the same element. Which CSS style will the element enable? Let's take a look at the code below:
P {color: red;}. first {color: green;} <p class = "first"> in grade 3, I was a girl who was <span> timid </span>. </P>
If both p and. first match the p tag, which color is displayed? Green is the correct color. Why?
The reason is that the browser determines which css style is used based on the weight, and the css style is used when the weight is high.
The following are the rules for weights:
The label has a weight of 1, the class selector has a weight of 10, and the ID selector has a weight of up to 100. For example, the following code:
P {color: red;}/* weight: 1 */p span {color: green;}/* weight: 1 + 1 = 2 */. warning {color: white;}/* the weight is 10 */p span. warning {color: purple;}/* the weight is 1 + 1 + 10 = 12 */# footer. note p {color: yellow;}/* with a weight of 100 + 10 + 1 = 111 */
Note: There is another special weight value-inheritance also has the permission value but it is very low. Some documents suggest that it only has 0.1, so it can be understood that the inherited weight is the lowest.
Try: Set the color to purple for the "Mouse" Text
Requirement: Set CSS style codes with higher weights to overwrite the previous CSS style codes.
Enter the following code in line 3:
p span{color:purple;}
Or
p>span{color:purple;}
Iii. Cascade
1 <! Doctype html> 2 Cascade
Let's think about one question: what if multiple css styles can exist for the same element in an html file and these css styles have the same weight?
Stack is used to create multiple css styles for the same element in an html file. When a style with the same weight exists,
It is determined based on the order of these css styles. the css styles at the end will be applied.
The following code is used:
P {color: red;} p {color: green;} <p class = "first"> in grade 3, I was a girl who was <span> timid </span>. </P>
At last, the text in p is set to green. This cascade is easy to understand. It is understood that the subsequent style will overwrite the previous style.
Therefore, the preceding css style priority is hard to understand:
Inline style sheet (inside the label)> embedded style sheet (in the current file)> external style sheet (in the external file ).
Try it: Set the color of the two text segments to pink in stacked mode.
In the Code Editor, enter:
P {color: pink ;}
Iv. Importance
Importance
When we do webpage code, we need to set the highest weight for some styles in some special cases. What should we do? This time we can use! Important.
The following code:
P {color: red! Important;} p {color: green;} <p class = "first"> in grade 3, I was a girl <span> timid </span>. </P>
The text in section p is red.
Note :! Important should be written before the semicolon
Note that when the webpage maker does not set a css style, the browser will display the webpage according to its own style.
You can also set the style you are used to in the browser. For example, some users prefer to set the font size to a greater value to make it clearer to view the webpage text.
Note that the style priority is: the default style of the browser <webpage maker style <The style set by the user,
But remember! The important priority style is an exception. The weight is higher than the style set by the user.
To try! Important statement to change the style weight
Insert at the corresponding position in row 7th of the Editor!importantStatement.
The purpose is to set the color of the first text to red.
Check whether the following code is entered in line 3:
P {color: red! Important ;}

Review:
Inheritance, particularity, cascade, and importance.
Inheritance means that the style of a tag can be inherited by its child, but some tags cannot be inherited, such as border.
Particularity refers to determining the final style with weight. id = 100, class = 10, label = 1, inheritance = 0.1;
Stack means that when the weights are the same, the subsequent style overwrites the previous style.
The use of importance important.

When the proximity principle is close to the tag, it will be referenced.