您现在的位置是：网站首页 > <style>-内嵌CSS样式文章详情
<style>-内嵌CSS样式
陈川
【
HTML
】
8371人已围观
3094字
<style>标签是HTML中用于内嵌CSS样式的关键元素，它允许开发者在HTML文档内部直接定义样式规则，无需依赖外部样式表。这种内联方式适合小型项目或需要快速原型设计的场景。
<style>标签的基本语法
<style>标签通常放置在HTML文档的<head>部分，但也可以出现在<body>中（HTML5允许）。基本语法结构如下：
<head>
<style>
/* CSS规则写在这里 */
body {
background-color: #f0f0f0;
}
</style>
</head>
标签内的内容会被浏览器解析为CSS，而不是HTML。注意以下几点特性：
- 必须包含
type="text/css"属性（HTML5中可省略） - 支持所有标准CSS选择器和属性
- 样式作用域默认限于当前文档
属性详解
虽然大多数情况下<style>标签不需要额外属性，但有几个重要属性值得关注：
<style type="text/css" media="screen and (max-width: 600px)">
/* 移动设备专用样式 */
.sidebar {
display: none;
}
</style>
常见属性包括：
media：指定样式表应用的媒体类型（如打印、屏幕等）scoped（已废弃）：曾用于限定样式作用范围title：定义替代样式表名称
实际应用场景
快速原型开发
在构建页面原型时，内嵌样式可以避免创建额外文件：
<!DOCTYPE html>
<html>
<head>
<style>
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-title {
font-size: 1.2em;
color: #333;
}
</style>
</head>
<body>
<div class="card">
<h3 class="card-title">产品名称</h3>
<p>产品描述内容...</p>
</div>
</body>
</html>
动态样式修改
结合JavaScript可以动态修改内嵌样式：
<style id="themeStyles">
body {
background-color: #fff;
color: #333;
}
</style>
<script>
function toggleDarkMode() {
const style = document.getElementById('themeStyles');
style.innerHTML = `
body {
background-color: #222;
color: #eee;
}
`;
}
</script>
与外部样式表的对比
| 特性 | 内嵌样式 | 外部样式表 |
|---|---|---|
| 加载方式 | 随HTML文档加载 | 额外HTTP请求 |
| 缓存 | 无法单独缓存 | 可被浏览器缓存 |
| 适用场景 | 小型项目/单页样式 | 大型项目/多页共用样式 |
| 维护性 | 分散在多个HTML文件中 | 集中管理 |
高级用法
CSS变量定义
可以在<style>中定义全局CSS变量：
<style>
:root {
--primary-color: #4285f4;
--spacing-unit: 8px;
}
.button {
background-color: var(--primary-color);
padding: calc(var(--spacing-unit) * 2);
}
</style>
关键帧动画
完整定义动画无需外部依赖：
<style>
@keyframes slidein {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.slide-element {
animation: slidein 0.5s ease-out;
}
</style>
性能考量
虽然内嵌样式可以减少HTTP请求，但在以下情况可能影响性能：
- 大型CSS规则集会增加HTML文档体积
- 相同样式无法在多个页面间复用
- 浏览器无法并行下载样式资源
最佳实践是：
- 关键CSS内嵌在
<head>中提高首屏渲染速度 - 非关键CSS使用外部样式表异步加载
- 保持内嵌CSS体积小于14KB（TCP初始拥塞窗口大小）
浏览器兼容性说明
所有现代浏览器都完全支持<style>标签，但需要注意：
- IE8及更早版本对某些CSS3特性支持有限
- 移动端浏览器可能对某些媒体查询支持不同
scoped属性已被大多数浏览器弃用
可以通过特性检测确保样式降级方案：
<style>
.modern-feature {
color: #fff;
}
</style>
<!--[if lte IE 8]>
<style>
.modern-feature {
color: #000; /* IE8备用样式 */
}
</style>
<![endif]-->
安全注意事项
内嵌CSS也可能成为攻击载体：
- 避免直接插入用户提供的内容
- 对动态生成的CSS内容进行转义
- 注意
expression()等可能执行脚本的CSS特性（IE已废弃）
<!-- 危险示例 -->
<style>
/* 不要这样做！ */
.user-content {
background-image: url("javascript:alert('XSS')");
}
</style>
上一篇： <link>-外部资源链接
下一篇： <script>-客户端脚本
