pin_drop当前位置:知识文库 ❯ 图文
元信息：HTML style标签 - 完整教程与代码示例
一、教程简介
HTML <style> 标签用于在文档内部嵌入CSS样式规则，是连接HTML结构与CSS表现的直接桥梁。虽然现代前端开发更倾向于使用外部样式表，但 <style> 标签在关键渲染路径优化、组件化开发和特定场景下仍然不可或缺。本教程将全面讲解 <style> 标签的语法、属性、性能影响及最佳实践。
二、核心概念
style 标签的作用
<style> 标签允许开发者直接在HTML文档中编写CSS规则，无需引用外部文件。浏览器在解析到 <style> 标签时会立即应用其中的样式，这使其成为优化首屏渲染速度的重要工具。
style 标签 vs 外部样式表
style 标签的属性
三、语法与用法
基本语法
代码示例
<!-- HTML5 简写（推荐） -->
<style>
body {
margin: 0;
padding: 0;
}
</style>
<!-- 传统写法（仍可使用） -->
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>media 属性
media 属性指定样式表适用的媒体类型或媒体查询条件。
代码示例
<!-- 屏幕显示样式 -->
<style media="screen">
.print-only {
display: none;
}
</style>
<!-- 打印样式 -->
<style media="print">
.no-print {
display: none;
}
body {
font-size: 12pt;
color: #000;
}
</style>
<!-- 响应式样式 -->
<style media="screen and (max-width: 768px)">
.sidebar {
display: none;
}
</style>
<!-- 暗色模式 -->
<style media="(prefers-color-scheme: dark)">
body {
background: #1a1a1a;
color: #e0e0e0;
}
</style>
<!-- 减少动画偏好 -->
<style media="(prefers-reduced-motion: reduce)">
* {
animation: none !important;
transition: none !important;
}
</style>常用 media 值：
替代样式表（Alternate Stylesheets）
代码示例
<!-- 默认样式表 -->
<style title="默认">
body { background: #fff; color: #333; }
</style>
<!-- 替代样式表：默认不生效，用户可选择 -->
<link rel="alternate stylesheet" title="高对比度"
href="high-contrast.css">
<!-- 替代样式表：暗色模式 -->
<link rel="alternate stylesheet" title="暗色模式"
href="dark-mode.css">提示：替代样式表通过
rel="alternate stylesheet"和title属性定义。浏览器（如Firefox）允许用户在"视图 > 页面样式"中切换。
style 标签的位置
代码示例
<!-- 位置1：head 中（推荐） -->
<head>
<style>
/* 首屏关键CSS */
</style>
</head>
<!-- 位置2：body 中（HTML5允许，但不推荐用于大量样式） -->
<body>
<style>
/* 组件局部样式（Web Components中常用） */
</style>
</body>
<!-- 位置3：scoped样式（已废弃，使用Shadow DOM替代） -->
<!-- <style scoped> 已从HTML规范中移除 -->四、代码示例
示例1：关键CSS内联优化
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关键CSS内联优化示例</title>
<!-- 关键CSS：首屏渲染必需的样式直接内联 -->
<style>
/* 重置样式 */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 首屏关键布局 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
background: #fff;
}
.header {
background: #1a73e8;
color: #fff;
padding: 16px 24px;
position: sticky;
top: 0;
z-index: 100;
}
.header h1 {
font-size: 20px;
font-weight: 600;
}
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 80px 24px;
text-align: center;
}
.hero h2 {
font-size: 36px;
margin-bottom: 16px;
}
.hero p {
font-size: 18px;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* 非首屏内容先隐藏，避免布局偏移 */
.below-fold {
opacity: 0;
transition: opacity 0.5s;
}
.below-fold.loaded {
opacity: 1;
}
</style>
<!-- 非关键CSS：异步加载 -->
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
</head>
<body>
<header class="header">
<h1>关键CSS优化示例</h1>
</header>
<section class="hero">
<h2>首屏内容快速渲染</h2>
<p>通过内联关键CSS，首屏内容可以在HTML下载完成后立即渲染，无需等待外部CSS文件。</p>
</section>
<section class="below-fold" id="belowFold">
<div style="max-width: 800px; margin: 40px auto; padding: 0 24px;">
<h3 style="margin-bottom: 16px; color: #1a73e8;">非首屏内容</h3>
<p style="color: #666; line-height: 1.8;">这部分内容的样式可以异步加载，不影响首屏渲染速度。</p>
</div>
</section>
<script>
// 模拟非首屏内容加载完成
setTimeout(function() {
document.getElementById('belowFold').classList.add('loaded');
}, 500);
</script>
</body>
</html>示例2：media 属性实战
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style标签 media属性实战</title>
<!-- 屏幕样式 -->
<style media="screen">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f5f5f5;
color: #333;
padding: 24px;
}
.container {
max-width: 900px;
margin: 0 auto;
}
h1 {
color: #1a73e8;
margin-bottom: 24px;
}
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
}
.main-content {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.sidebar {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.nav-links {
display: flex;
gap: 16px;
margin-bottom: 24px;
}
.nav-links a {
color: #1a73e8;
text-decoration: none;
padding: 8px 16px;
border-radius: 8px;
background: #e8f0fe;
}
.screen-only {
display: block;
}
.print-only {
display: none;
}
.ad-banner {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: #fff;
padding: 20px;
border-radius: 12px;
text-align: center;
margin-bottom: 24px;
}
</style>
<!-- 打印样式 -->
<style media="print">
body {
font-size: 12pt;
color: #000;
background: #fff;
padding: 0;
}
.nav-links,
.sidebar,
.ad-banner {
display: none !important;
}
.content-grid {
display: block;
}
.main-content {
box-shadow: none;
padding: 0;
}
.screen-only {
display: none !important;
}
.print-only {
display: block !important;
}
a {
color: #000;
text-decoration: none;
}
a::after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #666;
}
</style>
<!-- 暗色模式样式 -->
<style media="(prefers-color-scheme: dark)">
body {
background: #121212;
color: #e0e0e0;
}
.main-content,
.sidebar {
background: #1e1e1e;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
h1 {
color: #90caf9;
}
.nav-links a {
background: #1e3a5f;
color: #90caf9;
}
</style>
</head>
<body>
<div class="container">
<h1>style 标签 media 属性实战</h1>
<div class="ad-banner screen-only">
限时优惠：前端课程8折起！
</div>
<div class="nav-links screen-only">
<a href="#home">首页</a>
<a href="#tutorial">教程</a>
<a href="#about">关于</a>
</div>
<div class="print-only">
<p style="margin-bottom: 12px; font-size: 10pt; color: #666;">打印自：前端学习网 | 打印时间：2026-04-22</p>
<hr>
</div>
<div class="content-grid">
<div class="main-content">
<h2 style="margin-bottom: 16px;">文章内容</h2>
<p style="line-height: 1.8; color: #666;">
本页面演示了 style 标签的 media 属性在不同场景下的应用。尝试使用浏览器的打印预览功能（Ctrl+P），可以看到打印样式的效果。如果你的系统设置了暗色模式，页面会自动切换为暗色主题。
</p>
</div>
<div class="sidebar">
<h3 style="margin-bottom: 12px; font-size: 16px;">侧边栏</h3>
<p style="font-size: 14px; color: #999;">侧边栏内容在打印时会被隐藏。</p>
</div>
</div>
</div>
</body>
</html>示例3：动态样式表切换
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态样式表切换</title>
<style id="theme-light">
:root {
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-card: #ffffff;
--text-primary: #333333;
--text-secondary: #666666;
--accent: #1a73e8;
--accent-bg: #e8f0fe;
--border: #e0e0e0;
--shadow: rgba(0, 0, 0, 0.06);
}
</style>
<style id="theme-dark" media="not all">
:root {
--bg-primary: #121212;
--bg-secondary: #1e1e1e;
--bg-card: #252525;
--text-primary: #e0e0e0;
--text-secondary: #aaaaaa;
--accent: #90caf9;
--accent-bg: #1e3a5f;
--border: #333333;
--shadow: rgba(0, 0, 0, 0.3);
}
</style>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
transition: background 0.3s, color 0.3s;
min-height: 100vh;
padding: 24px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
h1 {
color: var(--accent);
margin-bottom: 24px;
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 2px 8px var(--shadow);
transition: background 0.3s, border-color 0.3s;
}
.card h3 {
color: var(--text-primary);
margin-bottom: 8px;
}
.card p {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.8;
}
.theme-switcher {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
.theme-btn {
padding: 10px 20px;
border: 2px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
color: var(--text-primary);
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.theme-btn:hover {
border-color: var(--accent);
}
.theme-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.current-theme {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
background: var(--accent-bg);
color: var(--accent);
font-size: 13px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<h1>动态样式表切换</h1>
<div class="theme-switcher">
<button class="theme-btn active" onclick="switchTheme('light')">浅色模式</button>
<button class="theme-btn" onclick="switchTheme('dark')">深色模式</button>
<button class="theme-btn" onclick="switchTheme('system')">跟随系统</button>
</div>
<p style="margin-bottom: 24px;">
当前主题：<span class="current-theme" id="currentTheme">浅色模式</span>
</p>
<div class="card">
<h3>CSS变量主题切换</h3>
<p>通过切换 style 标签的 media 属性来启用/禁用不同的主题样式表，实现无闪烁的主题切换。</p>
</div>
<div class="card">
<h3>实现原理</h3>
<p>浅色主题的 media 为 "all"（始终生效），深色主题的 media 为 "not all"（不生效）。切换时修改 media 属性即可。</p>
</div>
</div>
<script>
function switchTheme(theme) {
var lightStyle = document.getElementById('theme-light');
var darkStyle = document.getElementById('theme-dark');
var themeLabel = document.getElementById('currentTheme');
// 更新按钮状态
var buttons = document.querySelectorAll('.theme-btn');
buttons.forEach(function(btn) { btn.classList.remove('active'); });
if (theme === 'light') {
lightStyle.media = 'all';
darkStyle.media = 'not all';
themeLabel.textContent = '浅色模式';
buttons[0].classList.add('active');
} else if (theme === 'dark') {
lightStyle.media = 'not all';
darkStyle.media = 'all';
themeLabel.textContent = '深色模式';
buttons[1].classList.add('active');
} else {
lightStyle.media = '(prefers-color-scheme: light)';
darkStyle.media = '(prefers-color-scheme: dark)';
themeLabel.textContent = '跟随系统';
buttons[2].classList.add('active');
}
// 保存偏好
localStorage.setItem('theme', theme);
}
// 初始化：读取保存的偏好
var savedTheme = localStorage.getItem('theme') || 'system';
switchTheme(savedTheme);
</script>
</body>
</html>五、浏览器兼容性
六、注意事项与最佳实践
1. 关键CSS内联原则
代码示例
<!-- 推荐：仅内联首屏关键CSS -->
<style>
/* 首屏可见元素的样式 */
.header { ... }
.hero { ... }
.above-fold { ... }
</style>
<!-- 非关键CSS异步加载 -->
<link rel="preload" href="full-styles.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="full-styles.css"></noscript>2. 内联样式大小控制
代码示例
<!-- 推荐：关键CSS控制在 14KB 以内 -->
<!-- 14KB 是TCP慢启动的初始拥塞窗口大小 -->
<style>
/* 仅包含首屏关键样式，约 10-14KB */
</style>
<!-- 不推荐：将所有CSS都内联 -->
<style>
/* 包含所有页面的所有样式，可能超过 100KB */
</style>3. 避免在 body 中大量使用 style 标签
代码示例
<!-- 不推荐：body 中散布多个 style 标签 -->
<body>
<style>.section-a { ... }</style>
<div class="section-a">...</div>
<style>.section-b { ... }</style>
<div class="section-b">...</div>
</body>
<!-- 推荐：将样式集中在 head 中 -->
<head>
<style>
.section-a { ... }
.section-b { ... }
</style>
</head>4. 打印样式的最佳实践
代码示例
<style media="print">
/* 隐藏不需要打印的元素 */
.nav, .sidebar, .footer, .ads, .comments {
display: none !important;
}
/* 设置打印友好的字体和颜色 */
body {
font-size: 12pt;
color: #000;
background: #fff;
}
/* 显示链接URL */
a[href]::after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #666;
}
/* 避免元素跨页断裂 */
h1, h2, h3 {
page-break-after: avoid;
}
img {
page-break-inside: avoid;
}
</style>5. 使用CSS自定义属性管理主题
代码示例
<style>
:root {
--primary: #1a73e8;
--bg: #ffffff;
--text: #333333;
}
@media (prefers-color-scheme: dark) {
:root {
--primary: #90caf9;
--bg: #121212;
--text: #e0e0e0;
}
}
body {
background: var(--bg);
color: var(--text);
}
</style>七、代码规范示例
标准项目 style 标签使用规范
代码示例
<head>
<!-- 1. 关键CSS内联（首屏渲染必需） -->
<style>
/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Critical above-the-fold styles */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
.header { ... }
.hero { ... }
</style>
<!-- 2. 外部样式表（非关键CSS） -->
<link rel="stylesheet" href="styles.css">
<!-- 3. 打印样式 -->
<style media="print">
/* Print-specific styles */
</style>
</head>八、常见问题与解决方案
常见问题
Q1：style 标签中的样式会阻塞渲染吗？
解决方案：是的。<style> 标签中的CSS会阻塞渲染，浏览器必须先解析完所有样式规则才能进行首次渲染。这正是关键CSS内联的优势所在——它确保首屏样式立即可用，同时避免了外部CSS请求的延迟。
Q2：如何避免FOUC（无样式内容闪烁）？
解决方案：
-
将关键CSS内联在
<head>中 -
外部样式表放在
<head>中（不要放在 body 末尾） -
使用
rel="preload"预加载关键CSS -
避免使用
@import引入样式表（会导致串行加载）
Q3：替代样式表为什么在Chrome中不工作？
解决方案：Chrome 不原生支持替代样式表的切换。解决方案：
-
使用 JavaScript 实现样式切换
-
使用 CSS 自定义属性实现主题切换
-
使用
disabled属性动态启用/禁用样式表 -
使用
media属性切换（如示例3所示）
Q4：style 标签可以放在 body 中吗？
解决方案：HTML5 允许 <style> 出现在 <body> 中，但这样做会导致样式重新计算和重绘，影响性能。推荐的做法是将所有样式集中在 <head> 中，或使用 Shadow DOM 实现组件级样式隔离。
Q5：内联CSS和外部CSS的优先级一样吗？
解决方案：是的。<style> 标签中的CSS与外部样式表的优先级相同，都遵循CSS层叠规则（后声明者优先，特异性高者优先）。<style> 标签的声明顺序取决于它在文档中相对于 <link> 标签的位置。
九、总结
HTML <style> 标签是前端性能优化和主题管理的重要工具。合理使用内联样式可以显著提升首屏渲染速度，而配合 media 属性可以实现打印优化、暗色模式适配等高级功能。
核心要点回顾：
-
关键CSS内联：将首屏必需的CSS直接嵌入
<style>标签，消除外部请求延迟 -
media 属性：实现条件样式加载，支持打印、暗色模式、响应式等场景
-
大小控制：内联CSS控制在 14KB 以内，避免HTML文件过大
-
打印优化：使用
media="print"提供打印友好的样式 -
主题切换：通过 CSS 自定义属性和 media 属性实现无闪烁主题切换
-
代码分离：生产环境中，大部分样式应放在外部文件中，仅内联关键CSS
-
避免 body 中的 style：将样式集中在
<head>中，减少重绘和重排 -
替代样式表：浏览器支持有限，建议使用 JavaScript 方案替代
掌握 <style> 标签的正确使用，是前端性能优化和用户体验提升的关键技能之一。
标签：
style标签
内联样式
media属性
关键CSS
性能优化
主题切换
打印样式
本文涉及AI创作
内容由AI创作，请仔细甄别
