HTML p Color
参考:html p color
在HTML中,可以使用内联样式或者外部样式表来设置<p>
段落元素的颜色。这个颜色可以是文字颜色,也可以是背景颜色。通过设置颜色,可以使文本更加生动形象,吸引读者的注意力。
设置文字颜色
1. 使用内联样式设置文字颜色
下面是一个示例代码,演示如何使用内联样式设置<p>
元素的文字颜色为红色:
<!DOCTYPE html>
<html>
<head>
<title>设置文字颜色</title>
</head>
<body>
<p style="color: red;">how2html.com</p>
</body>
</html>
Output:
2. 使用外部样式表设置文字颜色
下面是一个示例代码,演示如何使用外部样式表设置<p>
元素的文字颜色为蓝色:
<!DOCTYPE html>
<html>
<head>
<title>设置文字颜色</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>how2html.com</p>
</body>
</html>
Output:
设置背景颜色
3. 使用内联样式设置背景颜色
下面是一个示例代码,演示如何使用内联样式设置<p>
元素的背景颜色为黄色:
<!DOCTYPE html>
<html>
<head>
<title>设置背景颜色</title>
</head>
<body>
<p style="background-color: yellow;">how2html.com</p>
</body>
</html>
Output:
4. 使用外部样式表设置背景颜色
下面是一个示例代码,演示如何使用外部样式表设置<p>
元素的背景颜色为绿色:
<!DOCTYPE html>
<html>
<head>
<title>设置背景颜色</title>
<style>
p {
background-color: green;
}
</style>
</head>
<body>
<p>how2html.com</p>
</body>
</html>
Output:
设置文字和背景颜色
5. 同时设置文字颜色和背景颜色
下面是一个示例代码,演示如何同时设置<p>
元素的文字颜色为白色,背景颜色为黑色:
<!DOCTYPE html>
<html>
<head>
<title>设置文字和背景颜色</title>
</head>
<body>
<p style="color: white; background-color: black;">how2html.com</p>
</body>
</html>
Output:
6. 使用外部样式表同时设置文字颜色和背景颜色
下面是一个示例代码,演示如何使用外部样式表同时设置<p>
元素的文字颜色为灰色,背景颜色为红色:
<!DOCTYPE html>
<html>
<head>
<title>设置文字和背景颜色</title>
<style>
p {
color: gray;
background-color: red;
}
</style>
</head>
<body>
<p>how2html.com</p>
</body>
</html>
Output:
通过以上示例代码,可以看到如何在HTML中设置<p>
元素的文字颜色和背景颜色,通过这些方式,可以实现更加多样化的页面设计效果。