📅 最后修改于: 2023-12-03 15:23:09.562000 🧑 作者: Mango
CSS （Cascading Style Sheets）是用来定义 HTML 页面中的样式的语言。通过 CSS，您可以定义元素的大小、颜色、边距、背景图片，以及其他更多的样式效果。在本篇文章中，我们将会介绍如何在 HTML 页面中编写 CSS 样式。
可以直接在 HTML 元素内部使用 style 属性来设置元素的样式。例如，以下代码将会将段落的字体颜色设为红色：
<p style="color: red;">这是一个红色的段落</p>
该方式虽然简单，但是不易维护，因此不建议使用。
可以在 HTML 页面的 <head> 标签内部使用 <style> 标签来定义样式表。以下是一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
上面的例子将会使 <h1> 元素的字体设为蓝色，将会使 <p> 元素的字体设为绿色。
可以将样式表单独存放到一个文件中，然后在 HTML 页面中使用 <link> 标签将其引入。以下是一个例子：
在样式表文件 styles.css 中：
h1 {
color: blue;
}
p {
color: green;
}
在 HTML 页面中：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
上面的例子中，<link> 标签将会引入 styles.css 文件，并使其应用于 HTML 页面中的所有元素。
以上就是在 HTML 页面中编写 CSS 样式的几种方法。在实际应用中，一般使用外部样式表，这样可以实现页面样式和内容的分离，使得页面结构更加清晰易懂。