必须放在里，放中会导致渲染闪动或被忽略；支持全部CSS语法但禁用@import；仅适用于单页特有样式，非性能优化手段。
style标签写在哪？位置不对会白写
HTML里<style></style>必须放在里，不能塞进开头或中间。浏览器解析时如果<style></style>在里，部分老版本IE可能忽略，现代浏览器虽大多能兜底，但样式应用时机不可控——元素可能先按默认样式渲染，再重绘，造成闪动。
-
里写：稳妥，样式就绪后再渲染页面 -
里写：不推荐，尤其含display: none或动画类规则时容易出视觉异常 - 多个
<style></style>块可以共存，后定义的规则按CSS层叠规则覆盖前面的
内部样式表能用哪些CSS语法？和外部文件没区别
写在<style></style>里的CSS和写在.css文件里完全一样，支持所有标准语法：选择器、媒体查询、自定义属性、@keyframes等。唯一限制是不能用@import引入其他CSS文件（会阻塞渲染且多数浏览器已弃用该用法）。
- 能用
:hover、::before伪类伪元素 - 能写
@media (max-width: 768px)响应式规则 - 能定义
--main-color: #333，然后用color: var(--main-color) - 不能写
@import url("reset.css")——语法合法但无效，会被忽略
什么时候该用内部样式表？别为了“省一个HTTP请求”乱用
内部样式表适合单页应用中极少量、仅当前页需要的样式，比如某个页面独有的布局微调、临时A/B测试样式、或服务端渲染时动态注入的个性化主题。它不是性能优化银弹——gzip后CSS体积差异微乎其微，反而增加HTML体积、破坏缓存复用。
- 适用场景：单页静态文档、邮件模板内联样式（因邮箱客户端限制）、构建流程未接入CSS提取的原型页
- 反模式：把整站通用按钮/排版/重置样式都塞进
<style></style>——维护成本陡增，无法被CDN缓存 - 注意：服务端渲染时若动态拼接
<style></style>，需防XSS，对用户输入做严格转义
遇到样式不生效？优先查这三件事
内部样式表失效往往不是语法问题，而是加载逻辑或优先级干扰。打开开发者工具看Computed Styles，比对着代码猜快得多。
立即学习“前端免费学习笔记（深入）”；
- 检查元素是否真被选中：在Elements面板里右键元素 → “Force element state” 看
:hover等是否触发 - 确认没有更高优先级的样式覆盖：比如
!important外联样式、行内style属性、或更具体的选择器（#header .nav li a比a优先级高） - 留意CSS作用域限制：内部样式表本身无作用域，但如果页面用了Shadow DOM，
<style></style>默认不穿透到shadow root内部
