【CSS基础学习】CSS的三大特性

文章目录

继承性

继承性的使用说明
CSS继承的局限性

层叠性

层叠性的使用说明
使用结论

优先级

优先级的使用说明

CSS有三大特性，分别是 继承性，层叠性，优先级。CSS的主要特征是继承性，这里先讲解继承性。

继承性

继承性的使用说明

继承性的描述：
继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父类的属性。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>父元素
        <div>子元素
            <p>我依旧是子元素</p>
        </div>
    </div>
</body>
</html>

效果如下：

有图可见，被div包裹住的元素，都具有了div的css样式属性，这被我们称为继承性。

在CSS中以，text-,font-,line-开头的属性都是可以继承的。

CSS继承的局限性

并不是所有的CSS属性都可以被继承的，以下就不具有继承性：

a标签的字体颜色不会被继承，a标签的字体颜色是不会改变的，可以通过页面的的F12可以查看到，a标签是有一个默认的color:-webkit-link;字体颜色属性，所以父元素设置颜色是不能发生改变a标签字体的颜色。
h标签的字体的大小也是不能被继承的，如下代码给父元素在设置一个字体属性20px，再添加一个h标签，在浏览器中可以发现h标签中字体的大小是不会发生改变的，因为h标签中有一个默认的font-size:1.5em;字体大小属性。
div标签的高度如果不设置由内容来绝对（没有内容高度未0），宽度默认由父元素继承过来
边框属性
外边距属性
内边距属性
背景属性
定位属性
布局属性
元素宽高属性

层叠性

层叠性的使用说明

层叠性的表述
所谓层叠性是指多种CSS样式的叠加，例如，当使用内嵌式CSS样式表定义p标记字号大小为12像素，ID选择器定义p标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 32px;
        }
    </style>
</head>
<body>
            <p style="color: blue;">我这里体现了层叠性呀</p>
</body>
</html>

效果如下：

由图可见，p标签的文字，颜色变为了blue，并且字体大小成了32px，体现了层叠性。

使用结论

由于内容有限，但是结论是一定的，所以我直接给出结论：

若多个选择器定义的样式不冲突，则元素应用所有选择器定义的样式。
若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按照选择器的优先级，让元素应用优先级搞得选择器样式。
CSS定义的选择器优先级从高到低为：行内样式–>ID样式–>类样式–>标记样式。
如若想直接定义使用哪个样式，不考虑优先级的话，则使用!important，把这个加在样式后面就行了。

优先级

定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，这时就会出现优先级的问题。层叠性和选择器的圈中有很大的关系。

优先级的使用说明

权重分析：

内联样式：如：style=""，权重为1000。
ID选择器，如：#content，权重为100。
类，伪类和属性选择器，如.content，权重为10。
标签选择器和伪元素选择器，如div p，权重为1。
~~继承样式，权重为0。~~

将基本选择器的权重相加之和，就是权重大小，值越大，权重越高。
计算权重方法
数标签：先数权重最高的标签，然后数第二高权重的标签，以此类推，就会生成一个数组，里面包含四个数字。
比如（0，0，0，0）分别对应（行内式个数，id选择器个数，类选择器个数，标签选择器个数）
然后两个选择器通过对别四个数字的大小，确定权重关系。
例：
#box ul li a.cur有1个id标签，1个类，3个标签，那么4个0就是（0，1，1，3）
.nav ul .active .cur有0个id，3个类，1个标签，那么4个0就是（0，0，3，1）
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            color: blue;
        }
        #p1{
            color: red;
        }
    </style>
</head>
<body>
            <p id="p1" class="p1">我们来试一下优先级</p>
</body>
</html>