Home  >  Article  >  Web Front-end  >  Which of the three styles of css style sheet has higher priority?

Which of the three styles of css style sheet has higher priority?

下次还敢
下次还敢Original
2024-04-06 03:00:22725browse

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.

Which of the three styles of css style sheet has higher priority?

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:What is css selectorNext article:What is css selector