在网页开发中，CSS用于控制HTML元素的样式表现，将CSS嵌入到HTML中是前端开发的基础操作，目前主流的嵌入方式共有三种，分别是内联样式、内部样式表和外部样式表。
一、内联样式
内联样式是将CSS样式直接写在HTML元素的style属性中，这种方式的作用范围仅针对当前单个元素。
语法格式
直接在元素的开始标签中添加style属性，属性值为CSS样式声明，多个样式之间用分号分隔。
<!-- 内联样式示例 -->
<div style="color: red; font-size: 16px; margin-top: 10px;">
这是一个使用内联样式的div元素
</div>
<p style="background-color: #f0f0f0; padding: 8px;">
这是一个使用内联样式的p元素
</p>
优缺点
- 优点：优先级最高，会直接覆盖其他两种方式定义的同属性样式，编写简单，无需额外定义选择器。
- 缺点：样式和内容耦合度高，无法复用，当多个元素需要相同样式时需要重复编写，不利于后期维护。
适用场景
仅适合单个元素的临时样式调整，或者需要强制覆盖其他样式的特殊场景，不建议在正式项目中大量使用。
二、内部样式表
内部样式表是将CSS代码写在HTML文档的<style>标签中，<style>标签通常放在<head>标签内部，作用范围是整个当前HTML文档。
语法格式
在<head>标签内添加<style>标签，标签内部编写标准的CSS规则，包含选择器和样式声明。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
/* 定义类选择器样式 */
.text-blue {
color: blue;
}
/* 定义元素选择器样式 */
h2 {
font-size: 20px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
/* 定义ID选择器样式 */
#special-box {
width: 200px;
height: 100px;
background-color: #e8f4ff;
}
</style>
</head>
<body>
<h2>内部样式表示例标题</h2>
<div class="text-blue">蓝色文本内容的div</div>
<div id="special-box">特殊样式的盒子</div>
</body>
</html>
优缺点
- 优点：样式集中在同一个HTML文档的头部，不需要额外加载外部文件，适合单个页面的样式定义，选择器可以复用。
- 缺点：样式仅对当前页面生效，多个页面需要相同样式时仍需重复编写，当样式代码较多时会导致HTML文档体积过大。
适用场景
适合样式较少、仅单个页面使用的项目，或者临时测试样式的场景，不适合多页面的大型项目。
三、外部样式表
外部样式表是将CSS代码单独写在一个.css后缀的文件中，然后在HTML文档中通过<link>标签引入，作用范围是所有引入该CSS文件的HTML文档。
步骤1：创建外部CSS文件
新建一个style.css文件，编写CSS规则，不需要包含<style>标签。
/* style.css 文件内容 */
/* 全局基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
}
/* 公共类样式 */
.container {
width: 1200px;
margin: 0 auto;
}
.text-center {
text-align: center;
}
/* 组件样式 */
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-primary {
background-color: #007bff;
color: white;
}
步骤2：在HTML中引入外部CSS文件
在HTML文档的<head>标签内使用<link>标签引入CSS文件，rel属性固定为stylesheet，href属性填写CSS文件的路径。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="text-center">外部样式表示例</h1>
<button class="btn btn-primary">主要按钮</button>
</div>
</body>
</html>
优缺点
- 优点：实现了样式和内容的完全分离，CSS文件可以被多个HTML页面复用，浏览器会缓存CSS文件，减少后续页面的加载时间，便于后期统一维护样式。
- 缺点：需要额外发送一次网络请求加载CSS文件，如果CSS文件路径错误会导致样式无法生效。
适用场景
适合所有正式的前端项目，尤其是多页面项目、中大型项目，是实际开发中最推荐使用的CSS嵌入方式。
三种方式的优先级对比
当同一个元素被三种方式同时定义了相同样式属性时，优先级从高到低依次为：内联样式 > 内部样式表 > 外部样式表。如果内部样式表和外部样式表中存在相同选择器，那么后引入的样式会覆盖先引入的样式。
| 嵌入方式 | 作用范围 | 优先级 | 复用性 |
|---|---|---|---|
| 内联样式 | 单个元素 | 最高 | 无 |
| 内部样式表 | 当前HTML文档 | 中等 | 当前页面内可复用 |
| 外部样式表 | 所有引入的HTML文档 | 最低 | 多页面可复用 |
常见问题解答
为什么引入的外部CSS文件没有生效？
首先检查<link>标签的href属性路径是否正确，其次检查CSS文件中的选择器是否匹配目标元素，还要注意是否有内联样式或更高优先级的样式覆盖了当前样式。
可以同时使用多种方式嵌入CSS吗？
可以，实际开发中经常会同时使用外部样式表定义全局基础样式，内部样式表定义当前页面的特殊样式，内联样式做临时调整，只要注意优先级规则即可。