HTML元素的内联样式必须写在style属性里，其值为分号分隔的CSS声明列表，支持大多数标准CSS属性但不支持伪类、伪元素和@media，优先级最高且可被JS动态修改。
内联样式写在哪个属性里
HTML 元素的内联样式必须写在 style 属性里，不是 class、不是 id，也不是自定义属性。浏览器只认 style 这个名字，其他名字哪怕写成 stytle 或 css 都完全无效。
-
style的值是 CSS 声明列表，用分号分隔，每条声明是「属性: 值」格式，末尾分号可省略但建议保留 - 属性名必须用短横线分隔（如
background-color），不能写成backgroundColor - 值中如果有空格或特殊字符（比如字体名含空格），必须加引号，但多数情况可以不加——
style="color: red; font-family: 'Times New Roman';" - 引号嵌套要小心：
style="font-family: "Courier New";"或改用单引号避免转义
哪些 CSS 属性能用在 style 里
几乎所有标准 CSS 属性都支持，但有两个常见例外：伪类（如 :hover）、伪元素（如 ::before）无法通过 style 属性设置——它们只能写在 <style> 标签或外部 CSS 文件里。
- 常用属性没问题：
color、margin、padding、display、transform、opacity等 -
!important在style里无效，因为内联样式本身权重就高于普通 CSS 规则，再加!important不报错但被忽略 - CSS 变量（
--my-color）可以定义和使用，但注意兼容性：IE 完全不支持 - 某些属性需要特定前缀才能生效（如旧版 Safari 的
-webkit-transform），但现代浏览器基本不需要手动加
内联样式和 class 冲突时谁赢
内联样式优先级高于所有外部或内部 CSS，包括带 !important 的 class 规则（除非那个 !important 也在内联样式里）。
- 冲突时浏览器按「特异性 + 来源顺序」判断，而内联样式的特异性固定为 1000，远超 class 的 10 或 ID 的 100
- 想覆盖内联样式？只能用 JS 修改
element.style.xxx，或者加!important到另一个内联样式里（比如用 JS 动态写入style="color: blue !important;"） - React/Vue 等框架里，
style属性传对象（如{ color: 'red' }）会自动转为内联样式，同样具备高优先级
什么时候不该用 style 属性
内联样式适合临时、动态、组件级隔离的样式控制；不适合复用、维护、响应式或主题切换场景。
立即学习“前端免费学习笔记（深入）”；
- 重复写多遍相同样式（比如十几个按钮都要
style="margin: 4px; border-radius: 2px;"）——该抽成 class - 媒体查询（
@media）无法在style属性里写，响应式布局必须靠 CSS 文件或<style> - JS 动态修改大量样式时，频繁操作
element.style.xxx比批量改 class 性能差，也更难调试 - 服务端渲染中硬编码
style属性，可能和后续 CSS-in-JS 工具冲突，尤其涉及 CSS 作用域或哈希类名时
真正要用内联样式的时候，往往是因为「这个样式只属于这个元素，且随时可能变」——比如进度条宽度、拖拽位置、实时颜色反馈。其余时候，class 才是默认选项。
