CSS样式表的三种样式，你都清楚吗？

2023-05-23 16:04:00 浏览数 (3543)

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开发、移动应用开发还是数据分析，编程狮都有相应的教程和示例供你学习。让我们一起成为编程世界的狮子吧！访问编程狮官网开始你的编程之旅。