HTML 的＜style＞元素

1. 引言

在 HTML 中，<style> 元素用于在文档内部定义 CSS 样式规则。它是将样式与结构结合的最直接方式之一，适合单页面或小型项目使用。本文将带你全面了解 <style> 元素的语法、属性、使用场景以及注意事项。

2. 基本语法

<style> 元素通常放置在 HTML 文档的 <head> 部分，内部书写 CSS 规则。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>style 元素示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    h1 {
      color: #333;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>欢迎学习 style 元素</h1>
  <p>这是一个使用内部样式表的页面。</p>
</body>
</html>

3. 常用属性

<style> 元素支持以下常用属性：

属性	说明	示例值
`type`	样式语言类型（已废弃，默认 `text/css`）	`text/css`
`media`	指定样式生效的媒体类型	`screen`、`print`、`all`
`scoped`	已废弃，限制样式作用于父元素内	---
`nonce`	内容安全策略（CSP）所需的随机数	随机字符串
`title`	指定样式组的标题，可用于切换样式	`"主题A"`

3.1 media 属性示例

html 复制代码

<style media="print">
  /* 打印时隐藏导航栏 */
  nav {
    display: none;
  }
</style>

4. 使用场景

<style> 元素适用于以下场景：

单页面或小型项目，无需单独维护 CSS 文件。
页面级样式定制，如活动页、落地页。
快速原型开发，减少文件切换。
配合 <template> 或组件化开发时局部定义样式。

5. 注意事项

使用 <style> 元素时需要注意以下几点：

建议将 <style> 放在 <head> 中，避免页面闪烁（FOUC）。
内部样式优先级低于内联样式，但高于外部样式表（同特异性时）。
多个 <style> 块会按出现顺序合并，后定义的规则覆盖先定义的规则。
避免在 <body> 中使用 <style>，虽然浏览器支持，但不符合规范且影响性能。
大型项目建议使用外部样式表，便于缓存和复用。

6. 与外部样式表的对比

对比项	`<style>` 内部样式	`<link>` 外部样式
加载方式	随 HTML 一起加载	并行加载，可缓存
复用性	仅当前页面	多页面共享
维护性	适合小项目	适合中大型项目
性能	无额外请求	减少重复下载

7. 总结

<style> 元素是 HTML 中定义内部样式的核心方式，适合小型项目与快速开发。掌握它的语法、属性和适用场景，能帮助你在合适的场景下做出正确的选择。对于大型项目，仍推荐使用外部样式表以提升可维护性与性能。

HTML 的 ＜style＞ 元素