搞定 CSS 的 4 种引入方式

537 06-02

在 HTML 样式中有 4 种 CSS 引用方式，分别为：行内样式（行间样式、内联样式、行嵌样式）、内部样式、链入外部样式、导入外部样式。

行内样式（行间样式、内联样式、行嵌样式）： 在网页元素上通过 style="" 属性直接写样式。如：
```
<div style="color: green; margin-top: 30px;border: 1px solid red;width: 500px">行内样式实例1</div>
复制代码
```

内部样式表： 在网页上创建嵌入的样式表，通常写在 <head></head> 里面。如：

<style>
    p {
        color: #6478de;
        border: red 1px solid;
    }
</style>
复制代码

链入外部样式表： 将网页链接到外部样式表。先创建一个 CSS 文件，再在 HTML 中通过 <link> 链接此 CSS 文件。一般写在 <style></style> 的前面。如：
```
<link rel="stylesheet" type="text/css" href="qt_02_style.css">
复制代码
```
导入外部样式表： 通过 @import 引入其他的 CSS 文件（不建议使用）。如：
```
<style>
    @import "qt_02_style.css";
</style>
复制代码
```

以上 4 种 CSS 引用方式的区别：

行内样式只作用于当前标签。HTML页面不纯净，后期维护不方便。
内部样式作用于当前文件。CSS 代码写在 HTML 文档中，如果一个网站有很多 HTML 页面，每个文件都会变大，后期维护难度也大，如果 HTML 文件很少，CSS 代码也不多，也可以使用这种方式。
外部样式可以被多个 HTML 文件引用。实现了 HTML 代码与 CSS 的完全分离，使得前期开发和后期维护都十分方便。

外部样式分为 <link> 引入和 @import 引入两种方式。这两种方式的区别为：

<link> 是 XHTML 标签，除了可以加载 CSS 外，还可以定义 RSS 等其他事务，通过 <link> 标签中的 href="" 属性来引入外部文件。@import 属于 CSS 范畴，只能加载 CSS ，应该写在 CSS 中，且导入语句应写在样式表的开头，否则无法正确导入外部文件。
<link> 引用 CSS 时，在页面载入的时候可以同时加载样式，样式加载和结构加载是异步操作。可以防止访问网页时先加载完文字、图片等结构数据，然后再加载样式的问题。@import 需要网页结构完全载入以后加载样式文件。
<link> 是 XHTML 标签，无兼容问题。@import 是在 CSS2.1 提出的，低版本浏览器不支持。
<link> 支持使用 JavaScript 控制 DOM 来改变样式。@import 不支持。

以上 4 种 CSS 引用方式的优先级：

就近原则
内部样式、 <link> 链入外部样式表、 @import 导入外部样式表三种方式同时出现在 HTML 页面的 <head></head> 标签内时，谁离要修改样式的元素近，谁的优先级高
行内样式 > 内部样式、链入外部样式表、 @import 导入外部样式表

在实际项目开发中，最好使用外部样式。符合解耦合的开发思想。想要修改某个字体或者样式，直接在 CSS 文件中修改，不需要修改 HTML 结构，页面变得更加容易维护，也有利于提升开发者的工作效率。