📅 最后修改于: 2023-12-03 14:53:53.751000 🧑 作者: Mango
当你想要改变网页的外观和布局时，就要使用 CSS。为了将样式应用到 HTML 文档中，需要将 CSS 样式表连接到 HTML 文档中。以下是如何实现的步骤：
要连接到 HTML 文档中，先创建一个 CSS 样式表。CSS 样式表可以包含页面的所有样式。样式表可以包含在 HTML 文件中，也可以单独作为文件。
以下是一个简单样式表，可以样式化 HTML 文档：
/* 样式化段落文本颜色 */
p {
color: blue;
}
/* 样式化 h1 元素的字体 */
h1 {
font-family: 'Arial', sans-serif;
}
将样式表保存为 .css 文件。这是一个独立文件，它仅包含样式和布局规则。如果将 CSS 代码与 HTML 代码混合在一起，难以维护和调试。
假设我们将 CSS 样式表保存为 “style.css” 文件。
将样式表链接到 HTML 文档十分容易。只需要在 HTML 文档的头部引入样式表。
以下是一个 HTML 文档链接到样式表的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
在 <head> 标记中，使用 <link> 元素来链接到样式表。href 属性指向样式表的位置，rel 属性指定链接的类型为样式表。
将样式表链接到 HTML 文档是使用 CSS 样式和布局的第一步。只需要创建样式表文件，将其保存为 CSS 文件，并在 HTML 文件中使用 <link> 标签即可。现在，您可以为页面添加样式和布局了。