极客教程如何在HTML中改变文本颜色
参考：how to change text color in html
在HTML中，我们可以使用CSS样式来改变文本的颜色。通过设置color属性，我们可以轻松地改变文本的颜色。接下来，我们将介绍如何在HTML中改变文本的颜色。
1. 在内联样式中改变文本颜色
我们可以在HTML元素中使用style属性来应用内联样式，并在其中设置color属性来改变文本颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
</head>
<body>
<h1 style="color: red;">How2HTML</h1>
<p style="color: blue;">Learn HTML at how2html.com</p>
</body>
</html>
Output:
2. 在内部样式表中改变文本颜色
我们也可以在<style>标签内定义样式并应用到HTML元素上，以改变文本的颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<style>
h1 {
color: green;
}
p {
color: purple;
}
</style>
</head>
<body>
<h1>How2HTML</h1>
<p>Learn HTML at how2html.com</p>
</body>
</html>
Output:
3. 使用外部样式表改变文本颜色
最好的做法是将样式定义在外部CSS文件中，然后通过<link>标签引入到HTML文件中。
示例代码如下：
<!-- styles.css -->
h1 {
color: orange;
}
p {
color: pink;
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>How2HTML</h1>
<p>Learn HTML at how2html.com</p>
</body>
</html>
Output:
4. 使用id选择器改变文本颜色
我们可以为HTML元素指定一个唯一的id，并使用id选择器来改变该元素的文本颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<style>
#title {
color: navy;
}
#content {
color: teal;
}
</style>
</head>
<body>
<h1 id="title">How2HTML</h1>
<p id="content">Learn HTML at how2html.com</p>
</body>
</html>
Output:
5. 使用class选择器改变文本颜色
除了id选择器，我们还可以使用class选择器来改变多个元素的文本颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<style>
.heading {
color: brown;
}
.paragraph {
color: grey;
}
</style>
</head>
<body>
<h1 class="heading">How2HTML</h1>
<p class="paragraph">Learn HTML at how2html.com</p>
</body>
</html>
Output:
6. 使用伪类改变文本颜色
我们还可以使用伪类选择器来改变文本的颜色，在不同的状态下应用不同的颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<style>
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: purple;
}
</style>
</head>
<body>
<a href="#">How2HTML</a>
</body>
</html>
Output:
7. 使用RGB颜色值改变文本颜色
除了使用颜色名字外，我们还可以使用RGB颜色值来改变文本的颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<style>
h1 {
color: rgb(255, 0, 0); /* 红色 */
}
p {
color: rgb(0, 255, 0); /* 绿色 */
}
</style>
</head>
<body>
<h1>How2HTML</h1>
<p>Learn HTML at how2html.com</p>
</body>
</html>
Output:
8. 使用HEX颜色值改变文本颜色
另一种常见的方式是使用HEX颜色值来改变文本的颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<style>
h1 {
color: #ff0000; /* 红色 */
}
p {
color: #00ff00; /* 绿色 */
}
</style>
</head>
<body>
<h1>How2HTML</h1>
<p>Learn HTML at how2html.com</p>
</body>
</html>
Output:
9. 使用HSL颜色值改变文本颜色
除了RGB和HEX，我们还可以使用HSL颜色值来改变文本的颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<style>
h1 {
color: hsl(0, 100%, 50%); /* 红色 */
}
p {
color: hsl(120, 100%, 50%); /* 绿色 */
}
</style>
</head>
<body>
<h1>How2HTML</h1>
<p>Learn HTML at how2html.com</p>
</body>
</html>
Output:
10. 使用关键字颜色值改变文本颜色
最后一种方式是使用颜色关键字值来改变文本的颜色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
<style>
h1 {
color: inherit;
}
p {
color: initial;
}
</style>
</head>
<body>
<h1>How2HTML</h1>
<p>Learn HTML at how2html.com</p>
</body>
</html>
Output:
通过以上示例代码，我们详细介绍了如何在HTML中改变文本的颜色。无论是内联样式、内部样式表还是外部样式表，通过简单地设置color属性，我们可以轻松地改变文本的颜色。