📌  相关文章
📜  如何链接 style.css - Html (1)

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

如何链接 style.css - Html

在网页开发中，链接外部样式文件是非常常见的操作，这可以帮助我们实现样式的复用性，提高代码的可读性和可维护性。在这篇文章中，我们将介绍如何在 HTML 中链接外部样式文件 style.css。

步骤

  1. 在文本编辑器中创建一个新文件，并将其命名为 index.html。

  2. 在 index.html 文件的 <head> 标签中添加以下代码，用于链接外部样式文件：

<link rel="stylesheet" type="text/css" href="style.css">

这段代码使用了 link 标签来链接外部样式文件 style.css。其中 rel 属性定义了链接的关系，type 属性定义了文档的类型，href 属性定义了文档的地址。

  1. 在同一目录下创建一个名为 style.css 的新文件，并在其中添加以下代码：
body {
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}

h1 {
  color: #333;
  font-size: 36px;
  line-height: 1.5;
  margin: 0;
  padding: 20px;
}

p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 20px;
}

这段代码定义了一些基本的样式，包括页面的背景颜色、标题的样式和段落的样式。

  1. 在 index.html 文件中添加以下代码，在页面中引用定义的样式：
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>This is some sample text.</p>
  </body>
</html>

这段代码定义了一个网页，其中包含一个标题和一个段落。通过在 <head> 标签中链接外部样式文件 style.css，我们可以将页面的样式与 HTML 文档分开。

结论

通过以上步骤，我们可以在 HTML 中链接外部样式文件 style.css，从而实现样式的复用性，提高代码的可读性和可维护性。在实际开发中，我们可以将样式文件放在一个单独的文件夹中，以便更好地组织代码。