link标签必须写在中且rel="stylesheet"和href路径正确,否则样式彻底不加载;放中会引发FOUC、IE忽略或重排,路径以HTML文件为基准,rel属性拼写错误将静默失效。

link 标签引入 CSS 文件,核心就两条:必须写在 里,且 rel="stylesheet" 和 href 都得对——错一个,样式就彻底不加载,连报错都没有。
为什么 link 必须放在 中
浏览器是流式解析 HTML 的,<link rel="stylesheet"> 放在 里,会导致:已开始渲染的 DOM 突然发现缺样式,强制重排(reflow);弱网下大概率出现 FOUC(内容先裸奔、再闪一下才套上样式);IE6–8 直接忽略该标签,整页无样式。SSR 或 Next.js 类框架还会因首屏 HTML 与客户端 hydration 不一致而报错。
-
<link>应紧贴<title></title>或<meta>后,别塞在一堆<script></script>中间 - 别信“CSS 放底部能提速”——那是 JS 的逻辑,对样式表完全反效果
- 用
<script></script>动态插入<link>会绕过阻塞机制,必然触发 FOUC
href 路径写错是 404 的最常见原因
Network 面板看到 style.css 返回 404,90% 是路径问题。关键点:路径始终以 HTML 文件所在目录为基准,不是编辑器打开位置,也不是 CSS 文件自己的位置。
- 同级目录:
href="style.css"(./style.css中的./多余,可删) - 子目录:
href="css/main.css",不是./css/main.css - 上级目录:
href="../reset.css",但嵌套超过两级(如../../)极易随文件移动失效 - 推荐根相对路径:
href="/assets/css/theme.css"(开头/表示网站根目录) - Linux 服务器注意大小写:
Style.css≠style.css
rel="stylesheet" 拼错或遗漏会静默失败
没有 rel="stylesheet",或者写成 rel="style"、rel="css"、rel= stylesheet(缺引号)、rel="stylesheet "(末尾空格),浏览器根本不会发起请求——Network 面板里压根看不到这条记录,调试时容易误判为服务器或网络问题。
立即学习“前端免费学习笔记(深入)”;
-
rel="stylesheet"是强制的,不能省,不能拼错,不能少引号,不能带空格 -
type="text/css"在 HTML5 中已冗余,写了不报错但没必要 - 多个
<link>按 HTML 中顺序加载,后引入的同权重规则会覆盖前面的 - 绝对别在 CSS 里用
@import引其他 CSS——它串行、阻塞、多一次网络往返
真正容易被忽略的,是路径基准和 rel 属性的严格性:它们不报错、不警告,只安静跳过。等你花半小时检查 CSS 写法、清缓存、换浏览器……才发现 rel 少了个字母,或者 href 多了个点。



















