必须放在中，因浏览器自上而下解析html，若置于底部会导致fouc（无样式内容闪动）、js读取cssrules失败、违反html5规范且行为不可靠。
直接在 HTML 文件里写 CSS，用 <style></style> 标签就行，但必须放在 里，否则样式可能不生效或页面闪动。
为什么 <style></style> 必须放在
浏览器解析 HTML 是从上到下顺序执行的。如果把 <style></style> 放在 底部，前面的元素会先按无样式状态渲染一次（白屏或错位），等样式加载完再重绘——这就是“FOUC”（Flash of Unstyled Content）。虽然现代浏览器有优化，但不保证稳定。
常见错误现象：Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet'，往往是因为 JS 在 <style></style> 尚未解析完成时就去读取它的 sheet.cssRules。
- HTML5 规范明确要求
<style></style>只应在内使用（中属于“parse error”，部分浏览器会容错但行为不可靠） - 邮件模板、单页报告等场景虽允许内嵌，但前提是结构完整：DOCTYPE +
+（含<style></style>）+ - 服务端渲染中常把关键 CSS 提取为
<style></style>块注入，这是性能优化手段，不是随意摆放的理由
<style></style> 和 style 属性根本不是一回事
很多人混淆这两个概念：style 是 HTML 元素的属性，只作用于单个标签；<style></style> 是一个容器标签，里面写的是标准 CSS 规则，支持选择器、伪类、媒体查询、变量等全部能力。
比如你不能在 style="..." 里写 :hover 或 @media，但可以在 <style></style> 里自由使用：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<style>
.btn { padding: 8px 16px; }
.btn:hover { background-color: #007bff; }
@media (max-width: 768px) {
.btn { width: 100%; }
}
</style>
-
style属性优先级高于<style></style>中同名规则（除非后者加!important） - 硬把几十个
style="..."堆在 HTML 里，后期改主题色或适配暗模式基本等于重写 - 用
<style></style>才能真正实现“一处修改、全局生效”
多个 <style></style> 块怎么共存
HTML 允许多个 <style></style> 标签，它们按出现顺序参与层叠计算。后定义的规则会覆盖前面同选择器的声明，和外链 CSS 的加载顺序逻辑一致。
典型使用场景：
- 第三方组件自带
<style></style>块（如图表库注入的默认样式） - 服务端动态注入主题色变量（
:root { --primary: #2c3e50; }）放在最前，业务样式放后面引用 - 避免用
@import在<style></style>里引入其他 CSS——它会阻塞渲染，且必须写在块开头，实际效果不如外链<link>
注意：<style></style> 内容是纯 CSS，不需要写 type="text/css"（HTML5 默认就是）；也不支持 JS 表达式或模板语法，别试图在里面写 ${color}。
最容易被忽略的一点：即使只用一个 <style></style> 块，也得检查是否误删了 的闭合标签，或者把 <style></style> 套在了 <script></script> 里——这种结构错误不会报错，但样式就是不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
