3 分钟搞定 CSS 的 4 种引入方式

最新推荐文章于 2023-09-17 21:06:53 发布

codepony

最新推荐文章于 2023-09-17 21:06:53 发布

阅读量178

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/codepony/article/details/117472534

版权

25 篇文章 0 订阅

订阅专栏

在 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 结构，页面变得更加容易维护，也有利于提升开发者的工作效率。

如果大家觉得不错的话，欢迎点赞、收藏、转发❤❤❤~

可以获取PDF书籍源码、教程等给大家免费使用点击链接加入【web前端技术】：link.zhihu.com/?target=htt…

关注