<style>: 样式标签

最后更新：2026-10-13

<style>样式标签

在文档内部直接书写 CSS 样式规则，无需外部文件；也可通过 media 限定生效条件。

<style>
  选择器 { 属性: 值; }
</style>

该元素支持全局属性及以下专有属性：

属性	值	描述
`type`		样式语言，默认 text/css，通常可省略。
`media`		限定样式生效的媒体条件（如 print）。

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<style>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： 小型演示常用 style 内联；正式项目建议用 link 引入外部 CSS 以便复用。

Qstyle 标签应该放在 head 还是 body 里？

A规范上 style 只允许出现在 head 里（body 中放 style 不符合内容模型）。实测浏览器能容错，但把关键 CSS 集中放 head、避免 FOUC 才是正路；组件化场景用 JS 注入 style 则另当别论。

Qstyle 和 link 引入 CSS 有什么区别？

A<style> 内联样式块：随 HTML 一起到达、无额外请求，适合首屏关键 CSS；<link> 外链：可被缓存、多页复用、便于维护，适合全站样式。性能优化经典组合：head 里 style 放关键 CSS，link 异步加载其余。

Qstyle 的 media 属性怎么用？

A给 style 加 media='print' 可让这段 CSS 只在打印时生效，或 media='(max-width: 600px)' 条件生效。注意：不匹配的 style 块不会应用，但仍会被下载和解析。

更多案例即将上线，敬请期待。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。