CSS（层叠样式表）是一种用于描述网页上元素外观和布局的语言。在CSS中，有三种不同类型的样式可以用于设置HTML元素的样式：内联、嵌入和外部。下面将介绍这三种样式，并提供相应的代码示例。
内联样式（Inline Style）
内联样式将CSS样式直接放在HTML元素的style属性中，这种样式通常用于单个元素的快速样式更改。使用内联样式可能会影响到样式的可重用性，因此只应在需要时使用。
下面是一个使用内联样式的HTML段落元素：
<p style="color: red; font-size: 18px;">这是一个红色字体大小为18像素的段落。</p>嵌入样式（Embedded Style）
嵌入样式是将CSS样式规则放置在HTML文档的<head>标签内的<style>标签中，以对整个文档或页面上的多个元素进行样式设置。嵌入样式通常针对整个站点或页面进行全局样式设置。
下面是一个包含嵌入样式的HTML文档：
<!DOCTYPE html>
<html>
<head>
<title>嵌入样式示例</title>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个红色字体大小为18像素的段落。</p>
<p>这是另一个红色字体大小为18像素的段落。</p>
</body>
</html>外部样式（External Style）
外部样式将CSS规则放置在一个独立的.CSS文件中，然后通过HTML文档的<link>标签引用该文件。使用外部样式的优势是可以在多个页面上重复使用相同的样式，并且允许对样式进行集中管理。
下面是包含外部样式表的HTML文档：
<!DOCTYPE html>
<html>
<head>
<title>外部样式示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="red-text">这是一个红色字体大小为18像素的段落。</p>
<p class="red-text">这是另一个红色字体大小为18像素的段落。</p>
</body>
</html>在上述HTML文档中，外部样式表存储在名为 styles.css 的文件中，其中包含以下CSS代码：
.red-text {
color: red;
font-size: 18px;
}这个样式表定义了一个名为 red-text 的CSS类，它将文本颜色设置为红色并将字体大小设置为18像素。因此，在HTML文档中，我们给要应用此样式的元素指定一个 class 属性即可。
这就是CSS样式表中三种不同类型的样式。如果有想了解更多相关知识，可以来字节宝官网。字节宝官网提供了丰富的编程学习资源，适合孩子和初学者入门。无论是Web开发、移动应用开发还是数据分析，字节宝都有相应的教程和示例供你学习。让我们一起成为编程世界的狮子吧！访问字节宝官网开始你的编程之旅。
