内联样式优先级最高但仅适用于临时调试、邮件模板等场景，外部样式表才是工程常态；应避免混用导致覆盖混乱和缓存问题，推荐通过classname切换样式而非直接操作style。
内联样式用 style 属性，但只适合临时调试
直接在 HTML 标签里写 style="color: red; font-size: 14px;" 就是内联样式。它优先级最高，能快速验证某个样式是否生效，比如改一个按钮颜色看效果。但问题也很明显：style 值没法复用、无法被 JavaScript 动态管理类名、维护时要到处改、还污染 HTML 结构。
常见错误现象：div style="margin: 0; padding: 0;" 写了十次，后来想统一加 box-sizing: border-box，就得手动找十处——漏改一处就错位。
- 适用场景：临时占位、服务端生成一次性静态页、邮件模板（部分客户端只认内联）
- 不适用场景：任何需要复用、响应式、主题切换或多人协作的项目
- 注意：
!important在内联里默认生效，但会进一步锁死后续覆盖能力
外部样式表用 <link rel="stylesheet">，才是工程常态
把 CSS 写进 style.css 文件，再用 <link href="style.css" rel="stylesheet"> 引入。浏览器会缓存这个文件，HTML 只管结构，CSS 只管表现，分工清晰。
性能影响很实际：首次加载多一次 HTTP 请求（现代用 HTTP/2 或 preload 可缓解），但后续页面全走缓存；而内联样式每次 HTML 都得重传一遍 CSS 冗余代码。
