最推荐使用<link rel="stylesheet" href="style.css">引入CSS，因其支持并行下载、媒体查询、缓存且不阻塞渲染；应置于<head>中，用根路径如/css/style.css，避免相对路径出错或@import串行加载导致FOUC。
link标签引入外部CSS最常用也最推荐
绝大多数项目都用 <link rel="stylesheet" href="style.css">，因为浏览器能并行下载、支持媒体查询、可被缓存且不影响渲染阻塞（相比@import）。它写在 <head> 里，路径是相对于HTML文件的，不是CSS文件本身。
- 别写成
<link href="style.css">—— 缺少rel="stylesheet"浏览器根本不当CSS处理 - 如果用相对路径，
../css/style.css这种写法容易因HTML所在层级变化而404，建议统一用根目录路径：/css/style.css - 不要在
<body>里放<link>，虽然能生效，但会触发额外的样式重排，还可能被某些老浏览器忽略
@import在CSS里导入其他CSS文件要谨慎
@import 是CSS规则，只能写在CSS文件顶部或 <style> 块里，不能直接写在HTML中。它本质是串行加载：浏览器必须先下载并解析完当前CSS，才能发起 @import 的请求，容易造成FOUC（Flash of Unstyled Content）和性能瓶颈。
- 常见错误：在HTML里写
<style>@import "theme.css";</style>—— 看似方便，但比<link>多一次HTTP往返，且无法利用预加载 - 如果非要用，确保
@import在CSS文件最开头，否则会被忽略；也不能放在@media或其他规则内部 - IE6–IE8对
@import支持有bug，比如不识别带媒体类型的写法：@import "print.css" print;
style标签写内联CSS只适合极小范围或动态场景
<style> 标签适合覆盖全局样式、临时调试，或者服务端生成的页面中嵌入少量动态计算出的样式（比如主题色）。但它无法缓存，每次HTML加载都要重新传输，也不利于CSS复用和维护。
- 别把整套Bootstrap复制进
<style>—— 文件体积暴涨，且浏览器无法复用已缓存的CSS资源 - 如果用
<style>配合scoped（Vue）或 Shadow DOM，注意原生HTML不支持scoped属性，写了也没用 - 内联样式优先级高于外部CSS，但低于
style属性，容易引发意料外的覆盖，调试时得打开DevTools逐层看computed styles
三种方式混用时的加载顺序和权重问题
浏览器按HTML中出现的顺序依次解析CSS资源，同级规则以最后加载的为准。但要注意：外部 <link> 和 <style> 是并行解析的，而 @import 是串行依赖的——这意味着哪怕 @import 写在 <link> 后面，它引用的文件也可能后加载完成。
立即学习“前端免费学习笔记（深入）”；
- 不要指望
@import "a.css";+<link href="b.css">能保证b.css一定覆盖a.css的同名规则——实际取决于谁先解析完 - 内联
style属性（如<p style="color:red">）优先级最高，其次是<style>和<link>中的规则（按源码顺序），@import引入的规则参与同一级排序 - 所有方式都不解决CSS作用域问题，class名冲突该发生还会发生，别以为换引入方式就能避免命名污染
真正影响体验的不是“用哪种”，而是“怎么组织路径”“是否触发重复加载”“有没有意外提升选择器权重”。尤其在构建工具介入后，<link> 的href可能被哈希化，这时候手写相对路径就很容易失效。细节藏在路径解析逻辑和加载时机里，而不是语法本身。
