CSS 像素与颜色

像素：屏幕是由一个一个的小点组成，一个小点就是一像素，也称1PX

注意：屏幕的画质不通，一像素的大小也不同（例如：2k的屏幕1px肉眼很难看到，但是普通屏幕的1px就看的比较清楚）

颜色：
表示方式一：颜色名

• 编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：

1. 红色：red
2. 绿色：green
3. 蓝色：blue
4. 紫色：purple
5. 橙色：orange
6. 灰色：gray
   ......

1. 颜色名这种方式，表达的颜色比较单一，所以用的并不多。
2. 具体颜色名参考MDN官方文档：
   <named-color> - CSS: Cascading Style Sheets | MDN

表示方式二：rgb或rgba

编写方式：使用红、黄、蓝这三种光的三原色进行组合。

• r表示红色
• g表示绿色
• b表示蓝色
• a表示透明度

举例：

/* 使用 0～255 之间的数字表示一种颜色 */

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: rab(138,43,226); /* 紫罗兰色 */

color: raba(255,,0,0,0.5); /* 半透明红色 */

/ * 也可以使用百分比表示一种颜色（用的少） * /
color: rgb(100%,0%,0%); /* 红色 */

color: rgba(100%,0%,0%,50%); /* 半透明红色 */

小规律：

1. 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
2. rgb(0,0,0)是黑色，rgb(255,255,255) 是白色
3. 对于rgba来说，前三位的rgb形式要保持一致，要么都是0～255的数字，要么都是百分比。

表达方式三： HEX或HEXA

HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色进行组合，只不过要用6个数字，分成三组来表达。

格式为：#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; /* 可简写为：#98 */

/* 但要注意前三位简写了，那么透明度也要简写 */

color: #ff998866; /*可简写为：#f986*/

注意点：IE浏览器不支持HEXA，但支持HEX。

表达方式三：HSL或HSLA

HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl（色相，饱和度，亮度）

        色相：取值范围是0～360度，具体度数对应的颜色如下图：

        饱和度：取值范围是0%～100%。（向色相中对应颜色中添加灰色，0%全灰色，100%没有灰）

        亮度：取值范围是0%～100%。（0%亮度没了，所以就是黑色。100%亮度太强，所以就是白色了）

HSLA 其实就是在HSL的基础上，添加了透明度