内联CSS和<style>标签机制不同：前者通过style属性控制单个元素，后者为内部样式表，用选择器批量控制；混用会导致样式失效、优先级混乱或调试困难。
内联CSS和<style>标签是两种完全不同的机制，不能混用：前者靠元素的style属性控制单个元素，后者是内部样式表，靠选择器批量控制页面元素。选错方式会导致样式不生效、优先级混乱或调试困难。
内联CSS只写在style属性里，不是<style>标签里
常见错误是把color: red;这类声明塞进<style>标签却误以为是“内联”——其实那叫内部样式表。真正的内联CSS必须出现在HTML开始标签内部，且只影响该标签：
<p style="color: red; font-size: 16px;">这段文字变红</p>- 多个声明必须用分号分隔，漏掉任一分号（如
color: red font-size: 16px）会导致后续样式失效 - 引号必须成对，且不能嵌套双引号（
style="content: '""';"需转义或换单引号） - JavaScript动态修改时，用
element.style.color = "blue"直接赋值，不是element.style = "color: blue"（后者会清空所有其他内联样式）
<style>标签必须放在<head>里，否则可能闪屏或失效
浏览器按顺序解析HTML，<style>若被误放至<body>底部，会出现“先渲染无样式内容，再重绘”的闪动；更严重的是，某些JS操作（如读取document.styleSheets[0].cssRules）会抛出Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet'错误，因为样式表尚未加载完成。
- 正确位置：
<head><style>p { margin: 0; }</style></head> - HTML5中无需写
type="text/css"，加了也不报错但冗余 - 支持完整CSS能力：媒体查询、
@keyframes、@font-face、伪类（:hover）等，这些在style属性里统统不支持 - 多个
<style>块可共存，后定义的同选择器规则会覆盖前面的（层叠顺序取决于书写位置，不是加载顺序）
优先级冲突时，style属性 > <style> > 外部CSS
当同一个元素同时被三者设置颜色，最终生效的是style属性里的值。这不是bug，是CSS层叠规则决定的。容易踩的坑是：
立即学习“前端免费学习笔记（深入）”；
- 用
<style>写了button { background: blue; }，又在某个按钮上加style="background: red;"，结果按钮还是红色——这是预期行为，不是样式没加载 - 想用JS切换主题色，却反复改
<style>内容，不如直接操作document.body.className配合外部类名，更可控 -
<style>里用!important强行覆盖style属性？不行。内联样式天然高于!important声明
真正需要动态控制单个元素时，用style属性；需要复用、响应式、伪类或动画时，必须用<style>标签。两者边界清晰，混用只会让问题更难定位。
