一、像素的概念
-
概念:我们的电脑屏幕是,是由一个一个 “ 小点 ” 组成的,每个 “ 小点 ” ,就是一个像素( px )。
-
规律:像素点越小,呈现的内容就越清晰、越细腻。
![](https://i-blog.csdnimg.cn/direct/f12fb6f1e2284303abeef81027f6e110.png)
注意点:如果电脑设置中开启了缩放,那么就会影响一些工具的测量结果,但这无所谓,因为我们工作中都是参考详细的设计稿,去给元素设置宽高。
二、颜色的表示
1.表示方式一:颜色名
编写方式:直接使用颜色对应的英文单词,编写比较简单,例如:
- 红色:red
- 绿色:green
- 蓝色:blue
- 紫色:purple
- 橙色:orange
- 灰色:gray
- ······
color: red;/* 红色 */ color: orange;/* 橙色 */ color: yellow;/* 黄色 */ color: green;/* 绿色 */ color: cyan;/* 青色 */ color: blue;/* 蓝色 */ color: purple;/* 紫色 */ color: black;/* 黑色 */ color: white;/* 白色 */ color: grey;/* 灰色 */
颜色名这种方式,表达的颜色比较单一,所以用的并不多。
2.表示方式二:rgb 或 rgba
编写方式:使用
红、黄、蓝
这三种光的三原色进行组合。
- r 表示 红色
-
g 表示 绿色
-
b 表示 蓝色
-
a 表示 透明度
举例:
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
也可以使用百分比表示一种颜色
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
小规律:
- 若三种颜色值相同,呈现的是灰色,值越大,灰色越浅。
-
rgb(0, 0, 0) 是黑色, rgb(255, 255,255) 是白色。
-
对于 rbga 来说,前三位的 rgb 形式要保持一致,要么都是 0~255 的数字,要么都是 百分比 。
3.表示方式三:HEX 或 HEXA
HEX 的原理同与 rgb 一样,依然是通过:红、绿、蓝色 进行组合,只不过要用 6位(分成3组)来 表达,格式为:# rrggbb
每一位数字的取值范围是: 0 ~ f ,即:( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f )
所以每一种光的最小值是: 00 ,最大值是: ff
color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的,就可以简写*/
color: #ff9988;/* 可简为:#f98 */
/* 但要注意前三位简写了,那么透明度就也要简写 */
color: #ff998866;/* 可简为:#f986 */
(注意点: IE 浏览器不支持 HEXA ,但支持 HEX 。 )
4.表示方式四:HSL 或 HSLA
HSL 是通过:色相、饱和度、亮度,来表示一个颜色的,格式为: hsl(色相,饱和度,亮度)
-
色相:取值范围是 0~360 度,具体度数对应的颜色如下图:
-
饱和度:取值范围是 0%~100% 。(向色相中对应颜色中添加灰色, 0% 全灰, 100% 没有灰)
- 亮度:取值范围是 0%~100% 。( 0% 亮度没了,所以就是黑色。 100% 亮度太强,所以就是白色了)
color:hsl(0, 100%, 50%);/* 红色 */
color:hsl(60, 100%, 50%);/* 黄色 */
color:hsl(120, 100%, 50%);/* 绿色 */
color:hsl(180, 100%, 50%);/* 青色 */
color:hsl(240, 100%, 50%);/* 蓝色 */
color:hsl(300, 100%, 50%);/* 紫色 */
color:hsl(0, 0%, 0%);/* 黑色 */
color:hsl(0, 0%, 100%);/* 白色 */
color:hsl(0, 0%, 50%);/* 灰色 */
HSLA 其实就是在 HSL 的基础上,添加了透明度。