标签是 HTML 中引入外部 CSS 的唯一标准化方式，必须写 rel="stylesheet" 才能生效，需置于 内、使用可解析的相对路径，禁用 @import 以避免性能与兼容性问题。
<link> 标签是 HTML 中引入外部 CSS 样式表的唯一标准化方式，<style></style> 和 <script></script> 内联写法不属于“引入”，而 @import 是 CSS 规则，非 HTML 机制，且有性能与兼容性风险。
必须用 rel="stylesheet" 声明关系
浏览器靠 rel 属性识别资源用途。仅写 <link href="main.css"> 不会加载 CSS —— 缺少 rel，它会被忽略或当作无意义链接处理。
-
rel="stylesheet"是强制要求，不可省略、不可拼错（如rel="style"或rel="css"都无效） -
rel="preload"或rel="prefetch"不会触发样式应用，只用于预加载 - 若误写成
rel="alternate stylesheet"，该样式表默认不启用，需用户手动切换（如浏览器「视图 → 页面样式」菜单）
href 路径必须可解析，且优先用相对路径
href 指向的 CSS 文件必须能被浏览器成功请求到，否则控制台报 Failed to load resource: net::ERR_ABORTED，页面无样式。
- 推荐使用相对于 HTML 文件的路径，例如 HTML 在
/pages/index.html，CSS 在/css/main.css，则写href="../css/main.css" - 避免绝对路径如
href="C:/project/css/main.css"（本地文件协议下可能偶然生效，但部署后必挂） - 以
/开头的根对路径（如href="/css/main.css"）依赖服务器配置，静态服务器通常 OK，但某些嵌入式环境或子路径部署时可能 404
加载时机与位置：必须放在
CSS 是渲染阻塞资源（render-blocking），浏览器会暂停 HTML 解析，直到关键 CSS 加载并解析完成。放错位置会导致 FOUC（Flash of Unstyled Content）或布局偏移。
立即学习“前端免费学习笔记（深入）”；
- 必须置于
内，不能放在底部（即使 DOM 已就绪，也不会补应用样式） - 应紧贴
开始处，早于<title></title>或其他元信息（部分浏览器在解析<title></title>前就开始下载 CSS） - 多个
<link>按顺序加载和应用，后声明的规则可覆盖前面同名选择器（层叠顺序依赖 HTML 中的书写顺序，而非文件内容）
不要用 @import 替代 <link>
@import 是 CSS 语法，在 <style></style> 块或另一个 CSS 文件中使用，它会阻塞后续 CSS 解析，并导致串行加载（A @import B，B 必须等 A 下载完才开始请求），显著拖慢首屏。
- 例如
<style>@import url("theme.css");</style>—— 这比直接<link href="theme.css">多一次 HTTP 往返（除非开启 HTTP/2 多路复用，但仍无法并行） - IE6–IE8 对
@import的解析有 bug，例如不支持媒体查询条件中的@import - 构建工具（如 Webpack、Vite）通常将
@import提前编译合并，但源码中仍建议统一用<link>控制加载链路
真正容易被忽略的是：当使用构建工具产出带哈希的 CSS 文件（如 main.a1b2c3.css）时，<link> 的 href 必须与实际输出路径严格一致；任何路径拼接错误、缓存未更新、CDN 同步延迟，都会让样式表静默失效——此时页面看起来“没写 CSS”，但其实只是 404 了。
