行内样式优先级最高（specificity=1000），但破坏结构分离、无法响应式、不支持伪类/媒体查询，仅适用于js动态控制、邮件模板等极少数场景；外部样式表是工程首选，但路径错误或加载顺序不当会导致失效；内部样式表易冲突且不可复用。
行内样式优先级最高，但破坏结构分离，只适合极少数动态或临时场景；外部样式表是工程首选，但路径写错或加载顺序不当会直接失效；内部样式表看似方便，实则容易和外部样式冲突且无法复用。
行内样式 style 属性为什么不能乱用
它把样式硬编码在 HTML 标签里，比如 <p style="color: red;">文字</p>。浏览器渲染时它确实赢过所有其他 CSS，但问题不在“能不能生效”，而在维护成本：
- 每个相同样式的元素都得重复写一遍
style，改颜色要改十处？ - JS 动态设置时才真正需要它，比如
element.style.opacity = '0.5'；纯静态页面硬塞style是自找麻烦 - 邮件模板等特殊环境除外，普通网页开发中它基本等于技术债
<link rel="stylesheet"> 和 @import 不是同一类东西
<link> 是 HTML 标签，@import 是 CSS 规则，二者行为差异极大：
-
<link href="main.css">在 HTML 解析阶段就发起请求，和页面结构并行加载 -
@import url("main.css");必须写在<style></style>块里，且只有等包含它的 CSS 文件下载解析完后才触发请求——可能造成 FOUC（无样式内容闪烁） - IE5 及更早版本不支持
@import，现代项目应直接弃用 -
<link>还能加载rel="preload"、rel="icon"等非 CSS 资源，@import仅限 CSS
内部样式表 <style></style> 的适用边界很窄
它写在 里的 <style></style> 标签中，比如：
<style>
.btn { background: #4a90d9; }
</style>
表面看“不用管路径”，实际隐患不少：
- 样式作用域仅限当前页，但代码却混在 HTML 里，团队协作时没人愿改这个文件
- 如果同时引入了外部 CSS，又在
<style></style>里写了同名选择器，谁在后面谁赢——不是按“内部 > 外部”顺序，而是按文档流位置 - 无法被构建工具压缩、拆包、提取，上线后多出几百字节没必要的内联 CSS
- 唯一合理场景：单页静态演示页、HTML 邮件内嵌、或 SSR 渲染首屏关键 CSS（此时需配合
critical CSS提取逻辑）
真正容易被忽略的点是：三种方式混用时，不是简单按“行内 > 内部 > 外部”判定结果，而是先比选择器权重（#id > .class > div），再比声明顺序。一个 div 标签选择器写在外部文件末尾，照样能覆盖内部样式表里更早写的 .class ——权重和位置，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
