CSS三大特性

1.三大特性

1.1层叠性

• 概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

  什么是样式冲突?————元素的同一个样式名，被设置了不同的值，这就是冲突。

1.2继承性

• 概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

• 规则：优先继承离得近的。

• 常见的可继承熟悉：

  text-??，font-??，line-??，color…

• 备注：参照MDN网站，可查询属性是否可被继承。

1.3优先级

• 简单聊：!important > 行内选择器 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。

• 详细聊：需要计算权重。

  计算权重时需要注意：并集选择器的每一个部分都是分开算的

2.颜色的表示

2.1表示方式一：颜色名

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

  1. 红色：red

  2. 绿色：green

  3. 绿色：blue

  4. 紫色：purple

  5. 橙色：orange

  6. 灰色：gray

     …

  1. 颜色名这种方式，表达的颜色比较单一，所以用的不多。

  2. 具体颜色名参考MDN官方文档：

     https://developer.mozilla.org/zh-CN/docs/Web/CSS/named-color

2.2表示方式二：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: 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. 对于rgba来说，前三位的rgb形式要保持一致，要么都是0~255的数字，要么都是百分比。

2.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。

2.4表示方式四：HSL或HSLA

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

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

    

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

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

• HSLA其实就说在HSLA的基础上，添加了透明度。