HTML内联style属性必须小写、位于起始标签内，值为分号分隔的合法CSS声明；JS动态设置应优先用el.style.xxx或setProperty()，避免setAttribute('style')覆盖已有样式。
直接在 HTML 标签的起始标签里写 style 属性，值是合法 CSS 声明列表，分号分隔、单位不省、引号包住含空格的值——错一个字符，浏览器就静默忽略，且不报错。
style 属性必须写在起始标签里，且全小写
HTML 解析器只认小写的 style，且只接受它出现在开始标签中。任何变体都会失效：
-
<p style="color: red;">文字</p>✅ -
<p style="color: red;">文字</p>❌（首字母大写） -
<p>文字</p>style="color: red;">❌（写在结束标签里） <div style="color: red;"> ❌（<code>style和=之间有空格）style 值不是“粘贴 CSS”，而是严格格式的声明列表
style只解析形如property: value;的单条声明，不支持选择器、伪类、@media或!important：-
style="color: blue; font-size: 14px;"✅ -
style=".btn { color: blue; }"❌（含类选择器） -
style=":hover { opacity: 0.8; }"❌（含伪类） -
style="color: red !important;"❌（!important被静默丢弃）
漏分号、单位、引号，也会导致整条声明失效：
-
style="color: red margin: 0;"→margin不生效（缺分号） -
style="font-family: Helvetica Neue;"→ 实际只取到Helvetica（空格截断，必须加引号） -
style="width: 100;"→ 无效（width必须带单位，如100px或100%）
JavaScript 动态设置时，别用
setAttribute('style', ...)用
el.setAttribute('style', '...')会覆盖整个内联样式字符串，清掉之前所有通过el.style.xxx或setProperty()设置的值：-
el.style.transform = 'scale(1.2)'; el.style.setProperty('--opacity', '0.8');→ 两者共存 ✅ -
el.setAttribute('style', '--opacity: 0.8;');→transform被抹掉，视觉跳变 ❌
推荐方式：
- 单个属性：用驼峰命名的
el.style.color = 'blue'或el.style.fontSize = '14px' - 多个属性：用
Object.assign(el.style, { color: 'blue', fontSize: '14px' }) - 清除某项：设为空字符串，如
el.style.color = ''
设置 CSS 变量时，
setProperty()比cssText更安全若要在 JS 中动态更新内联
style里的 CSS 变量，必须用el.style.setProperty()：-
el.style.setProperty('--shadow', '0 4px 8px');✅（原子更新，不影响其他内联样式） -
el.style.cssText = '--shadow: 0 4px 8px';❌（全量覆盖，清空已有transform、opacity等）
批量设多个变量时，可考虑
el.setAttribute('style', '--x:1;--y:2;--z:3;')，比连续调用setProperty()更少触发重绘；但要注意它仍会覆盖全部已有style字符串。真正难的不是写对语法，而是记住：它永远无法响应
@media、无法继承主题、无法复用——一旦你写了第二个相似结构，就该换外部 CSS 或 CSS 变量 +:root了。-
