鱼C论坛

 找回密码
 立即注册
查看: 7291|回复: 15

[学习笔记] 041 - 翩若惊鸿 宛若游龙

[复制链接]
发表于 2020-3-14 10:18:17 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2020-3-17 09:23 编辑






哈哈,废话不多说了,#敲黑板时刻!





在线视频:传送门





课程思维导图

Snip20200314_60.png

猛戳

                               
登录/注册后可看大图
超清





起这么有诗意的名字,小甲鱼老师肯定会讲一些带“颜色”的知识。

没错,就是 color 属性,很常用,常用到几乎每个用到 CSS3 的人,都会用到。

在速查宝典已经准备好了,3 个很耐撕的颜色选取工具(传送门):
Snip20200316_78.png


很好用哦,选中即可获得色号。

颜色是什么不重要,取决于设计者的品味,但是如何设置很重要。

color 属性包括 5 种不同的值:

游客,如果您要查看本帖隐藏内容请回复

最常用的是前两种:RGH 和 HEX 。

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是 0(十六进制:#00)。

最大值是 255(十六进制:#FF)。

三种颜色 红,绿,蓝的组合从 0 到 255,一共有 1600 万种不同颜色( 256 x 256 x 256 )。

从上面传送门的颜色表中会看到不同的结果,从 0 到 255 的红色。

同时设置绿色和蓝色的值为 0,随着红色的值变化,不同的值都显示了不同的颜色。

HEX 是十六进制颜色表示法,很通用。

HSL 模式基于一个 360 色相环。

第一个数字代表色相(色相环角度),60 度时为黄色,120 度绿色,180 度青色,240 度蓝色,300 度洋红色,360 度红色。

第二个数数字代表饱和度,值为百分比。

第三个数字是亮度,值为百分比。

代码:
hsl(255,90%,50%)
不是很常用,鱼油知道即可。

最后两个分别是 RGB 和 HSL 的变式,最后一位融入了 透明度。

和 CSS 中的 Opacity 属性一样。




课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 淘专辑传送门)(不喜欢更要订阅

评分

参与人数 2荣誉 +7 鱼币 +8 贡献 +6 收起 理由
liuzhengyuan + 2 + 3 + 3 有收获
LuckyTiger66 + 5 + 5 + 3 无条件支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-14 14:00:45 From FishC Mobile | 显示全部楼层
沙发
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-25 15:23:15 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-11-10 11:27:47 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-1-15 23:35:59 | 显示全部楼层
回复快快快
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-20 19:34:50 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-3-5 18:30:03 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-7-9 14:41:41 | 显示全部楼层
记住是5种哦!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-8-3 17:07:15 | 显示全部楼层
kanyikanxueyixue
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-9-11 22:27:32 | 显示全部楼层
RGB HEX HSL RGBA HSLA
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-10-25 15:36:42 | 显示全部楼层
233
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-1-22 09:55:14 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-1-22 10:45:50 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-10-26 19:25:31 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2024-4-17 16:19:15 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2024-11-23 16:30:30 | 显示全部楼层
学习了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 02:35

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表