1. 引言
在 HTML 中，<style> 元素用于在文档内部定义 CSS 样式规则。它是将样式与结构结合的最直接方式之一，适合单页面或小型项目使用。本文将带你全面了解 <style> 元素的语法、属性、使用场景以及注意事项。
2. 基本语法
<style> 元素通常放置在 HTML 文档的 <head> 部分，内部书写 CSS 规则。
<!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 属性示例
<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 中定义内部样式的核心方式，适合小型项目与快速开发。掌握它的语法、属性和适用场景，能帮助你在合适的场景下做出正确的选择。对于大型项目，仍推荐使用外部样式表以提升可维护性与性能。
