内联样式唯一合法写法是在HTML标签的style属性中直接写「属性: 值;」声明列表，仅作用于当前元素、优先级最高；属性名须短横线小写，带单位数值不能省略单位，含空格值需加引号，!important被忽略。
直接在 HTML 标签的 style 属性里写 CSS 声明，是唯一合法的内联样式写法。它不经过选择器、不依赖外部文件，只作用于当前元素，生效快、优先级最高。
基本格式必须严格遵守
style 属性值是一个字符串，内容只能是「属性: 值;」形式的声明列表，多个声明用分号分隔：
- ✅ 正确：
<p style="color: red; font-size: 16px; text-align: center;">文字</p> - ❌ 错误：
<p style="p { color: red; }">（含选择器，整条被丢弃） - ❌ 错误：
<p style="color: red font-size: 16px;">（缺分号，font-size 不生效） - ❌ 错误：
<p style="font-family: Times New Roman;">（带空格的值没加引号，解析失败）
哪些属性名和值写法容易出错
浏览器对 style 属性值做严格语法匹配，任一细节不符就会静默丢弃后续所有声明：
- 属性名必须用短横线小写：
background-color✅，backgroundColor❌（那是 JS 中的写法） - 带单位的数值不能省单位：
width: 200px✅，width: 200❌（被当无效值丢弃） - 含空格或特殊字符的值必须加引号：
font-family: "Segoe UI";✅，font-family: Segoe UI;❌ -
!important在 style 属性中会被忽略——因为内联样式的特异性已是 1000，无需再提升
哪些标签上写 style 才真正起作用
style 属性只对有视觉表现的元素生效，不是所有标签都支持：
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效：
<div>、<p>、<h1>～<h6>、<span>、<button>、<a> - ❌ 无效：
<html>、<head>、<meta>、<script>—— 浏览器直接忽略 - ⚠️ 注意：
<body>上可设 background-color 等，但 color 或 font-family 不会自动继承给子元素，容易误判“没生效”
常见误用与调试建议
很多“写了没效果”其实不是浏览器问题，而是语法被静默忽略：
- 别在 style 里写伪类（如
:hover）、媒体查询（如@media）或规则块——这些全不支持 - DevTools 的 Styles 面板中，找带「inline」标记的样式，才是真被解析的部分
- 调试时可用
style="border: 2px solid red !important"快速验证是否命中元素（注意：!important 在这里虽无效，但红色边框仍会显示） - JS 动态修改时，避免用
setAttribute('style', ...)覆盖整个字符串；推荐用el.style.color = 'blue'或Object.assign(el.style, {...})
