CSS learning notes 03 CSS cascade, inheritance, particularity, css learning notes

CSS learning notes 03 CSS cascade, inheritance, particularity, css learning notes
Cascade

The so-called cascading refers to the superposition of multiple CSS styles, that is to say, the styles set later will stack (overwrite) the previous styles,The premise of cascading is that the CSS selector has the same priority,For example, when you use an embedded CSS style sheet to define <p> to mark the font size as 12 pixels, the link type defines <p> to mark the color as red, the paragraph text is displayed in 12 pixels red, that is, the two styles are superimposed.

1 <! DOCTYPE html> 2 
The browser displays 200 pixels in length and width, and the background color is a green div, because the background color defined in the box is overwritten by the background color defined in the wrap.

The F12 review elements in the browser can also be seen
Inheritance
CSS inheritance means that the style of the sub-container inherits the style of the parent container. However, not all styles can be inherited. Only some styles can be inherited, such as text-related font size, color, Font Style, line height, and mouse style.
Style related to the box cannot be inherited, such as width and height, background color, margin, floating, and absolute positioning.
1 <! DOCTYPE html> 2 
The effect is as follows:

The p tag and sub-div both inherit the color and size of the parent div font, but the sub-div does not inherit the width and height of the parent div and the background color,

The inherited style solid line is represented, and other styles are virtualized.
Note: Using inheritance appropriately can simplify code and reduce the complexity of CSS styles. However, if all elements on a webpage inherit a large number of styles, it is very difficult to determine the source of the style. Therefore, you can use inheritance for commonly used styles on webpages such as fonts and text attributes. For example, you can set the font, font size, color, and line spacing in the body element, and then inherit all texts in the document.
Special (priority)
When defining CSS styles, two or more rules are often applied to the same element, and the priority issue occurs. What style does the element display?
First, we first give a conclusion of priority:

  

 
   
Intra-row style> intra-page style> external reference style> default browser Style
 
   
Important> inline> ID> pseudo class | attribute selection> tag> pseudo Object> wildcard> inheritance

  
The following is an example. By default, the font color is determined by the browser settings.

After adding a style to the body, the font color changes to red, indicating the inherited style> default browser Style

After adding a wildcard style, the font color changes to Gray.

It indicates that the style of the wildcard is better than the inherited style. Try again the style priority of the tag selector.

The label selector has a higher priority than the wildcard style. You can test other types of styles by yourself! Important can change the style weight.

We can see that the font color of the h1 title is blue, because! The important attribute can increase the style weight. The following describes the css weight. Each style type in css has its own weight.

1. The Inline style sheet has a maximum weight of 1000;
2. The weight of the ID selector is 100
3. The weight of the Class selector is 10.
4. The weight of the HTML Tag selector is 1.
Sometimes we apply different style rules on the same element, for example