零基础CSS入门教程(15)——颜色值

简介: 我们可以通过RGB,R代表红色,G代表绿色,B代表蓝色,来确定颜色值。实际上,在光学中,红、绿、蓝三种颜色被称为三原色,也就是说这三种光学颜色混合后,可以产生各种各样的颜色。基于三原色的原理,我们也可以通过设置红、绿、蓝颜色的比例,来确定一个特定的颜色。我们学会了颜色值,我们就可以自己去定义自己喜欢的颜色,使我们的页面五彩缤纷。世界是五彩缤纷的,不论是皑皑的白雪、还是飘落的秋叶,世界因色彩而绚丽。之前我们已经学习过设置文本的颜色,设置背景色,以及设置边框的颜色。同样,网页也因为合理搭配色彩,而美观。

本章目录

1.任务目标

世界是五彩缤纷的,不论是皑皑的白雪、还是飘落的秋叶,世界因色彩而绚丽。

同样,网页也因为合理搭配色彩,而美观。

之前我们已经学习过设置文本的颜色,设置背景色,以及设置边框的颜色。

颜色的取值都是:red、blue、green等代表颜色的单词。

2. 三原色

实际上,在光学中,红、绿、蓝三种颜色被称为三原色,也就是说这三种光学颜色混合后,可以产生各种各样的颜色。

基于三原色的原理,我们也可以通过设置红、绿、蓝颜色的比例,来确定一个特定的颜色。

3.RGB颜色值

我们可以通过RGB,R代表红色,G代表绿色,B代表蓝色,来确定颜色值。每种颜色取值范围是0-255,0就表示这种颜色没啥影响力,而255表示把这种颜色用到最大力量了。

4.代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test {
        background-color: rgb(108, 168, 148);
        color: rgb(190, 129, 54);
        }
    </style>
</head>
<body>
    <div class="test">
        <p>颜色值</p>
    </div>
</body>
</html>

效果如下

5.小结

我们学会了颜色值,我们就可以自己去定义自己喜欢的颜色,使我们的页面五彩缤纷。

相关文章
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
217 4
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
323 1
|
前端开发
CSS中颜色的定义
CSS中颜色的定义
186 0
|
11月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
12月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
434 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
前端开发
css 渐变效果,这颜色 666 !
css 渐变效果,这颜色 666 !
|
前端开发 开发者
CSS颜色表示:探索预定义名称、RGB、HEX、HSL、RGBA和HSLA
CSS颜色表示:探索预定义名称、RGB、HEX、HSL、RGBA和HSLA
273 6
|
前端开发 安全
CSS基础常用属性之颜色(如果想知道CSS的颜色知识点,那么只看这一篇就足够了!)
CSS基础常用属性之颜色(如果想知道CSS的颜色知识点,那么只看这一篇就足够了!)
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
315 6
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
122 1