内部样式必须写在<head>中，用<style>标签包裹，禁用@import；不支持相对路径引用资源；后定义的<style>规则会覆盖先定义的同名规则；无法被浏览器缓存。
内部样式必须写在 <head> 里，用 <style> 标签包裹，不能放 <body> 中，否则解析行为不可控。
style 标签必须放在 head 里，且不能带 @import
浏览器解析 HTML 是从上到下同步进行的，<style> 放在 <head> 中才能确保样式在 DOM 渲染前就绪。如果误塞进 <body>，部分浏览器会阻塞后续 HTML 解析，甚至触发重排；更关键的是，@import 在内部样式中被禁止使用——它只允许出现在外部 CSS 文件里，否则会被忽略或报错。
常见错误现象：
- 页面闪动（先无样式渲染，再重绘）
- CSS 中的
@import "reset.css"完全没生效 - 某些选择器在 Chrome 里有效，Firefox 里不匹配
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<style>
h1 { color: #333; }
.btn { padding: 8px 16px; border-radius: 4px; }
</style>
</head>
内部样式不支持相对路径，图片和字体引用会失败
内部样式表里的 url() 函数无法解析相对路径，比如 background: url("./img/icon.png") 或 @font-face { src: url("../fonts/mono.woff2") } —— 浏览器会尝试以当前 HTML 文档 URL 为基准解析，但因无文件系统上下文，99% 情况下 404。
使用场景限制明显：
- 纯色、渐变、内嵌 SVG（
url("data:image/svg+xml,...")）可安全使用 - 需要图片或字体时，必须改用外部 CSS 文件，或改用内联
style属性配合data:URI - 构建工具（如 Vite/Webpack）中若自动注入内部样式，需确认其是否做了
url()重写
优先级和覆盖逻辑容易误判：特异性低但顺序靠后会赢
<style> 中的规则特异性跟选择器本身有关，和它在哪无关。但多个 <style> 标签之间，**后定义的会覆盖先定义的同名规则**，哪怕选择器更简单。这和外部 CSS 的加载顺序逻辑一致，但开发者常忽略同一页面里可能有多个 <style>（比如框架动态注入、插件自带样式）。
典型陷阱：
-
<style> p { color: red; } </style>和后面另一个<style> p { color: blue; } </style>—— 最终是蓝色 -
.card p（特异性 11）被后面一个p（特异性 1）覆盖？不会；但被后面一个p.card-text（特异性 11）覆盖？会，因为后者位置靠后 - 内联
style="color:green"仍高于所有<style>中的声明（1000 > 11）
HTML5 中 type 属性可省略，但 scoped 属性基本没人用
现代浏览器默认把 <style> 当作 text/css，所以 type="text/css" 完全可以不写。而 scoped 属性本意是让样式只作用于当前 <style> 的父元素及其子树，但除旧版 Firefox 外，主流浏览器从未真正支持，现在已被规范弃用。强行加上不仅无效，还可能干扰构建工具的 CSS 提取逻辑。
实操建议：
- 删掉所有
type="text/css"，减少冗余 - 绝对不要加
scoped，它不是“局部样式”的解决方案 - 真要局部作用域，用 CSS Modules、Shadow DOM，或 class 命名约定（如 BEM）
最易被忽略的一点：内部样式无法被浏览器缓存，每次 HTML 加载都得重新下载和解析整段 CSS —— 即便内容一模一样。页面越多，重复传输越明显。小项目图省事可以，但只要页面超过 3 个，就该切到外部 CSS 文件了。
