style是唯一能直接设置元素样式的html全局属性，因其值为合法css声明列表（如"color:red;margin:0;"），浏览器解析后立即应用，无需外部css或js介入；class、id等仅作标识，本身不携带样式。
style 是唯一能直接设置元素样式的 HTML 全局属性，其他全局属性（如 class、id、data-*）本身不定义样式，只提供接入 CSS 或 JS 的钩子。
为什么只用 style 属性能“设置样式”
style 属性的值是合法的 CSS 声明列表（如 "color: red; margin: 0 auto;"），浏览器会将其解析为内联样式规则并立即应用。它不依赖外部文件或选择器匹配，也不需要 JavaScript 干预。
而 class 和 id 只是标识符：前者需配合 CSS 中的 .my-class 规则，后者需配合 #my-id 规则——它们本身不携带任何样式信息。
-
style优先级最高，会覆盖同名的外部/内部样式（除非后者加!important） -
class和id的样式行为完全取决于是否有对应 CSS 规则存在 -
data-*、title、tabindex等全局属性对渲染样式无直接影响
style 属性的写法和常见错误
必须用分号 ; 分隔多个声明，冒号 : 左右不能有空格（虽然部分浏览器容忍，但不符合规范）：
<p style="color:red;font-size:14px;line-height:1.5">正确</p>
以下写法会导致部分样式失效或被忽略：
- 漏掉分号：
style="color:red font-size:14px"→font-size不生效 - 使用中文标点或全角字符：
style="color：red；"→ 整个style被丢弃 - 属性名拼错：
style="colour:red"→ 无效（CSS 属性名是color） - 值含未引号包裹的空格：
style="font-family:Times New Roman"→ 仅Times被识别
什么时候该用 style，什么时候不该用
适合用 style 的场景很窄，典型包括：
- 服务端动态生成单次性样式（如邮件模板中内联
width、background-color） - JS 运行时临时修改某个元素的尺寸或位置（如拖拽中实时更新
left/top） - SSR 页面首屏关键样式（避免 FOUC，但应尽量压缩）
不该用的情况更常见：
- 重复样式（如 20 个按钮都设
style="padding:8px;border-radius:4px"）→ 应抽成.btn类 - 响应式逻辑（如
style="display:none"配合 JS 切换）→ 应用class+ 媒体查询 - 主题色切换（硬编码
style="color:#333"）→ 应用 CSS 自定义属性或 class 切换
真正影响样式的只有 style 属性本身；其余全局属性只是桥梁。混淆这点，容易在调试时反复检查 class 拼写，却忘了页面根本没加载对应 CSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
