inline style
embeded style
external style
user style
inline style is ugly. They shuttle through HTML documents and twist with HTML elements, causing a lot of trouble for web front-end developers. They often appear in this way:
<p style="color:red;">This is a paragraph.</p>
Embeded style is more gentler than inline style. They are also hosted in HTML documents, but they don't bother to twist with HTML elements. They often appear in the <style> element:
<style type="text/css" media="screen">
p{
color : red;
}
</style>
external style is a nobleman. It is unwilling to stay with HTML, so it simply exists independently in the form of external files. Usually we use the <link> element or @import statement to import them into HTML.
<link rel="stylesheet" type="text/css" href="" media="screen" />
We should use external style as much as possible. I think there are many reasons. Everyone knows it, so I won’t repeat it.
There is also a user style that is slightly different from the above three. If you use IE browser, you can find the place to add user style under Tools – Internet Options – General – Appearance – Accessibility – User style sheet (forgive me to not have the Chinese version of IE browser).
Since we have so many ways to add style, it is difficult to avoid the styles to produce cascades. like:
<p class="intro" style="color:red;">This is a paragraph.</p>
While using the above inline style, we also used it in our external style:
p{
color : yellow;
}
We even applied it on the <p> element that has class="intro":
{
color : blue;
}
In this way, we have multiple CSS rules on the same attribute color of the same element and specify the value. This situation is called cascading. When casing occurs, CSS Parser will determine the final selected value based on the priority algorithm.
The priority algorithm considers the following three aspects in sequence:
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 a certain attribute of a certain element, list all CSS rules that specify the value for the attribute. As in the above example, on the <p> element of class="intro", there are three CSS rules that specify the color attribute.
2. Prioritize according to the importance and source of the statement
There are two importance:
important
Normal (i.e. non-important)
Adding !important after CSS rules is more important than not added.
There are three sources:
user agent stylesheet – Browser Default Style
author stylesheet – Developer-defined style
user stylesheet – User defines styles in the browser
The priority order of importance and sources from low to high is:
user agent stylesheet
Normal rules in user style sheets
Normal rules in author style sheets
Important rules in author style sheets
Important rules in user style sheets
After the above sorting, if a CSS rule has a higher priority than all other contention rules, the algorithm ends and returns the value specified by the highest priority. If multiple CSS rules have the highest priority, they will continue to compete and the algorithm will enter step 3.
3. Sort by specificity
CSS will calculate the special value of the selector specified in multiple rules for each rule. The higher the value, the higher the priority.
A special value is an array-like value composed of 4 integers: a, b, c, d, where a has the highest weight, and so on, d has the lowest weight. The method of calculating the selector's special value is:
If the rule is an inline style, then a = 1
If the rule is specified by the selector, the number of id selectors that appear in the selector is the value of b
If the rule is specified by the selector, the sum of the number of attributes selector (including class selector) or pseudo-class selectors that appear in the selector is the value of c.
If the rule is specified by the selector, the sum of the number of elements selectors or pseudo-element selectors that appear in the selector is the value of d.
Universal selector * special value is 0,0,0,0
The official website provides some examples to deepen understanding.
When sorting by speciality values, since a has the highest weight, a is first compared, in the case of a same, b is compared, and so on. Therefore, no matter how big the values of b, c, and d are, inline style always has the highest speciality.
If a CSS rule has a higher priority than all other contention rules after sorting according to the above speciality, the algorithm ends and returns the value specified by the highest priority. If multiple CSS rules have the highest priority, they will continue to compete and the algorithm will enter step 4.
4. Compare the order in which CSS rules appear in the document
The following always has a higher priority than the previous one, so the statement that appears at the last will be used as the value of the attribute.
At this point, the algorithm ends. I was completely dizzy.
embeded style
external style
user style
inline style is ugly. They shuttle through HTML documents and twist with HTML elements, causing a lot of trouble for web front-end developers. They often appear in this way:
<p style="color:red;">This is a paragraph.</p>
Embeded style is more gentler than inline style. They are also hosted in HTML documents, but they don't bother to twist with HTML elements. They often appear in the <style> element:
<style type="text/css" media="screen">
p{
color : red;
}
</style>
external style is a nobleman. It is unwilling to stay with HTML, so it simply exists independently in the form of external files. Usually we use the <link> element or @import statement to import them into HTML.
<link rel="stylesheet" type="text/css" href="" media="screen" />
We should use external style as much as possible. I think there are many reasons. Everyone knows it, so I won’t repeat it.
There is also a user style that is slightly different from the above three. If you use IE browser, you can find the place to add user style under Tools – Internet Options – General – Appearance – Accessibility – User style sheet (forgive me to not have the Chinese version of IE browser).
Since we have so many ways to add style, it is difficult to avoid the styles to produce cascades. like:
<p class="intro" style="color:red;">This is a paragraph.</p>
While using the above inline style, we also used it in our external style:
p{
color : yellow;
}
We even applied it on the <p> element that has class="intro":
{
color : blue;
}
In this way, we have multiple CSS rules on the same attribute color of the same element and specify the value. This situation is called cascading. When casing occurs, CSS Parser will determine the final selected value based on the priority algorithm.
The priority algorithm considers the following three aspects in sequence:
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 a certain attribute of a certain element, list all CSS rules that specify the value for the attribute. As in the above example, on the <p> element of class="intro", there are three CSS rules that specify the color attribute.
2. Prioritize according to the importance and source of the statement
There are two importance:
important
Normal (i.e. non-important)
Adding !important after CSS rules is more important than not added.
There are three sources:
user agent stylesheet – Browser Default Style
author stylesheet – Developer-defined style
user stylesheet – User defines styles in the browser
The priority order of importance and sources from low to high is:
user agent stylesheet
Normal rules in user style sheets
Normal rules in author style sheets
Important rules in author style sheets
Important rules in user style sheets
After the above sorting, if a CSS rule has a higher priority than all other contention rules, the algorithm ends and returns the value specified by the highest priority. If multiple CSS rules have the highest priority, they will continue to compete and the algorithm will enter step 3.
3. Sort by specificity
CSS will calculate the special value of the selector specified in multiple rules for each rule. The higher the value, the higher the priority.
A special value is an array-like value composed of 4 integers: a, b, c, d, where a has the highest weight, and so on, d has the lowest weight. The method of calculating the selector's special value is:
If the rule is an inline style, then a = 1
If the rule is specified by the selector, the number of id selectors that appear in the selector is the value of b
If the rule is specified by the selector, the sum of the number of attributes selector (including class selector) or pseudo-class selectors that appear in the selector is the value of c.
If the rule is specified by the selector, the sum of the number of elements selectors or pseudo-element selectors that appear in the selector is the value of d.
Universal selector * special value is 0,0,0,0
The official website provides some examples to deepen understanding.
When sorting by speciality values, since a has the highest weight, a is first compared, in the case of a same, b is compared, and so on. Therefore, no matter how big the values of b, c, and d are, inline style always has the highest speciality.
If a CSS rule has a higher priority than all other contention rules after sorting according to the above speciality, the algorithm ends and returns the value specified by the highest priority. If multiple CSS rules have the highest priority, they will continue to compete and the algorithm will enter step 4.
4. Compare the order in which CSS rules appear in the document
The following always has a higher priority than the previous one, so the statement that appears at the last will be used as the value of the attribute.
At this point, the algorithm ends. I was completely dizzy.