CSS引入方式有明确优先级：内联式 > 嵌入式 > 外部式，作用域与维护成本差异显著；内联式仅适用于调试、邮件模板等特殊场景，嵌入式应置于<head>中且限于页面独有样式，外部式通过<link>引入，利于缓存与复用。
内联样式、<style>嵌入式、<link>外部引入——这三种方式不是并列可选，而是有明确优先级、作用域和维护成本差异的方案。选错一种，后期改起来就是全局搜索加手动替换。
内联样式只该出现在调试或邮件模板里
直接写style="color: red; margin: 0"确实能立刻生效，但它把样式逻辑硬塞进结构层，破坏了关注点分离。浏览器渲染时它权重最高，但这也意味着其他地方加!important都可能被它盖过去。
- 常见错误：用
style="display: none"控制显隐，结果 JS 切换 class 时样式打架，控制台看到一堆被 cancel 的声明 - 真实适用场景只有三个：服务端动态注入单次样式（如用户主题色）、邮件 HTML（部分客户端只认内联）、临时加个 border 查布局
- 别用它写媒体查询或伪类——
style属性根本不支持:hover或@media
<style>标签必须放在<head>里，且只放页面独有规则
<style>写在<body>底部虽然浏览器会容错渲染，但可能触发怪异模式，而且 CSSOM 构建顺序混乱，JS 拿不到准确的 computedStyle。
- 别在
<style>里用@import——它会阻塞后续 CSS 解析，比<link>还慢 - 适合放的内容：某个活动页的特殊动效 keyframes、需要配合
<script>生成的 CSS 变量（比如:root { --theme-color: #xxx }） - 整站通用样式（按钮、字体、栅格）塞进去？HTML 文件体积暴涨，CDN 缓存失效，协作时改个 padding 都要提 PR 改 HTML
<link rel="stylesheet">路径出错是白屏主因
404 的 CSS 文件不会报红错，只会静默失败，页面留白或回退到浏览器默认样式。很多人查半天 JS 报错，其实net::ERR_ABORTED早就在 Network 面板里躺着了。
立即学习“前端免费学习笔记（深入）”；
- 路径必须写死：相对路径以当前 HTML 为基准，别依赖
<base>，它容易在 iframe 或 history.pushState 后失准 - 非关键 CSS 加
media属性：比如print.css加media="print"，手机端根本不会下载 - 首屏样式别拆太碎：把
header.css、banner.css、footer.css全<link>进来，HTTP/1.1 下就是多次阻塞请求
真正难的不是语法，是判断某条规则该落在哪一层：要不要复用、会不会被 JS 动态改、是否影响首屏渲染。一个color值，放在内联里改得快，但上线后就是技术债；放在外部文件里改得重，但三年后还能靠缓存扛住流量洪峰。
