CSS—继承、选择器权重、像素、百分比、em、RGB、HSL

继承

父元素→子元素

• 样式的继承，父元素的样式设置会应用到子元素（如：color ，font-size等详情见CSS文档）
• 并不是所有样式都会继承（如：background-color等，详情见CSS文档）
  其中 background-color 不会被继承的原因：默认背景颜色为透明色，所以当父类设置颜色时，子类会显示父类的背景颜色，但是！！！ 没有被继承
  
  

选择器的权重（接上篇）

样式的冲突： 当我们面对不同选择器，选择相同的元素，并且为相同的样式设置了不同的值时，就会发生冲突。如下：

应用样式由选择器的权重决定：👇（逐级降低）
！important：优先级最高（慎用，不建议使用）
内联样式（行内样式）：1，0，0，0
id选择器：0，1，0，0
类和伪类选择器：0，0，1，0
元素选择器：0，0，0，1
通配选择器：0，0，0，0
继承的样式：没有优先级
比较优先级：将所有的选择器优先级相加，最后显示最高优先级的样式。
当优先级相同时，浏览器显示最后一个选择器设置的样式。
选择器的累加不会超过上一级的选择器（n个类选择器的优先级依旧低于1个id选择器的优先级）

像素 （px）

• 屏幕实际上是由一个一个像素块组成的。
• 不同屏幕的像素大小是不一样的，像素越小的屏幕显示的效果越清晰。
• 在同样的 200px 在不同的设备下显示效果不一样。

百分比

• 可以将属性值设置为其父元素属性值的百分比
• 设置百分比可以使子元素跟随父元素的改变而改变
  

em 和 rem

em：

• em是相对元素的字体大小来计算的。（1 em = 1 font-size）
• em会根据字体大小的改变而改变。
  
  rem
• rem是根据 根元素(html) 的大小来计算的。
  

RGB值 和 RGBA值

RGB

• RGB通过三种颜色的不同浓度来调配出不同的颜色。
• R：red；G：green；B：bule；
• 每种颜色的范围在 0 ~ 255 （0% ~ 100%）之间。
• 语法：RGB（红色，绿色，蓝色）。
  RGB(0,0,0) 为黑色 　RGB(255,255,2555)为白色
  RGBA
• 在RGB的基础上添加了一个透明度（A）。
• A表示不透明度。
• A = 1：不透明，Ａ＝０.５：半透明，Ａ＝０：完全透明。

十六进制的RGB值

• 语法：　＃红色绿色蓝色
• 颜色浓度通过　00-FF
• 如果颜色两两重复可缩写：＃00FFAA →＃0FA
  

HSL值 和 HSLA值

• H 色相 （0 ~ 360）
• S 饱和度 （0% ~ 100%）
• L 亮度（0% ~ 100%）
• A 透明值