CSS引用方式

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

行内样式（行间样式、内联样式、行嵌样式）： 在网页元素上通过 style="" 属性直接写样式。

链入外部样式表： 将网页链接到外部样式表。先创建一个 CSS 文件，再在 HTML 中通过 链接此 CSS 文件。一般写在 的前面。

导入外部样式表： 通过 @import 引入其他的 CSS 文件（不建议使用）。

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

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

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

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

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

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

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