css样式表必须用标签在中按顺序引入，顺序决定层叠覆盖逻辑；@import仅限css文件内使用，html中禁用；路径需正确，避免fouc和加载失效。
直接在 里放多个 <link rel="stylesheet"> 就行，顺序决定覆盖逻辑，不是随便堆砌。
多个 <link> 标签必须写在
浏览器只在解析 阶段预加载样式表，如果把 <link> 放到 或页面底部，会导致 FOUC（Flash of Unstyled Content）——页面先裸奔渲染，再突然套上样式，体验极差。
正确写法示例：
<link rel="stylesheet" href="reset.css"><link rel="stylesheet" href="base.css"><link rel="stylesheet" href="theme.css">
- 所有
<link>必须在内，且最好放在<meta>和<title></title>之后、<script></script>之前 - 不要用
type="text/css"—— 现代浏览器默认识别，加了反而冗余 - 路径必须可访问：相对路径以当前 HTML 文件为基准，
../css/main.css和css/main.css容易写反
@import 不适合在 HTML 中直接使用
@import 是 CSS 规则，不是 HTML 标签。你不能在 里写 <style>@import "a.css";</style> 来替代 <link> —— 它会阻塞渲染，且只有在 CSS 文件内部或 <style></style> 块开头才合法，实际加载时机晚于 <link>，还可能触发额外的 HTTP 请求。
-
@import在 CSS 文件中可用，比如main.css里写@import url("variables.css"); - 但 HTML 中必须用
<link>，否则样式可能延迟应用甚至失效 - IE6–8 对
@import支持不稳定，已淘汰场景下仍需规避
加载顺序 = 层叠顺序，别指望“并行生效”
CSS 的层叠（cascading）机制决定了：后加载的文件中同权重的选择器，会覆盖前面文件里的同名规则。这不是“合并”，而是“后写赢”。比如：
/* reset.css */
h1 { color: black; margin: 0; }
<p>/<em> theme.css （后加载）</em>/
h1 { color: #2563eb; }</p>
最终 h1 是蓝色，不是黑色。
- 推荐按语义顺序组织：重置 → 基础 → 组件 → 主题/覆盖
- 避免在
theme.css里反复用!important强顶，这说明结构设计有问题 - 用浏览器开发者工具的
Computed面板看哪条规则真正生效，比猜更可靠
真正难的不是加几个 <link>，而是搞清每条规则从哪个文件来、为什么被覆盖、要不要调整顺序或提高选择器权重——这些细节不查 DevTools，光靠写代码根本没法闭环验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
