内部CSS必须写在中，因浏览器自上而下解析HTML，若置于会导致FOUC、违反HTML标准且触发工具链报错；仅支持标准CSS语法，优先级介于内联与外部样式之间，需配合媒体查询实现响应式。
内部CSS必须写在 里，且只能用 <style></style> 标签包裹，不能放在 中，也不能裸写 CSS 规则。
为什么 <style></style> 必须放在
浏览器解析 HTML 是从上到下顺序进行的。如果把 <style></style> 放在 里（比如紧挨着 <h1></h1> 下面），样式规则可能在对应元素渲染后才加载，导致页面先“无样式闪现”（FOUC），尤其在网速慢或 DOM 较大时更明显。
此外，HTML 标准明确要求 <style></style> 属于元数据（metadata）类标签，语义上就属于 ，放错位置会触发验证警告，部分工具链（如 Lighthouse、CI 检查）也会报错。
- ✅ 正确位置：
内，<title></title>和<meta>等之后、之前 - ❌ 常见错误：写在
开头、结尾，或直接丢在根节点下 - ⚠️ 注意：
<style></style>不支持scoped属性（除非用现代框架或实验性 polyfill），它默认作用于整个文档
<style></style> 标签里能写什么、不能写什么
<style></style> 内部只接受纯 CSS 规则，不支持 JavaScript、HTML 注释（<!-- -->）、嵌套语法（如 Sass 的 & 或缩进写法），也不识别 @import（除非配合 type="text/css" 且目标是合法 URL，但实际极少用，易出错）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 允许：标准 CSS 选择器 + 声明块，例如
p { margin: 0; }、.btn:hover { opacity: 0.8; } - ❌ 禁止：
<script></script>片段、console.log()、// 这不是 CSS 注释 - ⚠️ 注意：CSS 注释必须用
/* ... */，HTML 注释在<style></style>里会被当成非法字符处理，可能导致样式失效
和内联样式、外部 CSS 的优先级关系
当同一元素的同一属性被多处定义时，浏览器按“内联 > 内部 > 外部”顺序覆盖。这意味着 <p style="color: red"></p> 会盖过 <style>p { color: blue; }</style>。
- ✅ 利用这点：调试时可临时加内联样式快速验证效果，不影响内部样式结构
- ❌ 误用风险：若在内部样式里大量用
!important，会削弱可维护性；而内联样式一旦多了，根本没法批量修改 - ? 提醒：
<style></style>的优先级虽高于外部 CSS，但低于内联——所以别指望靠它“强行覆盖”别人写的内联样式，得改源头
移动端适配和 <style></style> 的隐含陷阱
很多人以为只要写了 <meta name="viewport" content="width=device-width"> 就万事大吉，其实内部 CSS 里若用了固定像素值（如 width: 320px），在小屏设备上照样会横向滚动或溢出。内部样式本身不带响应式能力，得靠媒体查询撑腰。
- ✅ 推荐写法：
<style>@media (max-width: 768px) { .nav { flex-direction: column; } }</style> - ❌ 容易忽略：媒体查询必须写在
<style></style>内部，不能拆到外部文件再引入；而且@media不能嵌套在其他规则里（如不能写在.container { ... }里面） - ⚠️ 性能提示：过多复杂的媒体查询或大量伪类选择器（如
:nth-child(2n+1)）在低端 Android 浏览器中可能触发重排变慢，建议控制单个<style></style>块总行数在 200 行以内
真正难的不是把 CSS 塞进 <style></style>，而是判断该不该塞——样式逻辑一旦跨页面复用、需要主题切换、或涉及复杂动画，内部样式就会迅速变成维护黑洞。单文件方便归方便，别让它掩盖了架构问题。
