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:

1. Inline styles
2. Built-in styles
3. External style sheets

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!