📅 最后修改于: 2023-12-03 15:24:11.326000 🧑 作者: Mango
在 HTML 中，可以使用标签来引用 CSS 文件，这样可以使 HTML 页面的样式得到更好的控制和美化。
在 HTML 文件中使用内部样式表，可以在 head 标签中添加一个 style 标签，然后在其中添加 CSS 样式规则。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<style>
body {
background-color: #ccc;
}
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
使用外部样式表可以使多个 HTML 页面共用同一份样式文件，提高效率。要使用外部样式表，需要在 head 标签中添加一个 link 标签，其中 href 属性指向 CSS 文件的路径，rel 属性指定为 stylesheet。
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
styles.css 文件内容：
body {
background-color: #ccc;
}
h1 {
color: red;
text-align: center;
}
使用嵌入式样式表与使用内部样式表类似，不过是将样式规则放在 HTML 标签的 style 属性中。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body>
<h1 style="color:red;text-align:center;">This is a heading</h1>
<p style="font-size:20px;">This is a large paragraph.</p>
</body>
</html>
注意：虽然嵌入式样式表在某些情况下可能会很方便，但不建议在整个 Web 应用程序中使用。最好还是使用外部样式表以提高效率。
参考资料：