标签必须放在 中，否则在旧版 Safari、WebView 或 SSR 环境中可能被忽略，导致 FOUC 或媒体查询失效；W3C 规范明确限定其为 的合法子元素。
style 标签必须放在
浏览器按 HTML 文档顺序解析渲染，<style></style> 若写在 中，部分旧版 Safari、WebView 或 SSR 环境（如 Next.js 服务端）会忽略它，导致 FOUC（无样式闪屏）或媒体查询失效。W3C 规范也明确限定 <style></style> 是 的合法子元素。
常见错误现象包括：<div>
<style>p { color: red; }</style>
<p>文字</p>
</div> —— 这种写法在多数浏览器中不会生效，且结构非法。
- 始终把
<style></style>放在内，紧挨<title></title>或外部<link rel="stylesheet">后 - 不要为“就近写”把它塞进某个组件容器里——那不是作用域隔离，只是无效代码
- 真需要局部作用域，用类名前缀（如
.card-title）、CSS 自定义属性（--card-bg），或框架 scoped 机制（仅 Vue SFC 支持）
内联样式（style="..."）优先级最高，但会覆盖 !important
style 属性的层叠权重是 1-0-0-0，高于任何选择器（包括 #id .class），也高于外部/内部 CSS 中带 !important 的声明——除非后者也带 !important。这意味着你写 <p style="color: green;"></p>，哪怕外部有 p { color: red !important; }，最终还是绿色。
这在 JS 动态高亮、临时覆盖第三方组件样式时很实用，但也容易埋坑：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 调试时看到样式没变，先检查元素上有没有残留的
style属性（开发者工具 Elements 面板里看“Styles”侧边栏顶部的element.style） - 用 JS 修改样式时，优先操作 class（
el.classList.add("highlight")），而非直接赋值el.style.color = "red"，避免后续 CSS 类无法接管 - 邮件模板等限制环境才大量用内联样式；普通 Web 页面中，它应是“最后手段”，不是默认选项
内部样式表（<style></style>）不支持 @import，但 @media 和 @keyframes 完全可用
@import 在 <style></style> 块里语法合法，但会阻塞渲染、降低性能，且 IE 行为不一致；现代开发中应彻底避免。而响应式断点和动画关键帧则完全可放心用。
例如这段是安全且推荐的：
@media (max-width: 768px) {
.header { display: none; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.card { animation: fade-in 0.3s ease-out; }
- 用
@media直接写断点，无需额外 HTTP 请求 -
@keyframes必须定义在<style></style>或外部 CSS 中，不能写在内联里 - 若需动态主题色，可用 CSS 变量（
:root { --primary: #007bff; }），再通过 JS 修改document.documentElement.style.setProperty('--primary', newColor)
性能上，内联样式未必更快，外部 CSS 缓存优势不可替代
有人观察到本地含数万个元素的 HTML 文件用内联样式加载更快，但这属于极端场景：此时瓶颈在 HTML 解析而非网络请求。对绝大多数真实 Web 应用，外部 CSS 的浏览器缓存、压缩复用、HTTP/2 多路复用等优势远超这点解析节省。
真正影响性能的关键点是：
- 内部样式（
<style></style>）无法被缓存，每次 HTML 更新都要重传全部 CSS - 大量复杂选择器（如
div ul li:nth-child(2n) a:hover）拖慢样式计算，尤其在移动端 - 内联样式让 HTML 体积膨胀，影响首字节时间（TTFB）和 gzip 压缩率
如果页面确实只有单页、无复用需求（如生成式报告页），用 <style></style> 比内联更可控；但只要涉及多页或迭代，外部 CSS + 构建工具（如 PostCSS、PurgeCSS）才是可持续路径。
