How does CSS work? (which style does the browser choose if the style is repeated ??), How css works

How does CSS work? (which style does the browser choose if the style is repeated ??), How css works

For example, tag P may be set to the values of relevant attributes (such as color: red;/color: blue) in Embedded style sheets and external style sheets ), which value does the Browser display the P style ??? This is how CSS works. (The specialization is important)

CSS has three working mechanisms: 1. Inheritance 2. Cascade 3. Specifically (the cascade principle is based on inheritance and specifically)

1. Inheritance: The ancestor element in css will pass something to the descendant: the value of the CSS attribute. The body is the ancestor of all elements. If we specify the body {color: red;}, all elements in the document inherit the same formula. That's why, after we write a line in the Notepad program, we rename it to: xxx.html, which has different font effects when opened in different browsers, because each browser has its own predefined style sheet, which includes the font attribute in the body. When we open our Html in the browser, we inherit this attribute.

Of course, not all attributes can be inherited. Most attributes that can be inherited are related to text, such as color, Font, and font size. The inheritance of some attributes does not make sense, or the inheritance affects the layout of the page, such as attributes such as element positioning, margin, padding, and border.

 

2. Cascade: The C (cascading) in CSS is mainly stacked according to the style source and specialization.

A) style source: the order in which the source styles are stacked by the browser is as follows:

The higher the priority, that is, the browser selects the style set by the source (if any)

B) Specialization: it is a scoring rule for the selector. The selector with a high score will be selected. The formula has three Values to be calculated: I-C-E, the rule is as follows:

Selector is also called a selector. The English language should be selector. CSS has many selector types, which are not detailed here.

For example:

 

P	0-0-1 specified degree = 1
P. classp1	0-1-1 is 11.
P # idp1	1-0-1 is 101 in particular
Body p # idp1	1-0-2 is 102 in particular
Body p # idp1 ul. classul1	1-1-3 is 113
Body p # idp1 ul. classul1 li	1-1-4 is 114

 

 Summarize the three rules based on the three working mechanisms and apply them to all situations.

1) The ID selector is greater than the class selector, and the class selector is greater than the label selector. In a word, a selector with a higher degree is selected.

2) the browser reads the style sheets in the order of html documents. The style sheets that follow will overwrite the styles with the same attributes of the style sheets. If the subsequent style is not specific, the previous style cannot be overwritten.

Note: Rule 1 is better than rule 2. If it is more specific, it will be selected wherever it is (except in the row. The row has the highest priority (but the style in the row is generally not used, <p> 3) The set style is better than the inherited style.

 

Example 1: The id selector is better than the class selector.
<Style>. li1 {color: red ;}
# Li1 {color: yelow ;} </style> <link rel = "stylesheet" href = "demo.css"> 
 
 
Example 2: embed a style sheet and an external style sheet, and select which one (mainly depends on the browser's reading in order, which will overwrite the ones read before the point ).
<Link rel = "stylesheet" href = "demo.css"> <style>. li1 {color: red ;} </style> 
(Yellow) external style sheet
Demo.css

. Li1 {
Color: yellow ;}
<Style> the embedded style sheet is red.
In this order, the style label is in the front, and the link is in the back
<Style>
. Li1 {color: red ;}
</Style>
<Link rel = "stylesheet" href = "demo.css">
</Head>
 
Yellow
 
 
Example 3: select a high degree of specialization (such as in order, you should select the link yellow, but the specialization degree in the style is 1-0-2 greater than 1-0-1, so select the high-definition red), the lower-definition reading will not overwrite the previous-definition High.
<Style> body div # li1 {color: red ;} </style> <link rel = "stylesheet" href = "demo.css"> 

Demo.css
Div # li1 {
Color: yellow ;}
Red
 
Example 4: The style in a row has the highest priority, and the previous Code remains unchanged. Only style blue is added to p, and the list items are immediately blue.
Although the row has the highest priority, the row style itself is not commonly used (it is not convenient to transplant and increase the page size)
<Li id = "li1" class = "li1" style = "color: blue;"> Item 1 </li>
Example 5: The set style is better than the inherited style, even if the inherited style is too high (when em is added to li, em inherits the li's specificity of 102, em itself refers to 001, but still selects em)
<Style> body div # li1 {color: red;} em {color: black ;} </style> The list items are black.
 

CSS cascade (default style of the browser)
First, p has no default font style. If p is not set separately, it inherits the style of the body.

How can I set a css style so that the position of the label in the browser remains unchanged?
Position: relative; top: 10px; left: 50px;