目 录CONTENT

文章目录

CSS高级特性

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 14513 阅读 / 4928 字

CSS高级特性

之前我们已经学过了CSS的三个基本特性,分别是统一性,便捷性,分离性,这三个特性帮助我们对CSS的基础理解有很大的作用。同时CSS还有另外三个高级的特性,如下

继承性

CSS继承性算是一个比较明显的特征,当我们在父级元素上面设置一个样式以后,子级元素同样会应用到这个样式

<style type="text/css">
    .div1{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        color: red;
        font-size: 32px;
    }
</style>
<div class="div1">
    这是div1下面的内容
    <p>这是p标签下面的内容</p>
</div>
image-20200603104926921

我在div1上面设置了字体的颜色color与字体的大小font-size,我们可以年到div1盒子里面的文字变大了,同时p标签下面的文字与变大了,这什么为什么呢?

这个地方就是CSS继承性的体现,子级元素默认是可以继承父级元素的一些样式的

我们通过审查元素可以看到,p元素有一个继承的样式下来,如下所示

image-20200603105155854

在上面的图片里面,我们又看到了,并不是所有的样式都继承下来了,只继承了colorfont-size,而其它的样式没有继承

CSS里面允许父级元素某些样式被子级元素默认的继承下来,有些常用属性是不被继承的

  • 可以被继承的常用属性

    color/font-*/text-*/line-height/visibility

  • 不可以被继承的常用属性

    background-*/display/position/float/border/margin/padding/width/height

CSS里面上面的元素是可以被默认的继承下来的,但是如果想主动的去继承,也是可以的,只要在当前的属性值上面设置inherit

.div1>p{
    border: inherit;
}

这个时候p标签就是从级元素 div1上继承了border的样式

同时我们也要注意一点,怎么样不继承父级的样式呢?

<style>
	.div1{
        height: 100px;
        /*这个时候为了解决行内元素中间的空格,我们在父级元素上面给了一下font-size*/
        font-size: 0;
        /*这个时候子级元素span继承了这个样式,字体就不显示了*/
    }
    .div>span{
        /*这个时候就恢复了初始值,不从父级继承下来*/
        font-size:initial;
    }
</style>
<div class="div1">
    <button type="button">按钮</button>
    <span>选中我啊</span>
</div>

这个时候,我们在这里可以手动的选择这个元素,重新指定样式,但是大多数样式都有一个属性值initial

层叠性

CSS的层叠性指的是一个元素的样式应该是通过不同的设置堆叠起来的,它可以像搭积木一样,不停的去堆叠

image-20200603113057717

我们现在看到页面上面有一个像这样的效果,但是这个元素为什么会表现了这个效果呢?

image-20200603113411841

我们可以看到整个P元素的所有样式就一层一层这样的堆叠起来了。我们现在从下向上去看

  • 第一步:先从父级的div1里面继承了font-size的属性
  • 第二步:浏览器的默认样式 user agent style设置p标签的相关默认样式
  • 第三步:.p1则是从外部的样式文件index.css里面获取的样式信息
  • 第四步:.div1>p它是内部样式块时硕设置的样式信息
  • 第五步:从style属性里面也设置了这个P元素的样式信息

📚 总结:层叠性指的就是一个元素最终的样式应该是由继承样式,默认样式,内部样式块,外部样式表,以及style共同决定的

优先级

既然有了CSS的层叠性,那么当我们的元素样式在进行层叠的时候,如果发生了样式冲突,应该怎么办呢?所以并然会有一个计算规范来得出它们的优先级,根据优先级来计算它们最的的样式

CSS的优先级又为两个部分

  • 第一部分:层叠的优先级

    继承样式<默认样式<(内部样式块/外部样式表)<行内样式(style属性里的样式)

  • 第二部分:选择器的优先级

    选择器的优先级遵守一个公式的计算,去得到当前选择器的权重值,谁的值大,就听谁的

    选择器 优先级权重
    *星号选择器 0
    标签选择器 1
    class类,属性选,伪类 10
    ID选择器 100
    style属性 1000
    !important 10000

    优先级权重相同的选择器里面,我们采用后面的覆盖前面的原则

    在上面的优先级权重里面,权重值不可以实现进位,也就是11个标签选择器权重相加也不可能大于class选择器

    <style type="text/css">
        p{
            font-size: 32px;
        }
        /* ---------------------------------- */
        /* 1+1=2 */
        div>p{
            color: blue;
        }
        /* 1 */
        p{
            color: red !important;
        }
        /* 10 */
        .p1{
            color: deeppink;
        }
        /*1+10=11*/
        p.p1{
            color: yellow;
        }
        /* 1+1+10=12 */
        div>p.p1{
            color: lightseagreen;
        }
        /* 1+10+1+10=22 */
        div.div1>p.p1{
            color: darkorange;
        }
        /* 100 */
        #b{
            color: greenyellow;
        }
        /* 1+100=101 */
        p#b{
            color: chocolate;
        }
        /* 10+100=110 */
        .p1#b{
            color: #000000;
        }
    </style>
    <div class="div1" id="a">
        <!-- 1000 -->
        <p class="p1" id="b" style="color: cyan;">这是一个标签</p>
    </div>
    

    注意:我们的CSS可以通过link标签去导入外部样式,在导入外部样式的时候,同样要注意它的导入顺序

0

评论区