内联样式必须写在HTML元素的style属性中，仅支持“属性: 值;”格式的CSS声明，不接受选择器、花括号、伪类、媒体查询；须用短横线命名、分号分隔、单位不省、空格值加引号；仅对可渲染元素生效。
style 属性必须直接写在 HTML 元素标签里，不是 <style> 标签，也不是任何其他地方。
内联样式只能用 style 属性，不能用 <style> 标签
很多人看到“内联”就去写 <style>p { color: red; }</style>，这其实是内部样式表，不是内联样式。内联样式只有一种写法：在元素上加 style 属性。
- ✅ 正确：
<p style="color: red; font-size: 14px;">文字</p> - ❌ 错误：
<p style="p { color: red; }">文字</p>（style属性不接受选择器和花括号） - ❌ 错误：
<style>p { color: red; }</style>（这是内部样式，不是内联）
浏览器对 style 属性的解析是纯字符串匹配，遇到语法错误（比如漏分号、冒号后没空格、引号嵌套错）会静默丢弃整条声明，不会报错提示。
style 属性的值必须是合法 CSS 声明，且格式严格
它不是 CSS 文件，也不是 JS 对象，而是 HTML 属性值，所以必须遵守 HTML 和 CSS 双重语法规则：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 属性名必须用短横线小写：如
background-color、font-family，不能写backgroundColor（那是 JS 的 DOMstyle对象写法） - 每条声明必须以分号结尾：
color: red; margin: 0;，缺分号会导致后续所有声明失效 - 带空格的值必须加引号：
font-family: "Helvetica Neue";→ 写成style="font-family: "Helvetica Neue""或外双内单 - 单位不能省：
width: 100%✅，width: 100❌（会被忽略）
常见翻车点：style="color:red;font-size:16px" 看似没问题，但若后续加新样式时忘了补分号，比如改成 style="color:red;font-size:16px;background-color:#eee"，就因缺分号导致背景色不生效。
哪些标签能用 style 属性？哪些写了也白写？
style 属性只对「有视觉渲染行为」的元素生效。浏览器会直接忽略加在元信息标签上的 style：
- ✅ 有效：
<div>、<p>、<span>、<h1>、<button>、<section>（但注意color不继承到子元素） - ❌ 无效：
<head>、<meta>、<link>、<script>、<html>—— 浏览器完全不处理 - ⚠️ 半有效：
<body>上设color或font-family不会自动影响子元素文本（除非子元素没覆盖），但设background-color是可见的
伪类（:hover）、伪元素（::before）、媒体查询（@media）在 style 属性中一概不支持，写了等于没写。
为什么 style 属性改了但页面没变？
优先级不是唯一原因。更常见的实际问题是：
- JS 动态设置时用了错误方式：
elem.style.color = 'red'✅，但elem.setAttribute('style', 'color: red')会覆盖已有内联样式，容易误删其他声明 - 通过
getComputedStyle()查颜色时，误读elem.style.color—— 它只返回内联样式，不反映最终计算值 - 某些框架（如 Vue/React）会把
:style编译为style属性，但如果绑定对象为空或 key 为 undefined，可能生成空，覆盖掉原本的内联样式 - CSS 自定义属性（
--main-color）不能直接写进style属性，得用style.setProperty('--main-color', 'red')（JS 方法）
真正难调试的，往往是多个 style 属性被 JS 反复覆盖，或者服务端模板里变量未正确转义导致引号断裂——这类问题不会报错，只会让某条样式静默消失。
