CSS（层叠样式表）的引入方式主要有以下四种：
1. 行内样式：直接在 HTML 标签中使用 style 属性添加 CSS 样式，例如： <p style="color:#f00;"></p> 。这种方式的缺点是会使 HTML 页面不纯净，文件体积增大，不利于浏览器编译和后期维护。
2. 内嵌样式：将 CSS 代码写在 <head> 标签内的 <style> 标签中，例如： <style type="text/css">p {color: blue;}</style> 。其优缺点是页面使用公共 CSS 代码，若网站页面多，每个文件会变大，后期维护难度大；但若文件少且 CSS 代码不多，这种方式较合适。
3. 链接样式（推荐）：使用 <link> 标签在 <head> 标签内引入外部 CSS 文件，例如： <link type="text/css" rel="stylesheet" href="style.css" /> 。这种方式实现了页面框架代码与表现 CSS 代码的完全分离，方便前期编写和后期维护。
4. 导入样式（不建议使用）：通过 @import 在 CSS 文件或 HTML 中的 <style> 标签内导入外部 CSS 样式表。在 HTML 中使用时，如下所示： <style type="text/css">@import url(style.css);</style> ；在 CSS 中使用时，类似这样： @import url(style.css); 。
link 和 @import 的区别主要有以下几点：
1. 从属关系： link 是 HTML 提供的标签，不仅可以加载 CSS，还可定义 rel 等属性； @import 是 CSS 提供的语法，只有导入样式表的作用。
2. 加载顺序： link 在页面加载时 CSS 会同时被加载； @import 引入的 CSS 需等页面加载完毕后再加载。
3. 兼容性： link 是 HTML 提供的语法，不存在兼容性问题； @import 是在 CSS2.1 提出的，低版本浏览器（如 IE5 以下）可能不支持。
4. DOM 可控性：使用 JavaScript 控制 DOM 时，可以通过插入 link 标签来改变样式，但不能通过 @import 改变。
5. 权重问题（有争议）：一些观点认为 link 标签引入的样式权重大于 @import 标签引入的样式权重。
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
