<!DOCTYPE html>
<html>
<head>
<title>HTML 颜色示例</title>
<style>
/* 使用内联样式设置背景颜色 */
.red-bg { background-color: red; color: white; }
.blue-bg { background-color: blue; color: white; }
.green-bg { background-color: green; color: white; }
</style>
</head>
<body>
<h1>HTML 颜色示例</h1>
<p class="red-bg">这段文字的背景颜色是红色。</p>
<p class="blue-bg">这段文字的背景颜色是蓝色。</p>
<p class="green-bg">这段文字的背景颜色是绿色。</p>
<h2>使用内联样式设置文本颜色</h2>
<p style="color: red;">这段文字的颜色是红色。</p>
<p style="color: blue;">这段文字的颜色是蓝色。</p>
<p style="color: green;">这段文字的颜色是绿色。</p>
<h2>使用十六进制颜色代码</h2>
<p style="background-color: #ff0000; color: white;">这段文字的背景颜色是红色 (#ff0000)。</p>
<p style="background-color: #0000ff; color: white;">这段文字的背景颜色是蓝色 (#0000ff)。</p>
<p style="background-color: #008000; color: white;">这段文字的背景颜色是绿色 (#008000)。</p>
<h2>使用 RGB 颜色值</h2>
<p style="background-color: rgb(255, 0, 0); color: white;">这段文字的背景颜色是红色 (RGB 255, 0, 0)。</p>
<p style="background-color: rgb(0, 0, 255); color: white;">这段文字的背景颜色是蓝色 (RGB 0, 0, 255)。</p>
<p style="background-color: rgb(0, 128, 0); color: white;">这段文字的背景颜色是绿色 (RGB 0, 128, 0)。</p>
</body>
</html>
style 属性来设置颜色和背景颜色。.red-bg, .blue-bg, .green-bg 来设置背景颜色,并应用到多个段落元素上。#ff0000 表示红色。rgb() 函数指定红、绿、蓝三原色的比例来定义颜色,例如 rgb(255, 0, 0) 表示红色。上一篇:html超链接
下一篇:html学习
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站