0

0

css中颜色有几种表达方式

青灯夜游

青灯夜游

发布时间:2021-01-05 17:16:43

|

15139人浏览过

|

来源于php中文网

原创

css中颜色有6种表达方式,分别为:1、英文单词,例red,blue;2、十六进制值,例“#FF0000”;3、RGB,例“RGB(255,0,0)”;4、RGBA,例“RGB(255,0,0,0.5)”;5、HSL;6、HSLA。

css中颜色有几种表达方式

本教程操作环境:Windows7系统、css3版本、Dell G3电脑。

教程推荐:css视频教程

css中颜色的几种表达方式

1、网页中的预定义色,使用英文单词进行颜色的表示;比如red,blue等

立即学习前端免费学习笔记(深入)”;

2、十六进制值

三位的十六进制;比如#F00(每个颜色由一个十六进制来表示)

六位的十六进制;比如#FF0000(每个颜色由两个十六进制来表示)

3、RGB表达法

RGB三原色:RGB(255,0,0)这给定的三个参数表示红,绿,蓝的颜色值,由0到225的十进制表示

RGB,RGB(100%,0%,0%),使用百分号表示

注:以上几种表达方式都是属于RGB色系(红,绿,蓝)

4、RGBA:和RGB一样,只是多了一个透明度,比如RGB(255,0,0,0.5)。第四个值取值范围为0-1,0是完全透明,1是完全不透明

5、HSL(学习后期调色的使用比较多):色相、饱和度、亮度。比如HSL(360,100%,50%)。

色相:是色彩的基本属性,就是平常所说的颜色名称,比如红色等

饱和度:是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0-100%的数值

亮度:就是色彩的明亮程度,色彩的明度越高,色彩越亮;色彩的明度越暗,色彩越暗,取0-100%。

(当要页面要使用一个色系时,可使用HSL)

6、HSLA:比HSL多了个透明度。

使用方法:

①color:blue; 

第一种,调用颜色属性,将颜色的英文输入在冒号后,以分号结束。

这种方法直接了当,但是能表示的颜色的种类很少。

微信 WeLM
微信 WeLM

WeLM不是一个直接的对话机器人,而是一个补全用户输入信息的生成模型。

下载

②color:#000000; 

第二种,‘#’号开头,每位数字可为:0、1、2、3、4、5、6、7、8、

9、a、b、c、d、e、f。前1,2位表示红色,3,4位表示绿色,5,6

位表示蓝色。与RGB颜色表示法的思路类似,用红绿蓝三原色组合为

各种颜色,种类繁多。

③color:rgb(0,0,0);

第三种,RGB表示法。有两种值:数值,所有值都是0—255;百分值

,所有值为0%—100%。他们的共同特点是第一个值表示红色,第二个

值表示绿色,第三个值表示蓝色。通过组合,能够表示各种颜色。

④color:rgba(0,0,0,0.5);

第四种,RGBA表示法。它是RGB表示法的升级版,新添了透明属性。

前三个属性值和RGB表示法相同,第四个属性值的值域为0——1可

以精确到小数点后两位。

⑤color:hsl(0,100%,100%);

第五种,HSL表示法。它的含义:H表示色调,该值的值域为0——

360,0和360表示红色,120表示绿色,240表示蓝色。S表示饱和度

,值域为0%——100%。L表示亮度,值域为0%——100%。

⑥color:hsla(0,100%,100%,0.5);

第六种,HSLA表示法。是HSL表示法的加强版,增加了透明度的属性

值,值域为0—1。

更多编程相关知识,请访问:编程教学!!

相关专题

更多
Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

公务员递补名单公布时间 公务员递补要求
公务员递补名单公布时间 公务员递补要求

公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

44

2026.01.15

公务员调剂条件 2026调剂公告时间
公务员调剂条件 2026调剂公告时间

(一)符合拟调剂职位所要求的资格条件。 (二)公共科目笔试成绩同时达到拟调剂职位和原报考职位的合格分数线,且考试类别相同。 拟调剂职位设置了专业科目笔试条件的,专业科目笔试成绩还须同时达到合格分数线,且考试类别相同。 (三)未进入原报考职位面试人员名单。

55

2026.01.15

国考成绩查询入口 国考分数公布时间2026
国考成绩查询入口 国考分数公布时间2026

笔试成绩查询入口已开通,考生可登录国家公务员局中央机关及其直属机构2026年度考试录用公务员专题网站http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/examResult/written_result.html,查询笔试成绩和合格分数线,点击“笔试成绩查询”按钮,凭借身份证及准考证进行查询。

11

2026.01.15

Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

65

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

36

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

75

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

35

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 19万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号