如何将 css 文件链接到 html

📌 相关文章

📜 如何将 css 文件链接到 html - CSS (1)

📅 最后修改于: 2023-12-03 14:53:01.709000 🧑 作者: Mango

HTML 和 CSS 是构建网页的两个基本组成部分。在大多数情况下，HTML 用来添加结构和内容，而 CSS 用来添加样式和布局。在本文中，我们将学习如何将 CSS 文件链接到 HTML 文件中，以便我们可以应用样式和布局到我们的网页中。

使用 link 标签链接 CSS 文件

在 HTML 中，我们可以使用 link 标签来链接外部的 CSS 文件。这个标签有以下几个属性：

href：指向 CSS 文件的路径
rel：指定链接的文件与当前文档之间的关系，这里应该设置为 "stylesheet"
type：指定链接的文件类型，这里应该设置为 "text/css"

下面是一个例子，将一个名为 "styles.css" 的 CSS 文件链接到 HTML 文档中：

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<h1>Welcome to my website</h1>
	<p>This is a paragraph of text.</p>
</body>
</html>

在 HTML 中嵌入 CSS 样式

除了使用外部 CSS 文件链接样式，我们还可以在 HTML 文件的头部使用 <style> 标签嵌入样式。

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
	<style type="text/css">
		h1 {
			color: red;
			font-family: Arial, sans-serif;
		}

		p {
			font-size: 16px;
		}
	</style>
</head>
<body>
	<h1>Welcome to my website</h1>
	<p>This is a paragraph of text.</p>
</body>
</html>

结论

在本文中，我们学习了如何将 CSS 文件链接到 HTML 文档中，以及如何在 HTML 文件中嵌入 CSS 样式。这些方法为我们提供了灵活的方式来实现网页设计并将样式应用到我们的 HTML 内容中。