Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

html 颜色

作者:轻狂书生   发布日期:2025-11-17   浏览:47

<!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>

解释说明:

  1. 内联样式:直接在 HTML 标签中使用 style 属性来设置颜色和背景颜色。
  2. 类选择器:通过 CSS 类选择器 .red-bg, .blue-bg, .green-bg 来设置背景颜色,并应用到多个段落元素上。
  3. 十六进制颜色代码:使用六位十六进制数表示颜色,例如 #ff0000 表示红色。
  4. RGB 颜色值:使用 rgb() 函数指定红、绿、蓝三原色的比例来定义颜色,例如 rgb(255, 0, 0) 表示红色。

上一篇:html超链接

下一篇:html学习

大家都在看

静态html源码

404 html

ios打开html

nginx访问不到html

html 符号

colspan在html中是什么意思

xml转html

html时间代码

html2canvas使用

html标题标签是什么

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站