inline style
embeded style
External style
User Style
Inline style is ugly, they travel in HTML documents, and the HTML elements twist into a group, to the Web front-end developers caused a lot of trouble. They tend to appear in this guise:
<p style= "color:red;" >this is a paragraph.</p>
Embeded style is a bit more than the inline style gentleman, and they are also hosted in HTML documents, but they disdain to twist the HTML element into a group. They tend to appear in <style> elements:
<style type= "text/css" media= "screen" >
p{
color:red;
}
</style>
External style is a nobleman who does not want to stay with HTML, so it simply exists as an external file. Typically, we use <link> elements or @import statements to import them into HTML.
<link rel= "stylesheet" type= "Text/css" href= "style.css" media= "screen"/>
We should use external style as much as possible, I think there are many reasons, as everyone knows, I will not repeat it.
There is also a User style that is slightly different from the above three, and if you use IE, you can tools–internet Options–general–appearance–accessibility–user style shee T find where to add user style (forgive me for not having Chinese version of IE browser).
Now that we have so many ways to add style, it's hard to avoid styles that create cascading. Such as:
<p class= "Intro" style= "color:red;" >this is a paragraph.</p>
While using the inline style above, we used the following in our external style:
p{
Color:yellow;
}
We've even applied the <p> elements that have the class= "Intro":
p.intro{
Color:blue;
}
So we have more than one CSS rule that specifies a value on the same attribute color of the same element. This situation is referred to as cascading (cascading). When cascading occurs, the CSS parser will determine the value of the final selection based on the priority algorithm.
Priority algorithms consider the following three aspects in order:
The importance and source of CSS rules
The particularity of CSS rules
The order in which CSS rules appear in the document
The algorithm process is divided into 4 steps:
1. For an attribute of an element, list all CSS rules that specify the value for the attribute. As in the previous example, there are three CSS rules that specify the color property on the <p> element of class= "Intro".
2, according to the importance of the Declaration and the source of priority sorting
There are two kinds of importance:
Important
Normal (that is, not important)
Adding!important after a CSS rule is more important than not being added.
There are three different sources:
User Agent stylesheet– Browser default style
Author stylesheet– developer-defined styles
User stylesheet– users define styles in browsers
The priority order of importance and source is from low to High:
User Agent Stylesheet
The normal rule in the user style sheets
The normal rule in the author style sheets
Important rules in the author style sheets
Important rules in the user style sheets
After sorting, if a CSS rule has precedence over all other competition rules, the algorithm ends and returns the value specified by that highest priority. If more than one CSS rule has the highest priority, then they will continue to compete and the algorithm enters step 3rd.
3, according to the particularity (specificity) sort
CSS calculates the specific value of the selector of each rule specified in multiple rules, the higher the value, the higher the precedence.
A particular value is an array-like value consisting of 4 integers: a,b,c,d, where the weights of A are the highest, and so on, d with the lowest weights. The calculation method of selector particularity value is:
If the rule is a inline style, then A = 1
If the rule is specified by selector, the number of ID selector that appears in Selector is the value of B
If the rule is specified by selector, the sum of the attributes selector (including class selector) or pseudo class selector that appears in Selector is the value of C
If the rule is specified by selector, the sum of the elements selector or pseudo element selector that appears in Selector is the value of D.
The particularity value of universal selector * is 0,0,0,0
The official website provides some examples to deepen understanding.
When sorting according to the particular value, the weight of a is the highest, so the first comparison is between a, the same in a, and then the B, and so on. So regardless of the b,c,d value, inline style always has the highest specificity.
If a CSS rule has precedence over all other competition rules after sorting according to the above particulars, the algorithm ends and returns the value specified by that highest priority. If more than one CSS rule has the highest priority, then they will continue to compete and the algorithm enters step 4th.
4. Compare the order in which the CSS rules appear in the document
The latter is always a higher priority than the previous one, so the statement appearing at the end will be used as the value of the property.
At this point, the algorithm is over. I was completely dizzy.
