内联样式优先级最高，但仅用于临时调试、动态值或邮件模板；外部样式表最推荐，利于缓存复用；块适用于页面独有样式。
怎么给HTML元素加CSS：三种方式优先级说清
内联样式（style属性）优先级最高，但别乱用。它会直接覆盖外部CSS文件和<style></style>块里的同名规则，调试时容易“找不到为什么没生效”。真要加，只用于临时调试、服务端动态生成的单次样式，或必须隔离的组件内联状态（比如进度条宽度）。别把它当主力写法——维护成本高，没法复用，还污染HTML结构。
常见错误现象：background-color写了但没变色，其实是被后面加载的CSS文件里带!important的规则盖掉了；或者用了color: #333，结果文字还是蓝色，因为父级链接自带a:link颜色且没被重置。
- 外部样式表（
<link rel="stylesheet" href="main.css">）最推荐，利于缓存和复用 -
<style></style>块适合页面独有、不复用的样式，比如某页特定布局微调 -
style属性仅限单个元素、动态值（如width: ${percent}%）、或A/B测试分支样式
内联样式怎么写才不出错
语法就一条：在标签里加style属性，值是分号结尾的CSS声明列表，注意冒号后要空格，分号不能漏。浏览器对格式其实挺宽容，但少打空格或漏分号，某些旧版IE可能直接忽略整条声明。
使用场景：React/Vue里绑定动态样式、邮件模板（很多客户端只认内联）、服务端渲染时根据数据注入尺寸或颜色。
立即学习“前端免费学习笔记（深入）”；
示例：<div style="margin: 0; padding: 8px; background-color: #f0f0f0;">内容</div>
- 不要写
style="margin:0;padding:8px;background-color:#f0f0f0"——没空格不影响现代浏览器，但可读性差，协作时容易看漏 - 避免写
style="display: none !important"——!important在内联里无效，纯属误导 - 颜色值推荐用十六进制或rgb()，别用英文名（
style="color: red"），部分邮件客户端不支持
内联样式和CSS类混用时谁赢
内联样式的优先级高于class里的任何声明，包括带!important的class规则。但有个例外：如果class里用了!important，而内联样式没用，那class赢；反过来，内联样式用了!important，class再强也没用——不过内联里写!important本身是冗余的，因为内联本来就是最高优先级。
性能影响：浏览器解析内联样式比解析class快一点，但差别微乎其微；真正拖慢的是大量重复的style属性导致HTML体积膨胀，影响首屏加载和gzip压缩率。
- 别为了“省一个class”在10个
<p></p>上都写style="font-size: 14px; line-height: 1.5" - 如果多个元素样式一致，一定提成class，哪怕只用两次
- 用JS动态改样式时，优先操作
className，而不是反复拼style字符串
哪些CSS属性不能用在内联样式里
绝大多数可以，但有两个硬限制：@import和@media规则完全不能出现在style属性里；伪类（如:hover）、伪元素（如::before）也不能。也就是说，你没法用内联样式实现“鼠标悬停变色”或插入装饰性内容。
兼容性影响：所有主流浏览器都支持标准内联样式；但部分老式邮件客户端（Outlook 2007–2019）对flex、grid、transform等新属性支持极差，即使写在style里也常被无视。
- 响应式需求（
@media）必须用<style></style>块或外部CSS - 交互效果（
:hover、:focus）只能靠class + 外部规则 - 动画关键帧（
@keyframes）同理，内联只支持animation属性本身，不能定义帧
