Element selector>Class selector>Attribute selector>Pseudo class>ID selector>Inline style"."/> Element selector>Class selector>Attribute selector>Pseudo class>ID selector>Inline style".">
Home > Article > Web Front-end > What types of css style sheets are there? What is selector priority?
There are three types of css style sheets: inline style sheets, internal style sheets and external style sheets. The selector priority is: "Universal selector>Element selector>Class selector>Attribute selector>Pseudo-class>ID selector>Inline style".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
What are the types of css style sheets?
According to the position where the CSS style is written (or the way it is introduced), CSS style sheets can be divided into the following three categories:
1. Inline style sheets
Inline style is to put the CSS style directly in the tag within the line of code. It is usually placed in the style attribute of the tag. Since the inline style is directly inserted into the tag, it is the most direct way. method, and it is also the most inconvenient style to modify.
Example:
<p style="background-color: #999900">行内元素,控制段落-1</p>
2. Internal style sheet
The internal style sheet is contained in the c9ccee2e6ea535a969eb3f532ad9fe89 tag, a 6e1a4467d5acc8df5ef5c3c6a55bf61c tag represents an internal style sheet.
If a web document contains multiple c9ccee2e6ea535a969eb3f532ad9fe89 tags, it means that the document contains multiple internal style sheets.
Example:
<style> div { color: blue; font-size: 16px; } </style>
3. External style sheet
If the CSS style is placed in a file outside the web page document, it is called an external style. table, a CSS style sheet document represents an external style sheet.
In fact, the external style sheet is a text file with the extension .css. When you copy the CSS style code into a text file and save it as a .css file, it is an external style sheet.
In the HTML page, use the 9b3737d50531bee70b4389e7b6fabf02 tag to introduce the file. The specific introduction code is as follows:
<link rel="styleheet" href="css文件路径">
Priority of multiple style sheets:
Inline style inline style > Internal style sheet > External style sheet External style sheet > Browser default style
The following is an explanation of selector priority and an explanation of weight It's good, so I excerpted it from the novice tutorial
Priority is determined by the browser and applied to the element by judging which attribute values are most relevant to the element. The priority is determined only by the matching rules composed of selectors.
Priority is a weight assigned to a specified CSS declaration, which is determined by the value of each selector type in the matching selector.
What is the selector priority?
The following is a list of selectors with increasing priority:
When the !important rule is applied to a style declaration, the style declaration overrides any other declaration in CSS, no matter where it is in the declaration list . However, !important rules have nothing to do with priorities. Using !important is not a good practice because it changes the original cascading rules of your stylesheet, making it difficult to debug.
Some rules of thumb:
Explanation:
1. The maximum weight of the inline style sheet is 1000 ;(Learning video sharing: css video tutorial)
The above is the detailed content of What types of css style sheets are there? What is selector priority?. For more information, please follow other related articles on the PHP Chinese website!