📅 最后修改于: 2023-12-03 15:30:12.014000 🧑 作者: Mango
CSS（层叠样式表）是一种用于描述文档如何呈现的语言。它可以帮助您控制文档的布局、颜色、字体和其他方面的样式。在此基础上，CSS 可以分为以下几个类型：
内联样式是一种将样式信息写在 HTML 标签内部的方式。通过将 CSS 样式直接应用于单个元素，内联样式为单个元素提供了特定的样式。示例代码如下：
<h1 style="color:blue;">这是一个带有内联样式的标题</h1>
内部样式表是一种将样式信息写在网页的 <head> 标签内部的方式。通过在 HTML 文档的 <head> 标签中添加<style> 标签，您可以定义整个页面的样式。内部样式表仅限于 HTML 文档中，不会被其他页面调用。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>这是一个带有内部样式表的标题</h1>
</body>
</html>
外部样式表是一种将样式信息单独写在 .css 文件中的方式。通过在 HTML 页面的<head> 标签内包含链接到 CSS 文件的<link> 标签，您可以在整个网站的所有页面上应用相同的样式。外部样式表可以通过修改一个文件，轻松地改变网站的整个外观。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个带有外部样式的标题</h1>
</body>
</html>
styles.css 文件示例代码：
h1 {
color: blue;
}
导入样式表是一种将样式信息分开写入多个 .css 文件中的方式。通过在一个 .css 文件中使用 @import 语句，您可以链接到其他 .css 文件来处理特定的页面元素。示例代码如下：
@import url("导入的样式.css");
CSS 样式可以在 HTML 文档中通过内联样式、内部样式表、外部样式表以及导入样式表四种方式实现。选择哪种方式取决于您的需求，但是内联样式通常不被推荐使用，因为它增加了 HTML 文件的大小并使样式难以维护。