内联样式必须用分号分隔的合法CSS字符串，禁用对象、数组、注释；简写属性会覆盖子属性；不生效主因是拼写错误、缺单位、优先级误解；框架中style对象需编译为字符串才可在原生HTML使用。
内联样式写法：style 属性值必须是字符串，且用分号分隔
浏览器只认 style 属性里合法的 CSS 声明字符串，不是对象、不是数组、不能漏分号。常见错误是直接塞 JS 对象（比如 { color: 'red', fontSize: '14px' }），这在原生 HTML 里完全无效，连解析都不会触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动拼接时，确保每个声明后跟
;，末尾的分号可省略但建议保留（避免后续追加时出错） - 动态生成时优先用模板字符串，比如：
`color: ${color}; font-size: ${size}px;` - 注意引号嵌套：HTML 属性值用双引号，内部 CSS 值若含空格或特殊字符（如
font-family: "Helvetica Neue"）需用单引号包裹，或用反斜杠转义 - 不要在
style里写 CSS 注释（/* ... */），会被整个忽略
style 里不能用简写属性？其实可以，但要注意兼容性和重置风险
像 margin、padding、background 这类简写是支持的，但它们会隐式覆盖所有子属性。比如已通过外部样式表设了 margin-top: 20px，再用内联 margin: 10px，结果 margin-top 就变成 10px 了——不是叠加，是彻底替换。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 调试时用浏览器开发者工具看“Computed”面板，确认最终生效的是哪一层、哪个声明
- 避免在
style中混用简写和长写（如同时写margin: 10px和margin-left: 5px），后者可能被前者吞掉 -
background简写容易漏掉background-color，导致透明底色暴露下层内容，尤其在深色主题下易出视觉 bug
内联样式不生效？先查这三件事：优先级、拼写、单位
内联样式本该有最高优先级（比 class 和 id 都高），但实际不生效，90% 是栽在这三个地方：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见错误现象：
- 写了
style="color: red"却没变红 → 拼错了属性名，比如写成colour或text-color - 写了
font-size: 14没效果 → 缺少单位（px、rem、em等），CSS 规范要求非零数值必须带单位（0是唯一例外） - 写了
display: flex但子元素没对齐 → 父容器确实生效了，但子元素的margin或align-self被其他样式覆盖，得看 Computed 结果
性能影响：大量内联样式会增加 HTML 体积，服务端渲染时尤其明显；同时阻塞 CSSOM 构建，但比外链 CSS 的网络延迟影响小。
React/Vue 里写 style 不等于原生写法，别直接套用
框架把 style 当成 prop 处理，所以 React 用对象（{ color: 'red', fontSize: '14px' }），Vue 模板里支持字符串和对象两种写法，但编译后都会转成合法的 DOM style 字符串。直接把 React 的 style 对象复制到纯 HTML 里，必然报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 文件里写内联样式，只用字符串，别抄 JSX 写法
- 从框架代码调试时，右键“检查元素”，看最终渲染出的
style属性值是什么，以它为准 - 框架中用驼峰命名（
backgroundColor），但原生 HTML 必须用短横线（background-color），混用会导致失效
内联样式的真正麻烦点不在写法，而在它把样式逻辑和结构耦死，改一个颜色要翻好几个文件找对应元素；更隐蔽的是，它绕过了 CSS 选择器机制，没法用 :hover、@media 或伪类做响应式控制——这些都得靠 JS 补，一补就复杂。
