📅 最后修改于: 2023-12-03 15:15:41.824000 🧑 作者: Mango
在 HTML 中添加样式是一种使网站变得更美观和易于使用的方法。通过使用 CSS（层叠样式表），我们可以更改文本、颜色、大小、布局等等。以下是一些可以用于将样式应用于 HTML 的方法。
内联样式是一种将样式直接添加到 HTML 元素中的方法。在标签内使用样式属性，它可以通过style属性来实现。例如，要将文本颜色设置为红色，可以使用以下代码：
<p style="color: red;">这个段落的文本将是红色的。</p>
虽然内联样式易于使用，但不推荐使用它们，因为它们难以维护和重复使用。您应该尽可能使用外部样式表。
在 HTML 文档中使用外部样式表是一种更常用的方法。外部样式表是在一个单独的 .css 文件中定义的样式集。要链接到外部样式表，请使用在<head>元素内添加一个<link>标记，如下所示：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>这个段落将使用外部样式表中的样式。</p>
</body>
</html>
然后，可以在外部样式表中定义样式，如以下示例所示：
p {
color: red;
}
在上面的示例中，我们定义了一个选择器，它匹配所有<p>元素并将文本颜色设置为红色。但是，您可以通过选择器使用更具体的规则来仅将样式应用于页面中特定的元素。
使用内部样式表是在<head>元素内包含<style>标签，将样式添加到 HTML 页面的一种方法。例如
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这个段落将使用内部样式表中的样式。</p>
</body>
</html>
上述代码中，我们在<style>标签中定义了一个样式规则，该规则将文本颜色设置为红色。
在上面的示例中，我们使用了选择器来定义样式，选择器是一种将样式应用于特定元素或元素集的方法。有许多选择器，例如以下示例：
p，它将匹配所有<p>元素。a[href]选择所有带有href属性的链接。.my-class选择所有使用my-class类的元素。CSS 样式可以继承。例如，可以为<body>元素设置字体的大小，并且在该元素中的所有元素都将继承此样式。例如：
body {
font-size: 16px;
}
上述代码中，我们将所有元素的默认字体大小设置为16像素。然后，对于任何在<body>元素内的元素，这个样式都将被继承并应用。
无论使用哪种方法添加样式，都应遵循最佳实践和语义标记。尽可能使用外部样式表，避免内联样式和内部样式表。
以上是一些基本知识，您可以使用 CSS 来创建漂亮的样式。了解基础知识并尝试创建自己的样式表吧！