最推荐用 link 标签在 head 中引入外部 CSS，需确保 href 路径正确、rel="stylesheet" 不可省略；style 标签适合小项目内联样式；行内 style 属性仅用于动态单点控制；@import 性能差且易引发 FOUC，应避免使用。
link 标签引入外部 CSS 是最常用也最推荐的方式
浏览器能并行下载、支持媒体查询、可被缓存，而且不会阻塞 dom 解析（除非加了 rel="preload" 之类）。关键是要把 <link> 放在 <head> 里，别塞到 <body> 底部——那样会导致页面先无样式渲染，再闪一下才变样。
- 路径写错是高频问题：
href="css/style.css"和实际文件位置对不上，浏览器控制台会报404；用相对路径时注意当前 HTML 文件所在目录 - 别漏写
rel="stylesheet"，少了它，浏览器根本不当这是样式表，href再对也没用 - 如果用了
media="print"却想在屏幕上生效，得改成media="all"或直接删掉media属性
style 标签写内联 CSS 适合小项目或临时调试
所有样式规则直接写在 HTML 的 <style> 标签里，不发新请求，但无法复用、不好维护。它只影响当前页面，也不参与缓存，改一次就得改 HTML。
- 别在
<body>里放<style>，虽然浏览器能认，但语义错误，校验通不过，某些 SSR 场景还会出意料外的渲染顺序问题 - 如果和外部 CSS 冲突，优先级按“就近原则”：同一样式属性，
<style>里的比<link>引入的权重高（因为更晚加载） - 避免写大段 CSS 在里面，尤其别复制粘贴整份框架样式——体积膨胀、压缩困难、开发者工具里难定位
style 属性写行内样式只该用于动态、单点控制
style 属性写在 HTML 标签上，比如 <div style="color: red; margin: 0">，它的优先级最高，但完全没法复用，还污染结构。它不是引入 CSS 的方式，而是覆盖方式。
- JS 动态修改样式时用它没问题：
element.style.opacity = "0.5"，但别手动写一堆带分号的字符串拼接 - 千万别用它写响应式逻辑，比如
style="width: 100%; @media (max-width: 768px) { width: 100% }"—— 这语法根本无效，style属性不支持媒体查询或选择器 - 如果发现你在多个标签上重复写同一组
style值，说明该抽成 class + 外部 CSS 了
@import 在 CSS 文件里导入其他 CSS 很危险
@import 是 CSS 规则，只能写在 CSS 文件顶部（或 <style> 标签里），不能直接写在 HTML 中。它会阻塞后续样式加载，且嵌套层级深了容易引发 FOUC（Flash of Unstyled Content）。
- 别在 HTML 的
<style>里写@import url("base.css")—— 虽然语法合法，但性能比<link>差一截，浏览器要先解析完这个<style>才去请求 base.css - Webpack/Vite 等打包工具默认不处理 CSS 中的
@import（除非配了对应 loader），容易导致构建后样式丢失 - 如果非要用，确保它在 CSS 文件第一行，前面不能有注释或空行，否则部分旧浏览器会忽略整条规则
真正要注意的其实是路径解析逻辑和加载时机——不是“会不会用”，而是“在哪加、怎么引、谁先谁后”。很多样式失效，查半天发现只是 href 少了个 ../，或者 <link> 被不小心挪到了 </body> 之前但没闭合标签，导致整个 head 被吞掉。
立即学习“前端免费学习笔记（深入）”；
