HTML p Color|极客教程

HTML p Color

在HTML中，可以使用内联样式或者外部样式表来设置段落元素的颜色。这个颜色可以是文字颜色，也可以是背景颜色。通过设置颜色，可以使文本更加生动形象，吸引读者的注意力。

设置文字颜色

1. 使用内联样式设置文字颜色

下面是一个示例代码，演示如何使用内联样式设置元素的文字颜色为红色：

<!DOCTYPE html>
<html>
<head>
    <title>设置文字颜色</title>
</head>
<body>
    <p style="color: red;">how2html.com</p>
</body>
</html>

Output:

HTML p Color

2. 使用外部样式表设置文字颜色

下面是一个示例代码，演示如何使用外部样式表设置元素的文字颜色为蓝色：

<!DOCTYPE html>
<html>
<head>
    <title>设置文字颜色</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>how2html.com</p>
</body>
</html>

Output:

HTML p Color

设置背景颜色

3. 使用内联样式设置背景颜色

下面是一个示例代码，演示如何使用内联样式设置元素的背景颜色为黄色：

<!DOCTYPE html>
<html>
<head>
    <title>设置背景颜色</title>
</head>
<body>
    <p style="background-color: yellow;">how2html.com</p>
</body>
</html>

Output:

HTML p Color

4. 使用外部样式表设置背景颜色

下面是一个示例代码，演示如何使用外部样式表设置元素的背景颜色为绿色：

<!DOCTYPE html>
<html>
<head>
    <title>设置背景颜色</title>
    <style>
        p {
            background-color: green;
        }
    </style>
</head>
<body>
    <p>how2html.com</p>
</body>
</html>

Output:

HTML p Color

设置文字和背景颜色

5. 同时设置文字颜色和背景颜色

下面是一个示例代码，演示如何同时设置元素的文字颜色为白色，背景颜色为黑色：

<!DOCTYPE html>
<html>
<head>
    <title>设置文字和背景颜色</title>
</head>
<body>
    <p style="color: white; background-color: black;">how2html.com</p>
</body>
</html>

Output:

HTML p Color

6. 使用外部样式表同时设置文字颜色和背景颜色

下面是一个示例代码，演示如何使用外部样式表同时设置元素的文字颜色为灰色，背景颜色为红色：

<!DOCTYPE html>
<html>
<head>
    <title>设置文字和背景颜色</title>
    <style>
        p {
            color: gray;
            background-color: red;
        }
    </style>
</head>
<body>
    <p>how2html.com</p>
</body>
</html>