美文网首页
CSS布局基础(六)--继承、层叠

CSS布局基础(六)--继承、层叠

作者: Caesar_emperor | 来源:发表于2020-05-04 16:42 被阅读0次

    一、继承性质
    最简单的例子就是

    <style type="text/css">
    body{font-size:12px;}
    </style>
    <!--定义body样式,这样全部body内的都会作用于该CSS样式-->
    <!--元素本身包含了冲突样式,一般会忽略继承性,对标签的直接设置优先级高于继承性-->
    

    CSS强制规定了部分属性不具有继承性

    • 边框
    • 边界
    • 补白
    • 背景
    • 定位属性
    • 布局属性
    • 元素宽高属性

    二、CSS层叠性

    <!--跟样式的先后顺序有关系,这里字体将为14px-->
    <style type="text/css">
    div{font-size:12px;}
    div{font-size:14px;}
    </style>
    <div id="wrap"></div>
    

    三、CSS优先级

    !important关键字附加后,会拥有最高优先级

    1.CSS样式表优先级

    网页定义的样式分为4种:HTML、作者、用户、浏览器

    • HTML是元素的默认样式
    • 作者是创建人,即创建用户所编辑的CSS
    • 用户就是浏览网页的人所设置的样式
    • 浏览器就是指浏览器默认的样式

    2.CSS样式的优先级
    不同位置的样式优先级也不同:

    • 行内(内嵌)样式优先于内部样式表(style css)
    • 内部样式表优先于外部样式表(导入的CSS)

    四、CSS特殊性

    是指不同类型的选择器

    • 被继承的样式权重值为0
    • 标签选择器:权重值为1
    • 伪元素或伪对象选择器:权重值为1
    • 类选择器:权重值为10
    • 属性选择器:权重值为10
    • ID选择器:权重值为100
    • 其它选择器:权重值为0,如通配选择器
      以上面权值数为起点来计算每个样式中选择器的总权值数,计算规则是
    • 统计ID选择器的个数,然后乘以100
    • 统计选择器中类选择器个数,然后乘以1
    • 统计选择其中标签选择器个数,然后乘以1
      以此类推,最后把所有权值数相加,即得到当前选择器的总权重值,最后根据权重值来决定哪个样式的优先级大

    举个例子

    <style type="text/css">
    body div#box{boder:solid 2px red;}
    #box{border:dashed 2px blue;}
    div.red{border:double 3px red;}
    </style>
    <div id="box" class="red">CSS</div>
    
    body div#box=1+1+100
    #box=100
    div.red=1+10
    div  h2=1+1
    .red=10
    

    1.继承样式的优先级
    **这里提一句,比如当body内设置了span标签,内部样式表也设置了span,虽然继承了内部样式表,权重是0,但内部设置的样式表优先级是大于继承而来的

    <style type="text/css">
    span{color:Gray;}
    #header{color:Black;}
    </style>
    <div id="header" class="blue">
      <span>hello</span>
    </span>
    <!--字为灰色-->
    

    2.行内样/属性样式的优先级
    样式属性最优先,权重值100或更高

    五、!important

    优先级最高

    <!--外部样式表-->
    #header{
      color:Red!important
    }
    <!--内部样式表-->
    <style type="text/css">
        #header{color:Gray;}
    </style>
    </head>
    <body>
    <div id="header" style="color:Yellow">文件测试</div>
    </body>
    

    相关文章

      网友评论

          本文标题:CSS布局基础(六)--继承、层叠

          本文链接:https://www.haomeiwen.com/subject/rdzeghtx.html