Home > Article > Web Front-end > Which of the three styles of css style sheet has higher priority?
CSS style priority order is: inline style (highest), built-in style (second), external style sheet (lowest). The one with the highest priority wins, and the same priority is applied in the order of inline, built-in, and external.
Three styles with high priority in the CSS style sheet
In the CSS style sheet, the priority is Used to determine which style to apply. The highest priority style will override all lower priority styles.
The three style types with high priority are:
1. Inline style
Priority: highest
Inline styles are written directly in HTML elements, using the style
attribute. For example:
<code class="html"><p style="color: red;">This text is red.</p></code>
2. Built-in styles
Priority: second
Built-in styles are defined by the browser by default style. They cannot be overridden by other types of styles. For example:
<code class="html"><h1>Heading</h1> <!-- 默认使用粗体和较大的字体 --></code>
3. External style sheets
Priority: lowest
External style sheets are stored in separate files in style. They are linked to the HTML document via the link
element. For example:
<code class="html"><link rel="stylesheet" href="style.css"></code>
Priority Rules
The style with the highest priority always wins. If multiple styles have the same priority, they are applied in the following order:
Example
For example, the following CSS style:
<code class="css">p { color: blue; } /* 外部样式表 */ p { color: green; } /* 内置样式 */ <p style="color: red;">This text is red.</p> /* 内联样式 */</code>
The final style applied will be the inline style because it has the highest priority. Therefore, the text will appear in red.
The above is the detailed content of Which of the three styles of css style sheet has higher priority?. For more information, please follow other related articles on the PHP Chinese website!