link是生产环境唯一推荐的引入方式，其他两种仅限调试或极简场景；link必须满足rel="stylesheet"、href路径相对HTML文件、置于<head>内三个条件，否则导致404、FOUC或媒体查询失效。
link 是生产环境唯一推荐的引入方式，其他两种仅限调试或极简场景
用 link 引入外部 CSS 必须满足三个条件
浏览器只认 rel="stylesheet" 这个值，漏写或拼错（比如写成 rel="style"）会导致样式完全不加载；href 路径必须相对于当前 HTML 文件，不是相对于 CSS 文件或服务器根目录；link 标签必须放在 <head> 里，塞进 <body> 底部会触发 FOUC（无样式闪屏）。
常见错误现象：
- 控制台报
404 Not Found—— 检查文件路径是否大小写一致、后缀是否为.css、目录层级是否正确 - 页面先白屏再渲染样式 ——
link被误放到了<body>中 - 样式生效但媒体查询失效 —— 错把
media="print"写死，没改成media="all"或删掉
style 标签只适合单页临时调试
它不发新请求，加载快，但所有规则都绑定在当前 HTML 上，无法被缓存，也无法跨页面复用。一旦项目超过一个页面，改一处样式就得同步改多个 HTML 文件。
使用时注意：
立即学习“前端免费学习笔记（深入）”；
- 别在
<body>里写<style>，HTML 标准不支持，某些 SSR 框架会跳过解析 - 和外部 CSS 冲突时，同名属性以
<style>里的为准（因为加载更晚） - 别复制整套框架 CSS 进来，体积膨胀、压缩困难、开发者工具里难定位具体来源
style 属性不是“引入 CSS”，而是覆盖单点样式
它的优先级最高，但只该用于 JS 动态控制（比如 element.style.opacity = "0.5"），或服务端渲染时注入一次性状态样式（如禁用态、加载中）。手动在 HTML 里大量写 style="color: red; margin: 0" 是反模式。
典型误用：
- 多个
<div>重复写同一组style值 → 应抽成 class + 外部 CSS - 试图在
style属性里写媒体查询或选择器 → 语法无效，浏览器直接忽略 - 用它实现响应式布局 → 实际上只能固定值，无法响应视口变化
@import 在 CSS 文件里可用，但在 HTML 中不能直接用，且性能比 link 差一截：它会阻塞后续样式解析，嵌套多了容易导致样式加载延迟甚至 FOUC。生产环境请绕开。 
