内联样式必须写在HTML元素的style属性中，只接受属性值对，不支持选择器和花括号；须用连字符小写形式（如margin-top），不可用驼峰式；适用于动态、单次、邮件模板等特定场景。
内联样式用 style 属性，不是 <style></style> 标签
很多人一看到“样式”就下意识写 <style></style> 块，但内联样式必须直接写在 HTML 元素的 style 属性里，和 CSS 文件或 <style></style> 区块完全无关。
常见错误是把整段 CSS 代码（比如 body { margin: 0; }）塞进 style 属性，这会直接失效——style 属性只接受「属性值对」，不接受选择器或花括号。
- ✅ 正确：
<p style="color: red; font-size: 14px;">文字</p> - ❌ 错误：
<p style="p { color: red; }">文字</p> - ❌ 错误：
<p style="<style>p{color:red}</style>">文字</p>
style 属性里的写法和 CSS 规则不一样
CSS 中的短横线命名（如 background-color）在 style 属性里要改成驼峰式（backgroundColor）？不，这是 JavaScript 操作 DOM 时的要求。在纯 HTML 的 style 属性中，**必须用连字符小写形式**，和外部 CSS 完全一致。
- ✅
style="margin-top: 8px; text-align: center;" - ❌
style="marginTop: 8px;"（这是 JS 对象写法，HTML 里无效） - ⚠️ 空格和分号不能省：多个声明之间用分号分隔，末尾分号可省略但建议保留，避免加新样式时出错
什么时候真该用内联样式？别为了“方便”乱用
内联样式优先级最高，会覆盖所有外部样式表和 <style></style> 块，所以它适合解决「单次、动态、不可预测」的样式覆盖，比如服务端渲染时根据状态插入颜色、JS 动态计算后的宽高、邮件模板中被客户端强制限制样式的场景。
立即学习“前端免费学习笔记（深入）”；
- ✔️ 合理：服务端生成
<div style="width: <%= item.width %>px;"> <li>✔️ 合理：Vue/React 中绑定 <code>:style="{ opacity: isLoaded ? 1 : 0.5 }"（本质仍是内联，但由框架管理） - ✖️ 不合理：给所有按钮统一设
style="padding: 8px 16px; border-radius: 4px;"—— 这该抽成类名或 CSS 规则 - ⚠️ 注意：某些邮件客户端（如 Outlook）只认内联样式，这时不是“能不用就不用”，而是“必须用”
- ✅ 推荐统一用双引号包整个
style，内部用单引号：style="font-family: 'Helvetica Neue'; color: #333;" - ✅ 或反过来，外单内双：
style='font-family: "Helvetica Neue";' - ⚠️ 避免混用：
style="font-family: "Helvetica Neue";"会导致 HTML 解析中断，后续属性丢失 - ⚠️ URL 中的空格或括号要编码：比如
background-image: url("bg.jpg")可以，但url("a b.jpg")建议写成url("a%20b.jpg")或改用单引号
引号嵌套和特殊字符容易翻车
style 属性本身在 HTML 标签里，所以它的值要用引号包裹；如果样式值里含引号（比如字体名带空格），就得小心引号嵌套冲突。
!important 强。
