【黑马前端—CSS基础】CSS三大特性

参考b站的黑马程序员pink老师
由我收集整理总结

总结:

层叠性(相同的选择器):(一个世界允许不同的人存在,不允许同样的人存在)

相同的选择器给设置了相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题,

继承性:子标签会继承父标签的与文字相关的样式(text-、font-、line-、以及color)

用法:恰当地使用继承可以简化代码,降低css样式的复杂性:比如可以给body设置属性

优先级:给同一个元素指定了多个选择器,就会有优先级产生。

  1. 如果选择器相同,则执行层叠性
  2. 如果选择器不同,则根据选择器权重执行
  3. 对于权重的理解:
    费的事越多,权重却高,如果是继承的话,什么都不用做,最轻松,所以权重最低,元素选择器稍微麻烦一点,要特别写个选择器,而类选择器在写法上比元素选择器多了一个‘.’,而且还要多写个‘class’,所以更麻烦,ID选择器虽然和类选择器写法差不多,但是只能出现一个,所以比类选择器的权重更高一点,而如果选择了行内选择器,就不得不在需要的地方重新再写一遍样式,所以是最麻烦的一种写法,所以权重更高。而最后一个‘!important’就说明最重要了,人家都说了,不用比了)

优先级注意事项:

  1. 权重是由4位数字组成,但是不会有进位
  2. 2.可以理解为类选择器永远大于元素选择器,id永远大于类,以此类推
  3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值
    注意:这三个特性是可以交叉实现的,就比优先级

层叠性(相同的选择器)

相同的选择器给设置了相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
原则:
如果样式冲突,就遵循就近原则,那个样式离结构近,就执行哪个样式
样式不冲突,不会重叠

<style>
      div {
     
     
          color: red;
           width: 100px;
            height: 100px;
            font-size: 66px;
       }
       div {
     
     
           color: black;
           width: 100px;
           height: 100px;
       }
    </style>

继承性

子标签会继承父标签的某些样式,文字相关的样式,如文本颜色和字号(text-、font-、line-、以及color),恰当地使用继承可以简化代码,降低css样式的复杂性:比如可以给body设置属性
在这里插入图片描述
结果:
在这里插入图片描述

行高的继承

行高可以不跟单位,意为当前行高为当前字大小的x倍。这样写的优势是里面的子元素可以根据文字大小自动调整行高。
比如:当前line-height=1.5X14px=24px

   <style>
        body {
     
     
            font:15px/1.5 '微软雅黑';
        }
        div {
     
     
        font-size:14px;
        }
    </style>

优先级

给同一个元素指定了多个选择器,就会有优先级产生。

  1. 如果选择器相同,则执行层叠性
  2. 如果选择器不同,则根据选择器权重执行
    (费的事越多,权重却高,如果是继承的话,什么都不用做,最轻松,所以权重最低,元素选择器稍微麻烦一点,要特别写个选择器,而类选择器在写法上比元素选择器多了一个‘.’,而且还要多写个‘class’,所以更麻烦,ID选择器虽然和类选择器写法差不多,但是只能出现一个,所以比类选择器的权重更高一点,而如果选择了行内选择器,就不得不在需要的地方重新再写一遍样式,所以是最麻烦的一种写法,所以权重更高。而最后一个‘!important’就说明最重要了,人家都说了,不用比了)在这里插入图片描述
    优先级注意事项:
  3. 权重是由4位数字组成,但是不会有进位
  4. 2.可以理解为类选择器永远大于元素选择器,id永远大于类,以此类推
  5. 等级判断从左向右,如果某一位数值相同,则判断下一位数值

权重叠加

就像这里,.nav li,ul li 和li 同时作用于li上,
.nav li的权重为0011,
ul li的权重为0002,
li的权重为0001,所以li的颜色为紫色

<style>
.nav li{
     
     
            color: blueviolet;
        }
ul li {
     
     
            color: red;
        }
        li {
     
     
            color: blue;
        }
</style>
<body>
<ul>
<li>helloworld</li>
</ul>
</body>

例子:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_44308180/article/details/108337222