HTML内部样式表怎么写?head中style标签使用教程
2026-03-30 20:26:15
0浏览
收藏
本文深入解析了HTML中`

HTML 中 标签该放哪?
必须放在 里,不能塞进 开头或中间。浏览器解析 HTML 是从上到下流式进行的, 提前声明样式,才能让后续 DOM 元素渲染时立刻应用——否则可能闪屏(先无样式渲染,再重绘)。
常见错误现象: 放在 前,页面短暂白屏或布局错乱;更隐蔽的是某些框架(如 Vue SFC)里误把 scoped style 当普通 直接塞进 body。
- 只允许出现在
内,且建议紧贴后或组之后 - 不支持
defer或async属性,它本身就是同步阻塞解析的 - 多个
标签按出现顺序层叠,后写的规则可覆盖前面同优先级的
里写 CSS 有哪些限制?
它本质是嵌入式 CSS 容器,语法和外部 .css 文件完全一致,但不支持 @import(除非用 JS 动态注入)、不支持 CSS @layer 声明(部分新浏览器已支持,但兼容性差),也不能直接引用本地文件路径。
使用场景:小项目快速原型、邮件模板内联样式(因多数邮箱客户端禁外链)、SSR 渲染中为关键 CSS 提供首屏保障。
@import url("xxx.css")在中会触发额外 HTTP 请求,且阻塞渲染,应避免- 不能写
url(./assets/icon.png)这类相对路径——浏览器按当前 HTML URL 解析,不是按文件系统 - 媒体查询、自定义属性(
--main-color)、CSS 变量均可正常使用
内联 style、 和外部 CSS,优先级怎么算?
三者共存时,优先级只看 CSS 特异性(specificity)和声明顺序,跟“在哪写”无关。但实操中容易误判:
比如 是内联样式,特异性为 1000;而

