style标签是引入页面级css的标准方式，适合小项目或调试；相比行内样式，它支持选择器批量控制、可复用、易维护、不污染html结构且优先级居中；应置于head中以防fouc，@import须为第一条语句，动态插入内容时需注意样式不自动生效。
style 标签是引入页面级 CSS 的标准方式，它只对当前 HTML 文件生效，适合小项目、单页应用或临时调试。
为什么用 style 标签而不是行内样式？
行内样式（style 属性）只能作用于单个元素，重复写多次就冗余；而 style 标签在 里集中定义，支持选择器批量控制多个元素，比如统一改所有 p 或带某个 class 的元素。
- 能复用：一次定义，多处生效
- 可维护：改一处，整页响应
- 不污染 HTML 结构：标签里不再塞大段样式字符串
- 优先级居中：高于外部样式表，低于行内样式，方便局部覆盖
style 标签必须放在
不是强制，但强烈建议。浏览器按 HTML 顺序解析，如果 style 放在 底部，前面的元素会先以无样式状态渲染（FOUC 风险）。放在 可确保样式尽早加载。
- 允许出现在
，但可能造成样式闪动 - 可以多次出现，但没必要——合并到一个
style块更清晰 - 不要嵌套在其他标签内（如不能放
<div> 或 <code><p></p>里）常见错误：@import 写在
style标签里却没生效@import是 CSS 规则，不是 HTML 标签，必须写在style标签内部、且必须是第一条语句（前面不能有空行或注释），否则被忽略。- ✅ 正确：
<style>@import url("common.css"); p { color: red; }</style> - ❌ 错误：
<style>/* 注释 */ @import url("common.css");</style>（注释在前，导入失效） - ❌ 错误：
<style>p { color: red; } @import url("common.css");</style>（@import不在最前） - ⚠️ 注意：
@import会阻塞后续 CSS 解析，性能不如<link>，仅适合小范围复用
实际使用时要注意路径和单位
style标签里的 CSS 是纯文本，不涉及文件路径问题，但若用@import引入外部文件，则url()中的路径是相对于当前 HTML 文件的位置，不是相对于style标签所在位置。-
font-size: 20rpx在普通浏览器中无效——rpx是微信小程序单位，Web 端请用px、em或rem - 颜色值写
blueviolet没问题，但写错别字如blueviolett就静默失败 - 属性名漏冒号、值缺分号，整条规则会被跳过，浏览器开发者工具的「Styles」面板里会标灰提示
真正容易被忽略的是：当页面通过 JavaScript 动态插入内容时，
style标签定义的选择器默认不会自动作用于新节点——除非你用事件委托或手动调用getComputedStyle触发重绘。这点在 SPA 或模板渲染场景下常踩坑。 - ✅ 正确：
