css 应放在 中，不可置于 内；否则引发 fouc、样式丢失、seo 问题； 需按重置、框架、自定义顺序排列；禁用 @import 和动态插入；构建工具输出也需校验。
css 应该放在
浏览器解析 HTML 是从上到下流式进行的。如果把 <link rel="stylesheet"> 放在 里（哪怕只是开头），会导致：页面先无样式渲染一次（FOUC，Flash of Unstyled Content），再重绘；部分 CSS 选择器（如 @import 在 <style></style> 块中）可能被忽略；SEO 工具和部分爬虫无法正确提取样式上下文。
标准写法是紧贴 起始标签之后、<title></title> 之后或之前均可，但推荐在 <title></title> 之后，便于语义清晰：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的页面</title> <link rel="stylesheet" href="style.css"> </head> <body> ... </body> </html>
多个 <link> 的加载顺序会影响样式优先级和渲染阻塞
CSS 是“渲染阻塞资源”——浏览器会暂停 HTML 解析，直到所有 <link rel="stylesheet"> 加载并解析完成。因此顺序直接决定：
- 后加载的 CSS 规则可覆盖前面同权重的选择器
- 若前一个 CSS 文件网络失败或超时，后续 CSS 和 JS（在它之后的）可能被延迟执行
- 不要把第三方 CSS（如 CDN 上的 Bootstrap）放在自定义 CSS 后面，除非你明确想覆盖它的默认样式
典型安全顺序：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="custom.css">
避免在 <link> 标签
虽然 JS 可以用 document.head.appendChild() 插入 <link>，但这不会触发浏览器的“阻塞式解析”，而是异步加载，导致：
- 样式应用滞后，用户看到闪动或错位布局
-
getComputedStyle()在插入后立即调用可能取不到预期值 - 媒体查询（
media="print"等）可能不生效
如需条件加载（比如暗色模式切换），应使用 media 属性配合 JS 切换 disabled 状态，而不是增删节点：
<link id="theme-css" rel="stylesheet" href="light.css" media="screen">
然后 JS 控制：document.getElementById('theme-css').disabled = true;
内联 <style></style> 和 @import 的位置陷阱
<style></style> 块必须也在 中，否则 HTML 不合法（验证器报错），且多数浏览器会自动将其移到 ，但行为不可靠。
更危险的是在 <style></style> 块里用 @import：
-
@import必须出现在<style></style>块最前面，否则无效 - 它会引发额外 HTTP 请求，并且是串行阻塞的（比
<link>更慢） - 不支持
media属性的早期写法（如@import url(x.css) screen and (min-width:768px)）在旧版 Safari 中有兼容问题
结论：不用 @import，全部改用 <link>。
<link rel="stylesheet"> 都稳定落在 
