将 css 文件附加到 html - CSS (1)

📌 相关文章

📜 将 css 文件附加到 html - CSS (1)

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

将 css 文件附加到 html - CSS

CSS（层叠样式表）用于为 HTML 页面添加样式和布局。将 CSS 文件附加（或链接）到 HTML 页面是使用 CSS 的标准方式之一。本文将介绍如何将 CSS 文件链接到 HTML 页面中。

步骤

以下是将 CSS 文件附加到 HTML 页面的简单步骤：

创建一个包含 CSS 样式的文件，并将其保存为 .css 文件扩展名。例如，styles.css。
在 HTML 页面的 <head> 标签中添加一个 <link> 元素，该元素包含以下属性：
- rel="stylesheet"：指定链接为样式表。
- type="text/css"：指定样式表为文本文件类型。
- href 属性：指定样式表文件的路径和名称（相对路径或绝对路径）。
例如：
```
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
```
在 .css 文件中编写 CSS 样式规则。

示例

HTML 文件

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一段文本。</p>
  </body>
</html>

CSS 文件：styles.css

h1 {
  color: blue;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

在这个例子中，我们通过将 styles.css 文件链接到 HTML 页面中来添加样式。HTML 页面包含一个标题和一段文本。CSS 文件定义了标题的颜色和文本的字体和字号。

结论

通过将 CSS 文件链接到 HTML 页面，我们可以轻松地为页面添加样式和布局。保持HTML和CSS代码分离，并允许我们更轻松地维护和调试代码。