index.html里怎么引用多个CSS文件？
作者：袖梨
2026-07-25
CSS样式表必须用<link>标签在<head>中按顺序引入，顺序决定层叠覆盖逻辑；@import仅限CSS文件内使用，HTML中禁用；路径需正确，避免FOUC和加载失效。
直接在 <head> 里放多个 <link rel="stylesheet"> 就行，顺序决定覆盖逻辑，不是随便堆砌。
多个 <link> 标签必须写在 <head> 里
浏览器只在解析 <head> 阶段预加载样式表，如果把 <link> 放到 <body> 或页面底部，会导致 FOUC（Flash of Unstyled Content）——页面先裸奔渲染，再突然套上样式，体验极差。
正确写法示例：
<head> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="theme.css"></head>
- 所有
<link>必须在<head>内，且最好放在<meta>和<title>之后、<script>之前 - 不要用
type="text/css"—— 现代浏览器默认识别，加了反而冗余 - 路径必须可访问：相对路径以当前 HTML 文件为基准，
../css/main.css和css/main.css容易写反
@import 不适合在 HTML 中直接使用
@import 是 CSS 规则，不是 HTML 标签。你不能在 <head> 里写 <style>@import "a.css";</style> 来替代 <link> —— 它会阻塞渲染，且只有在 CSS 文件内部或 <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; }
最终 h1 是蓝色，不是黑色。
- 推荐按语义顺序组织：重置 → 基础 → 组件 → 主题/覆盖
- 避免在
theme.css里反复用!important强顶，这说明结构设计有问题 - 用浏览器开发者工具的
Computed面板看哪条规则真正生效，比猜更可靠
真正难的不是加几个 <link>，而是搞清每条规则从哪个文件来、为什么被覆盖、要不要调整顺序或提高选择器权重——这些细节不查 DevTools，光靠写代码根本没法闭环验证。
