Unit One: html&css(03)—CSS(2)

1.继承

我们为一个样式设置的样式会应用到它的后代元素上。

继承发送在祖先后代元素上。

• 好处
  • 方便开发。通用的样式设置到所有元素。
• 注意：
  • 并不是所有样式都会被继承。
    • 背景相关
    • 布局相关

2.选择器权重

• 样式冲突
  • 当不同选择器选中相同的元素，并且为相同的样式设置不同的值时，此时发生了样式冲突。
• 样式冲突解决
  1. 选择器优先级决定（由高到低）：
     1. 内联样式 1000
     2. id选择器 100
     3. Class类和伪类选择器 10
     4. 元素选择器 1
     5. 通配选择器（*） 0
     6. 继承样式 无优先级。
  2. 比较优先级时：需要将所有选择器的优先级值相加，优先级越高，越先展示。
     • 分组选择器单独计算。
     • 不能跨维度。
  3. 如果优先级相等下，展示下方样式。
  4. !important可以获取最高优先级，在开发中一定慎用！

3.像素和百分比

• 长度单位

  • 像素（px）
    • 屏幕有小正方形构成。
    • 不同屏幕的像素大小不同，像素越小，分辨率越高，显示越清晰。所以同样200px在不同设备下显示效果不同。
  • 百分比（%）
    • 可以设置为相对于其父元素的百分比。
    • 设置百分比，可以使子元素随父元素改变而改变。
  • em
    • em相对于元素的字体大小。
    • 1em=1 font-size
    • em可以根据字体大小改变而改变。
  • rem
    • rem相对于根元素html字体大小计算。

• 颜色单位

  • 颜色名
    • 直接使用颜色名设置：red,yellow,orange,blue
  • RGB值
    • 通过三种颜色的不同浓度调配出不同的颜色。
    • 光的三原色
      • Red
      • Green
      • Blue
    • 语法【0-255】
      • RGB（红色，绿色，蓝色）
  • RGBA值
    • A表示不透明度
      • 1表示完全不透明
      • 0表示完全透明
      • 0.5表示半透明
  • 十六进制RGB
    • 语法：#红色绿色蓝色
    • 颜色浓度：【00-FF】
    • 如果颜色两位两位重复可以简写。
      • background-color:#EEFF00=#EF0
  • HSL/HSLA值
    • H 色相【0-360】
    • S 饱和度【0%-100%】
    • L 亮度【0%-100%】