rel="stylesheet" 是强制要求,不能省略;href 路径须相对于 HTML 文件,且 link 必须置于 head 中,否则导致 FOUC 或样式不加载。

link 标签中 rel="stylesheet" 是强制要求,不能省略
浏览器只靠 rel 属性识别一个 link 是否为样式表资源。如果漏写或写错(比如写成 rel="style" 或 rel="css"),即使 href 指向了正确的 .css 文件,样式也不会加载——页面完全无样式,控制台也通常不报错,极难排查。
必须写成:<link rel="stylesheet" href="style.css">。HTML5 中 type="text/css" 可省略,但 rel 不能。
href 路径写错会导致 404,但页面可能“看起来正常”
常见现象:页面结构渲染出来了,文字有默认字体大小和间距,但颜色、布局、响应式全失效。打开开发者工具的 Network 面板,会看到 style.css 状态是 404 或 failed。
- 相对路径以当前 HTML 文件位置为基准,不是以 CSS 文件位置为准
-
href="css/style.css"表示 HTML 同级目录下有个css/文件夹 -
href="../assets/main.css"表示上一级目录的assets/下 - 用绝对路径(如
/static/css/base.css)更稳定,尤其在路由多层嵌套时
link 必须放在 head 中,且不能晚于首次渲染的 DOM
把 <link> 放到 <body> 里,或放在大量 HTML 内容之后,会导致 FOUC(Flash of Unstyled Content):页面先以无样式状态闪现,再突然应用样式。部分浏览器(如旧版 Safari)甚至直接忽略 body 内的 link。
立即学习“前端免费学习笔记(深入)”;
正确位置只有:<head><link rel="stylesheet" href="..."></head>。它不一定要紧贴 <title> 后,但必须在任何可能触发渲染的标签(如第一个 <h1>)之前。
@import 和 link 混用时,link 的优先级更高且加载更早
如果同时用了 <link href="a.css"> 和 <style>@import url("b.css");</style>,即使 b.css 里定义了相同选择器,a.css 的规则仍会优先生效——因为 link 的加载时机更早、解析优先级更高。
更关键的是行为差异:link 是并行加载,不影响 HTML 解析;而 @import 在 CSS 解析阶段才触发,会阻塞后续样式的计算,还可能造成样式延迟生效。生产环境应避免 @import 引入外部 CSS。
rel 属性的拼写准确性,以及 href 路径相对于 HTML 文件的语义——这两点不出错,外部样式表才能稳稳落地。


















