📌  相关文章
📜  html 导入 css - Html (1)

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

HTML 导入 CSS

HTML（Hypertext Markup Language）和CSS（Cascading Style Sheets）是前端开发的两大重要组成部分。其中，HTML负责定义网页结构和内容，CSS则负责定义网页的样式和布局。在HTML中导入CSS文件可以通过标签来实现，下面将详细介绍如何使用标签在HTML中导入CSS文件。

语法
<link rel="stylesheet" type="text/css" href="style.css">
详解
  • rel属性: 指定当前文档与被链接文档之间的关系，这里需要设为"stylesheet"。
  • type属性：指定被链接文档的MIME类型，这里需要设为"text/css"。
  • href属性：指定被链接文档的URL。

例如，如果我们的CSS文件名为style.css，它在同级目录下，我们需要在HTML文件中导入它，就可以使用以下代码：

<link rel="stylesheet" type="text/css" href="style.css">
属性
rel属性
  • "stylesheet": 定义当前文档与被链接文档是CSS样式表之间的关系。
type属性
  • "text/css": 声明被链接文档的MIME类型为CSS样式表。
href属性
  • URL路径：指定被链接文档的URL路径。
示例

我们以一个例子来演示如何在HTML中导入CSS。我们先创建一个名为index.html的文件，然后添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>导入CSS示例</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hello World</h1>
  <p>This is an example of how to import CSS.</p>
</body>
</html>

在同级目录下创建一个名为style.css的文件，并添加以下代码：

h1 { color: green; }
p { color: blue; }

这里我们定义了h1标签的字体颜色为绿色，p标签的字体颜色为蓝色。然后我们通过标签将CSS文件导入HTML文件中，并应用于h1和p标签。打开index.html文件，就可以看到h1和p标签的字体颜色已经发生了改变。

小结

导入CSS样式表是Web开发中的一个基本操作。我们可以通过标签将CSS文件导入HTML文件中，实现对网页样式的定义和改变。