📌  相关文章
📜  html 链接本地 css 文件 - CSS (1)

📅  最后修改于: 2023-12-03 15:01:18.002000             🧑  作者: Mango

HTML 链接本地 CSS 文件 - CSS

在 HTML 中，我们可以通过链接本地 CSS 文件来设置网页的样式。这样的好处是可以将样式与 HTML 文件分离，更方便地维护代码。

创建 CSS 文件

首先，我们需要创建一个新的 CSS 文件。可以使用任何编辑器，例如 Sublime Text、Notepad++，或者 Visual Studio Code。将以下代码保存为 style.css：

body {
  background-color: #f1f1f1;
}

h1 {
  color: #444;
}

p {
  font-size: 18px;
}
链接 CSS 文件至 HTML

在 HTML 中，我们使用 <link> 元素链接 CSS 文件。将以下代码复制并粘贴到 HTML 文件头部，这样 HTML 文件就可以引用 style.css 中的样式：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

在 <head> 中，我们使用 <link> 元素指定 rel（关系）属性为 stylesheet，type（类型）属性为 text/css，href（目标 URL）属性为相对于 HTML 文件的 URL。这样，HTML 文件就会应用 style.css 中的样式了。

总结

这就是如何在 HTML 中链接本地 CSS 文件的方法。通过这种方法，我们可以在样式和 HTML 之间分离关注点，从而更容易地维护代码。