是，style标签必须放在<head>里；浏览器自上而下解析HTML，仅在<head>内才被识别为样式表，置于<body>会导致FOUC、选择器失效或媒体查询不触发。
style标签必须放在里吗
必须。浏览器解析HTML时，<style> 标签只有在 <head> 内才会被识别为样式表；如果误写在 <body> 里，多数浏览器会忽略或延迟应用，导致页面闪动或样式不生效。
常见错误现象：<style> 放在 <body> 开头、结尾，或嵌套在 <div> 里——这些位置都不合法。
- 验证方法：打开开发者工具 → Elements 面板，检查
<style>是否出现在<head>下方 - HTML5 不强制要求
type="text/css"，但保留更稳妥（尤其兼容旧环境） - 不要用 HTML 注释
<!-- -->包裹 CSS 规则，要用 CSS 注释/* */
内部样式能用 media 属性做响应式吗
能，而且很常用。<style> 支持 media 属性，和 <link> 一样可按条件加载规则。
使用场景：打印样式、暗色模式适配、移动端断点控制。
立即学习“前端免费学习笔记（深入）”；
-
<style media="print">@media print { body { color: black; } }</style>—— 这种写法冗余，直接用<style media="print">即可，内部无需再套@media -
<style media="(max-width: 768px)">nav { display: none; }</style>是合法的，但注意：多个<style>标签会按顺序叠加，优先级相同 - IE11 及更早版本不支持
media属性在<style>上，需用@media规则替代
为什么写了 style 标签但样式没生效
大概率是选择器写错了，或者被更高优先级样式覆盖了。
内部样式（<style>）优先级高于外部 CSS，但低于行内 style 属性和 !important 声明。
- 检查是否用了错误的选择器语法，比如写成
.myClass{}却忘了给元素加class="myClass" - 确认元素是否真被选中：在开发者工具 Elements 面板中右键元素 → “Inspect”，看右侧 Styles 面板里是否有你的规则，以及是否被划掉（表示被覆盖）
- 注意 CSS 继承和层叠：例如
body { font-size: 16px; }不会自动影响<input>，它不继承font-size - 中文字符、空格、分号缺失等低级错误：CSS 对语法错误容忍度低，一个错位的
}可能让后面所有规则失效
内部样式适合多大项目规模
单页应用（SPA）或纯静态小页面（如 landing page、邮件模板预览页）可用；超过 3 个页面或需要主题切换/动态换肤的项目，就该切到外部 CSS。
性能上没明显瓶颈，但维护成本会上升：样式无法复用、无法被浏览器缓存、每次 HTML 加载都得重新解析。
- 上线前建议把
<style>内容抽成 .css 文件，再用<link rel="stylesheet">引入 - 构建工具（如 Vite、Webpack）通常不处理
<style>块，没法做压缩、autoprefixer、CSS-in-JS 等优化 - 如果只是临时调试，
<style>没问题；但只要涉及协作、迭代、上线，就得考虑可维护性
内部样式最常被忽略的其实是编码一致性：HTML 和 <style> 中的中文注释、字体名、路径若用了 GBK 或其他非 UTF-8 编码，会导致乱码或规则失效——务必统一设为 <meta charset="UTF-8">。
