<link rel="stylesheet">是唯一标准方式，因它在HTML解析时即被预加载器识别并行下载；@import属CSS规则，写在HTML中会阻塞渲染、延迟请求，导致首屏慢200–600ms。
link 标签是 HTML5 中引入外部 CSS 的唯一标准方式，@import 不推荐用于 <head> 内，它只应在 CSS 文件内部使用，否则会阻塞渲染、增加关键路径长度。
为什么必须用 <link rel="stylesheet"> 而不是 @import
在 HTML 中写 @import url("style.css");（哪怕放在 <style> 里）会导致浏览器先下载 HTML，再解析到该语句，再去请求 CSS —— 这个过程无法与 HTML 解析并行，严重拖慢首屏渲染。而 <link> 在解析 HTML 时就能被预加载器识别并提前发起请求。
-
@import在 HTML 中属于“CSS 规则”，不是资源预声明，不触发预加载 -
<link rel="stylesheet">是 HTML 级别资源提示，现代浏览器会立即 fetch - 实测：含
@import的页面 TTFB 后的样式加载延迟常高出 200–600ms
href 路径写错是最常见的 404 原因
路径错误不会报语法错误，只会静默失败——你看到的是无样式的白页或默认样式。检查要点：
- 确保 CSS 文件真实存在，且文件名大小写完全一致（Linux 服务器区分大小写）
- 相对路径以 HTML 文件为基准，不是以当前 URL 或 JS 执行位置为准
- 避免用
file://协议直接双击打开 HTML：多数浏览器会禁用link加载本地 CSS（CORS 策略） - 在开发者工具 Network 面板中过滤
css，看对应请求是否返回 200；若显示 404，点开链接确认地址是否可访问
rel 和 type 属性怎么设才稳妥
rel="stylesheet" 是强制项，缺了就当普通链接处理，样式不会应用。type 在 HTML5 中已废弃，显式写 type="text/css" 不报错但多余，还可能在某些旧构建工具中引发警告。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<link rel="stylesheet" href="css/main.css"> - ❌ 错误写法：
<link rel="import" href="main.css">（rel="import"已废弃） - ❌ 不必要写法：
<link rel="stylesheet" type="text/css" href="main.css"> - ⚠️ 注意：
rel="preload"不能替代stylesheet，它只预加载不解析应用
多个 CSS 文件的加载顺序和优先级
CSS 是渲染阻塞资源，浏览器会按 <link> 出现顺序依次下载、解析、应用。后加载的样式规则会覆盖前面同选择器的声明（层叠规则），但**不会改变加载时机**。
- 把重置/基础样式（如 normalize.css）放在最前
- 把组件级、页面级样式放在中间
- 把主题色、暗色模式等条件样式放最后（方便覆盖）
- 不要用
media="print"等属性“隐藏”本该加载的屏幕样式——它只是延迟加载，仍参与关键路径
真正容易被忽略的是协议一致性：如果 HTML 通过 HTTPS 加载，但 href 写了 http:// 开头的路径，现代浏览器会直接屏蔽该请求（Mixed Content）。务必用协议相对路径（//cdn.example.com/style.css）或全 HTTPS。
