【CSS基础学习】CSS的三大特性 - 蓝蓝设计_UI设计公司

帝皇彩票官网

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

2020-4-18 前端达人 前端及开发文章及欣赏

文章目录


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>



使用结论
由于内容有限,但是结论是一定的,所以我直接给出结论:

若多个选择器定义的样式不冲突,则元素应用所有选择器定义的样式。
若多个选择器定义的样式发生冲突(比如:同时定义了字体颜色属性),则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>


先推测一波,因为前面讲到了ID选择器的权重是大于类选择器的,所以这里颜色应该为red。
效果如下:

推测正确!优先级GET!


标签: html CSS

Powered by sitemap
博发彩票开奖 桔子彩票开奖 博发彩票登陆 大象彩票计划 福建11选5走势 山东11选5 状元彩票开奖 帝皇彩票 山东十一运夺金 博发彩票开奖