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

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

在 HTML 中链接 CSS 文件 - CSS

当开发网站时，使用CSS来控制网站的样式和布局非常重要。将CSS代码从HTML中分离出来，并将其保存在单独的.css文件中，将使开发更易于管理，并简化页面的维护。

在HTML文件中连接CSS文件是非常简单的。您需要使用<link>标签将CSS文件链接到HTML文件中。

包含CSS文件的基本语法

以下是将CSS文件链接到HTML文件的基本语法：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>Hello, World!</p>
</body>
</html>

上面给出的HTML代码中，<link>标签包含了以下属性：

  • rel - 描述链接的类型，这里值为“stylesheet”表示该链接是一个CSS文件。
  • type - 描述链接文件的MIME类型，这里设置为"text/css"，表示链接的文件是一个CSS文件。
  • href - CSS文件的路径，这里设置为“style.css”，表示CSS文件名为“style”。

请注意，将CSS文件放在与HTML文件相同的目录中，是将CSS文件链接到HTML文件的最常用方法。

在HTML中连接多个CSS文件

在HTML文件中连接多个CSS文件也是非常简单的。您可以使用多个<link>标签，将每个文件链接到HTML文件中。

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
  <p>Hello, World!</p>
</body>
</html>

上面给出的HTML代码中，<head>标签中有两个<link>标签，分别链接了名字为“style.css”和“responsive.css”的两个CSS文件。

结论

如上所述，您可以使用简单的基本语法，将CSS文件链接到HTML文件中。这将使CSS与HTML代码分离，使网站维护更加简单。