CSS 加载方式及优先级CSS 样式加载有以下四种方式行内样式直接通过 HTML 元素的 style 属性声明样式

CSS 样式加载有以下四种方式

行内样式

直接通过 HTML 元素的 style 属性声明样式

<div style="color: orange;">Hello World</div>

内部样式表

使用 <style></style> 标签声明样式

<head>
    <style>
        .title {
            color: orange;
        }
    </style>
</head>

链入外部样式表

使用 link 标签来引入 CSS 文件

<head>
    <link rel="stylesheet" href="./app.css">
</head>

导入外部样式表

采用 @import 导入 CSS 样式

<head>
    <style>
        @import url(./app.css);
    </style>
</head>

四种方式的优先级

行内样式的优先级最高
内部样式、链入和导入三者中，谁越往后声明，谁优先级就越高。

/* a.css */

.title {
    color: orange;
}

/* b.css */

.title {
    color: red;
}

例

<head>
    <!-- 内部样式 -->
    <style>
        .title {
            color: pink;
        }
    </style>

    <!-- 链入外部样式表 -->
    <link rel="stylesheet" href="./a.css" />

    <!-- 导入外部样式表 -->
    <style>
        @import url(./b.css);
    </style>
</head>
<body>
    <div class="title" style="color: blue;">Hello World</div>
</body>

F12 审查元素属性可以看到 color 属性的优先级为 blue(行内样式) > red(导入) > orange(链入) > pink(内部样式)，此优先级也是当前文档声明样式四种方式的优先级。