如何在HTML中改变文本颜色|极客教程

如何在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:

如何在HTML中改变文本颜色

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:

如何在HTML中改变文本颜色

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:

如何在HTML中改变文本颜色

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:

如何在HTML中改变文本颜色

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:

如何在HTML中改变文本颜色

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:

如何在HTML中改变文本颜色

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:

如何在HTML中改变文本颜色

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:

如何在HTML中改变文本颜色

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:

如何在HTML中改变文本颜色

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>