如何在HTML标签中引入内联CSS样式

内联CSS样式仅适用于JavaScript动态计算、邮件模板兼容、第三方组件要求及快速调试四种必要场景；语法须为property: value格式，分号分隔，优先级最高但无法响应媒体查询或伪类。

内联CSS样式直接写在HTML标签的 style 属性里，优先级最高、生效最快，但仅适用于单元素临时控制或JS动态设置场景。

什么时候必须用 style 属性

不是“能不能用”，而是“有没有必要用”——只有以下情况才该上内联样式：

1. JavaScript 动态计算出来的值（比如根据窗口宽度设置 width 或根据数据渲染进度条 width）
2. 邮件模板中，因多数邮件客户端不支持 <style> 或外部 CSS，只能靠 style 属性保底
3. 第三方组件要求你传入内联样式对象（如 React 的 style={{ color: 'red' }} 最终也会转成 style="color:red"）
4. 快速验证某条声明是否起作用（比如怀疑某个选择器没命中，直接加 style="border: 2px solid red !important" 看效果）

style 属性里写 CSS 的规则

它不是“随便写”，而是有明确语法约束：所有声明必须是 property: value 格式，多个声明用分号 ; 分隔，末尾分号可省略但建议保留。

常见错误包括：

1. 漏写冒号：style="color red" ❌ → 正确是 style="color: red"
2. 用逗号代替分号：style="color: red, font-size: 14px" ❌ → 应为 style="color: red; font-size: 14px"
3. 属性名用了横线但没加引号（其实 HTML 中不用引号也行，但值含空格或特殊字符时必须加）：style=background-color: #fff ❌ → 推荐统一用双引号包裹：style="background-color: #fff"
4. 写了无效属性（比如 style="display: grid;" 在老版本 IE 中不生效，但这是兼容性问题，不是语法错）

和内部/外部样式冲突时谁赢

style 属性的优先级高于任何选择器，包括 !important 的内部样式。也就是说：

1. <p style="color: blue">文字</p> 会盖过 p { color: red !important; }
2. 但注意：如果 JS 后续又执行了 el.style.color = 'green'，那绿色会覆盖蓝色——style 属性本身可被 JS 覆盖
3. 浏览器 DevTools 的 Styles 面板里，element.style 这一项永远排最顶，一眼就能看出是否被内联样式锁死

真正容易被忽略的是：内联样式无法被 CSS 的 @media 查询响应式控制，也不能用伪类（如 :hover）、伪元素（如 ::before）扩展，更没法继承。它就是个“一次性快照”，用完即弃。别为了省事把整页按钮都写成 style="padding: 8px 16px; border-radius: 4px" —— 那等于主动放弃维护性。