📅 最后修改于: 2023-12-03 14:53:01.737000 🧑 作者: Mango
当开发网页时，我们可以使用 Cascading Style Sheets (CSS) 来为 HTML 页面添加样式和布局。本文将向程序员介绍如何将 CSS 链接到 HTML 页面的不同方法。
内联样式是将 CSS 样式直接添加到 HTML 元素的 style 属性中的一种方式。它是最简单和最直接的方法，例如：
<!DOCTYPE html>
<html>
<head>
<title>内联样式示例</title>
</head>
<body>
<h1 style="color: blue;">我是一个标题</h1>
<p style="font-size: 18px;">我是一个段落。</p>
</body>
</html>
上述示例中，<h1> 标签和 <p> 标签都有一个内联样式，它们直接定义了颜色和字体大小。
内部样式表允许我们将 CSS 样式放置在 HTML 文档的 <head> 部分。我们使用 <style> 标签来定义内部样式表。例如：
<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<style>
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>我是一个标题</h1>
<p>我是一个段落。</p>
</body>
</html>
在上述示例中，我们使用 <style> 标签在 <head> 中定义了 CSS 样式。
外部样式表是最常用的将 CSS 样式链接到 HTML 页面的方法。我们可以将所有的 CSS 样式放置在一个独立的 .css 文件中。然后，通过使用 <link> 标签将该样式表链接到 HTML 文件。例如：
styles.css：
h1 {
color: blue;
}
p {
font-size: 18px;
}
index.html：
<!DOCTYPE html>
<html>
<head>
<title>外部样式表示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>我是一个标题</h1>
<p>我是一个段落。</p>
</body>
</html>
在上述示例中，我们创建了一个名为 styles.css 的外部样式表文件，并使用 <link> 标签将其链接到 HTML 文件。
除了引用外部样式表，我们还可以使用 @import 声明将一个样式表导入到另一个样式表中。这种方式用于将多个样式表组织在一起。例如：
styles1.css：
h1 {
color: blue;
}
styles2.css：
@import url("styles1.css");
p {
font-size: 18px;
}
index.html：
<!DOCTYPE html>
<html>
<head>
<title>导入样式表示例</title>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<h1>我是一个标题</h1>
<p>我是一个段落。</p>
</body>
</html>
在上述示例中，我们创建了两个样式表文件 styles1.css 和 styles2.css，并使用 @import 规则将 styles1.css 导入到 styles2.css 中。
以上就是将 CSS 链接到 HTML 页面的四种常见方法。你可以根据需要选择相应的方法来为你的网页添加样式和布局。希望本文对你有所帮助！