📅 最后修改于: 2023-12-03 15:30:04.120000 🧑 作者: Mango
在 HTML 中，我们可以使用样式表或内联样式来改变元素的颜色。
内联样式是直接应用于元素的样式，而不是在样式表中定义后应用于元素。要使用内联样式更改元素的颜色，可以使用 style 属性。
<p style="color: red;">这是一段用内联样式改变颜色的文本</p>
通过使用样式表，我们可以在文档中定义样式并在多个元素中重复使用。要更改元素的颜色，请在样式表中定义一个选择器并为该选择器设置颜色属性。
<!DOCTYPE html>
<html>
<head>
<title>样式表示例</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>这是一段使用样式表改变颜色的文本</p>
</body>
</html>
CSS 变量是一种更灵活和动态的方法来更改颜色。要在 HTML 中使用 CSS 变量，必须在样式表中定义变量并在元素样式中使用 var() 函数。
<!DOCTYPE html>
<html>
<head>
<title>CSS 变量示例</title>
<style>
:root {
--my-color: blue;
}
p {
color: var(--my-color);
}
</style>
</head>
<body>
<p>这是一段使用 CSS 变量改变颜色的文本</p>
</body>
</html>
以上是在 HTML 中改变元素颜色的三种方法。你可以选择适合你的方法来改变你的 HTML 元素颜色。