CSS常用属性（像素的概念、颜色的表示）

一、像素的概念

• 概念：我们的电脑屏幕是，是由一个一个 “ 小点 ” 组成的，每个 “ 小点 ” ，就是一个像素（ px ）。
• 规律：像素点越小，呈现的内容就越清晰、越细腻。

注意点：如果电脑设置中开启了缩放，那么就会影响一些工具的测量结果，但这无所谓，因为我们工作中都是参考详细的设计稿，去给元素设置宽高。

二、颜色的表示

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%);/* 半透明的红色 */

小规律：

1. 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
2. rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。
3. 对于 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 的基础上，添加了透明度。