📅 最后修改于: 2023-12-03 14:58:13.825000 🧑 作者: Mango
CSS（层叠样式表）是一种用于为 HTML 文档添加样式和布局的语言。在 HTML 中，您可以通过不同的元素定义文档内容的结构，而使用 CSS 可以给元素添加颜色、大小、位置等效果来改变表示形式。
链接到 CSS 的方法有两种，一种是内部链接（在 HTML 文件中直接嵌入 CSS 代码），另一种是外部链接（使用link元素将 HTML 文档与外部 CSS 文件链接起来）。
内部链接是将 CSS 代码直接放入 HTML 文件中的方式。在 HTML 文档的 head 部分，使用 style 元素包含 CSS 代码，如下所示：
<head>
<style>
/* CSS 代码 */
</style>
</head>
可以在 style 元素中添加任意数量的 CSS 代码块，每个代码块都以<style>和</style>包含。
外部链接通过使用 link 元素将 HTML 文档与外部CSS 文件链接起来。在 head 部分中，添加类似于以下内容的 link 元素：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
其中 rel="stylesheet" 是告诉浏览器链接的文件是一个样式表文件，type="text/css" 告诉浏览器文件类型是 CSS，href="style.css" 是样式表文件相对于 HTML 文件的路径。可以通过相对或绝对路径访问 CSS 文件。例如：
href="css/style.css"href="https://example.com/css/style.css"以下是将 HTML 和 CSS 代码链接的完整示例：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS 代码：
h1 {
color: red;
}
p {
font-size: 20px;
}
效果：点击查看效果。
以上就是链接到 CSS HTML 的两种方式。通过将 HTML 文档与 CSS 文件链接起来，您可以轻松地为您的网页添加样式和布局。