📅 最后修改于: 2023-12-03 15:09:35.107000 🧑 作者: Mango
在 Web 开发中，CSS 用于样式化 HTML 页面，使其具有更好的风格和布局。CSS 样式可以直接嵌入到 HTML 页面中，也可以通过外部 CSS 文件的方式添加到 HTML 页面中。在本文中，我们将介绍如何将外部 CSS 文件添加到 HTML 页面中。
首先，我们需要为我们的样式指定一个 CSS 文件。在你的项目中，可以选择通过代码创建一个新的 CSS 文件，或者直接在文件系统中新建一个 CSS 文件并将其路径添加到 HTML 页面中。
要将外部 CSS 文件添加到 HTML 页面中，我们需要使用 link 元素。这个元素应该放在 head 元素中。请看以下示例代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- ... -->
</body>
</html>
在上面的代码中，link 元素的 href 属性指定了要加载的CSS文件的路径。如果你的 CSS 文件在 HTML 文件相同的目录下，你可以直接将文件名指定为 href 属性的值。如果你的 CSS 文件在其他目录中，你需要指定相对路径或绝对路径。
当你的 CSS 文件被链接到 HTML 页面中之后，你可以开始为你的 HTML 元素设置样式了。在 CSS 文件中，你需要使用选择器来选择你要样式化的 HTML 元素，然后使用属性来指定样式。例如，以下代码查询所有 <h1> 元素，使它们的颜色为红色：
h1 {
color: red;
}
现在你知道如何将外部 CSS 文件添加到 HTML 页面中了。通过将 CSS 样式移到外部文件中，你可以更好地组织和管理你的样式，并使您的 HTML 文档更加简洁。