在单个HTML文件中嵌入CSS样式是前端开发的基础操作，其中内联样式和内部样式表是最常用的两种实现方式，二者在使用场景和特性上存在明显差异，开发者可以根据实际需求选择使用。
内联样式的使用方法
内联样式是直接通过HTML元素的style属性来定义样式的方式，样式仅对当前元素生效，优先级高于内部样式表和外部样式表。
内联样式的语法格式为在元素标签中添加style属性，属性值为CSS样式声明，多个样式声明之间用分号分隔。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内联样式示例</title>
</head>
<body>
<!-- 内联样式直接作用于当前p元素 -->
<p style="color: #ff0000; font-size: 16px; line-height: 1.5;">这是一段使用内联样式的文本</p>
<div style="width: 200px; height: 200px; background-color: #f0f0f0; border: 1px solid #ccc;">
这是一个带内联样式的div容器
</div>
</body>
</html>
内联样式的优点是不需要额外定义选择器，样式直接生效，适合对单个元素做临时样式调整。缺点是样式无法复用，当多个元素需要相同样式时会产生大量重复代码，后期维护成本高，因此不建议在大范围场景中使用。
内部样式表的使用方法
内部样式表是将CSS代码写在HTML文件的<head>区域的<style>标签内，样式可以作用于当前页面的所有匹配元素，复用性优于内联样式。
内部样式表的语法格式为在<head>中添加<style>标签，标签内部编写标准的CSS规则，包含选择器和样式声明块。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
/* 定义段落的基础样式，作用于页面所有p元素 */
p {
color: #333333;
font-size: 14px;
margin-bottom: 10px;
}
/* 定义类名为highlight的元素样式 */
.highlight {
background-color: #fffacd;
padding: 5px;
border-left: 3px solid #ffa500;
}
/* 定义id为header的元素样式 */
#header {
width: 100%;
height: 60px;
background-color: #4a90e2;
color: #ffffff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div id="header">页面头部区域</div>
<p>这是第一段普通文本</p>
<p class="highlight">这是带高亮效果的段落文本</p>
<p>这是第三段普通文本</p>
</body>
</html>
内部样式表的优点是样式集中在<style>标签内，便于统一管理当前页面的样式，支持选择器复用，适合单个页面的样式定义。缺点是样式仅对当前HTML文件生效，无法在多个页面间共享，不适合多页面项目的全局样式管理。
两种嵌入方式的对比
内联样式和内部样式表在特性上存在明显差异，具体对比如下：
| 对比维度 | 内联样式 | 内部样式表 |
|---|---|---|
| 作用范围 | 仅当前单个元素 | 当前页面所有匹配元素 |
| 复用性 | 无复用性 | 支持同页面内复用 |
| 优先级 | 最高（高于内部和外部样式表） | 低于内联样式，高于外部样式表（同权重下） |
| 维护成本 | 高，修改需要逐个调整元素 | 低，修改样式规则即可影响所有匹配元素 |
| 适用场景 | 单个元素的临时样式调整、测试场景 | 单个页面的独立样式定义、小型项目 |
使用注意事项
- 内联样式会覆盖内部样式表中同属性的样式声明，因为内联样式的优先级更高，开发时需要注意样式冲突问题。
- 内部样式表的
<style>标签必须放在<head>区域，否则可能导致页面加载时出现样式闪烁问题。 - 如果项目包含多个页面，建议优先使用外部样式表，内部样式表仅用于当前页面独有的样式，内联样式尽量少用。
- 编写内部样式表的CSS代码时，同样需要遵循CSS语法规范，选择器权重、层叠规则等特性和外部样式表一致。
综合示例
以下是一个同时包含内联样式和内部样式表的完整HTML文件示例，展示两种方式的配合使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式嵌入综合示例</title>
<style>
/* 内部样式表定义基础样式 */
body {
font-family: "Microsoft YaHei", sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.card {
width: 300px;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333333;
}
</style>
</head>
<body>
<div class="card">
<div class="card-title">卡片标题</div>
<p style="color: #666666; font-size: 14px;">这是卡片内容，其中段落文本使用了内联样式调整颜色，标题样式由内部样式表定义</p>
</div>
<div class="card" style="border: 2px solid #4a90e2;">
<div class="card-title">特殊卡片</div>
<p>这个卡片通过内联样式添加了边框，其他样式仍由内部样式表控制</p>
</div>
</body>
</html>
在实际开发中，推荐优先使用内部样式表定义页面通用样式，仅在需要对单个元素做特殊样式调整时，再补充使用内联样式，这样既能保证样式的可维护性，也能满足特殊场景的样式需求。