CSS（二）-- 样式继承、选择器权重、像素、颜色

目录

• 1.继承（样式）
• 2.选择器的权重
• 3.像素和百分比
  • 像素
  • 百分比
  • em
  • rem
• RGB
  • 颜色单位
• HSL值（不常用）

1.继承（样式）

• 样式的继承，我们为一个元素设置的样式同时也会应用到他的后代元素上
• 继承是发生在祖先和后代之间的
• 继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素伤，这样只需要设置一次即可
• 注意：并不是所有的方法都会被继承，比如，背景相关的，布局相关等这些样式都不会背继承

2.选择器的权重

• 样式冲突
  当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突
• 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

类型	权重值
内联样式	1000
id选择器	100
类和伪类选择器	10
元素选择器	1
通配选择器*	0
继承的样式	没有优先级

• 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

<style>
#box{} 权重：100

div#box1{} 权重：101

.red{} 权重：10

div,p,span{}//不会相加，而是单独的
</style>

• 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
• 如果优先级计算后相同，此时则优先使用考下的样式

3.像素和百分比

像素

• 屏幕（显示器）实际上是由一个一个的小点点构成
• 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
• 所以同样的200px在不同的设备下效果是不一样的

 200px;
height: 200px;

百分比

width：50%
height：50%

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

em

• em是相对于元素的字体大小来计算的
• em会根据字体大小的改变而改变
• 1em = 1font-size

.box3{
      font-size:30px;
      1oem;
      height:10em;
      background-color:greenyellow;
}

rem

• rem是相对于根元素的字体大小来计算，和em类似

RGB

颜色单位

• 在CSS中可以直接使用颜色名来设置各种颜色
  比如：red、orange、yellow、blue、green。。。。
  • 但是在CSS中直接使用颜色名是非常的不方便
• RGB值
  • RGB通过三种颜色的不同浓度来调配出不同的颜色
  • R：red、G：green、B：blue
  • 每一种元素的范围在0 - 255（0% - 100%）之间
  • 语法：RGB（红色，绿色，蓝色）
• RGBA
  就是在RGB的基础上增加了一个a表示透明度、

background-color:rgba(106.153,85,1);//表示不透明
background-color:rgba(106.153,85,.5);//表示半透明
background-color:rgba(106.153,85,0);//表示透明

• 十六进制的RGB值
  • 语法：#红色绿色蓝色
  • 颜色浓度通过 00-ff的16进制表示
  • 如果颜色两位重复可以进行简写： #aabbcc===#abc

HSL值（不常用）

• H：色相（0-360），S：饱和度（颜色的浓度0-100%），L：亮度（0-100%）