内联样式需注意语法规范、属性支持范围、优先级规则及JS操作要点：属性名用短横线、末尾加分号、禁用中文标点和注释；仅支持可继承或直接作用属性，不支持伪类、媒体查询等；优先级高于外部CSS但低于!important；JS中需用驼峰命名且读取须用getComputedStyle。
内联样式写法不对，浏览器直接忽略
html里用 style 属性加css，不是所有写法都生效。最常见的是漏了分号、用了中文标点、或者属性名拼错——比如把 background-color 写成 background_color，浏览器就当没看见。
实操建议：
- 属性名必须用英文中划线（
font-size），不能用下划线或驼峰 - 每个声明末尾加英文分号（
color: red;），最后一个也别省，有些老浏览器会因此整条失效 - 值里带空格的要加引号（
font-family: "Helvetica Neue";），但数字单位如16px不用 - 避免在
style里写 CSS 注释（/* ... */），它不被支持
哪些样式能用，哪些根本不起作用
内联样式只支持“可继承”或“可直接作用于元素”的CSS属性。像 @media、伪类（:hover）、伪元素（::before）全都不行；display: flex 可以，但 flex-direction: column 得配合父容器设 display: flex 才看得出效果——单写它，没用。
实操建议：
- 能用的：颜色、字体、边距（
margin）、内边距（padding）、宽高、背景色、文本对齐等基础属性 - 不能用的：
:hover、@keyframes、@import、选择器嵌套、任何需要上下文的规则 - 部分属性依赖父级状态，比如
vertical-align只在inline或table-cell元素上有效
内联样式和外部CSS冲突时谁赢
内联样式的优先级比外部样式表和 <style> 块都高，但会被带 !important 的外部规则覆盖。很多人以为写了 style="color: blue" 就绝对生效，结果发现文字还是红色——八成是外部CSS里写了 color: red !important。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 调试时右键“检查元素”，看
Styles面板里哪条被划掉（strikethrough），就知道谁被覆盖了 - 不要滥用
!important对抗内联样式，它会让后续维护变困难 - 如果必须覆盖内联样式，用JS改
element.style.color = ""清空，再靠外部类控制，更可控
用JS动态加内联样式容易踩的坑
用 element.style.xxx = "value" 设置样式时，属性名得转成驼峰（backgroundColor），不是CSS里的短横线（background-color）。写错就静默失败，控制台也不报错。
实操建议：
- CSS属性转JS属性名规则：去掉短横线，后面字母大写，如
font-size→fontSize，z-index→zIndex - 设置复合值（如
margin）时，必须写完整字符串：el.style.margin = "10px 5px"，不能只写el.style.marginTop = "10px"然后指望其他方向不变——它会重置整个 margin - 读取样式要用
getComputedStyle(el).marginTop，不能直接读el.style.marginTop，后者只返回内联写的值，不包含CSS计算结果
内联样式看着简单，但属性名大小写、分号、优先级、JS绑定方式这几个地方，一不留神就白调半天。真要频繁控制样式，不如早点抽成 class，留 style 给临时微调。
