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

2024-02-04 12:36| 来源: 网络整理| 查看: 265

这是我参与更文挑战的第 1 天，活动详情查看：更文挑战

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

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

行内样式实例1

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

p { color: #6478de; border: red 1px solid; }

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

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

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

【本文地址】

公司简介

联系我们