zoukankan      html  css  js  c++  java
  • CSS三大特性

    一、层叠性

    • 当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)
    • 和标签调用选择器的顺序没有关系。
    <style type="text/css">
            .box{
                font-size: 20px;
                color: red;
            }
            .box2{
                font-size: 30px;
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box box2">当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。</div> 
    </body>

    二、 继承性

    • 继承性发生的前提是包含(嵌套关系)

    • 总结:文字的所有属性都可以继承。文字颜色color可以继承;文字大小font-size可以继承;字体font-family可以继续;字体粗细font-weight可以继承;文字风格font-style可以继承;行高lineheight可以继承

    • 特殊情况:h系列(标题)不能继承文字大小。a标签(超链接)不能继承文字颜色。

    <style type="text/css">
            .father{
                color: red;
                font: 30px microsoft yahei;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <p class="son">继承性发生的前提是包含(嵌套关系)</p>
            <h1>h系列不能继承文字大小。</h1>
            <a href="#">a标签不能继承文字颜色。</a>
        </div>
    </body>

    三、优先级

    •  默认样式<标签选择器<类选择器<id选择器<行内样式<!important  

                  0                    1                    10             100              1000           1000以上

    • 优先级特点

     ①继承的权重为0

    <style type="text/css">
            div{
                color: red !important;
            }
            .box{
                color: green;
                font-size: 20px;
            }
            #content{
               color: pink;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div class="box" id="content" style="font-size: 10px;color: yellow;">字体默认黑色</div>

    ②权重会叠加

    <style type="text/css">
            p{
                font-size: 1px;
                color: red;
            }
            .son{
                font-size: 10px;
                color: blue;
            }
            p.son{
                font-size: 11px;
                color: yellow;
            }
            .father .son{
                font-size: 20px;
                color: pink;
            }
            .father #baby{
                font-size: 110px;
                color: orange;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <p class="son" id="baby">权重会叠加</p>
        </div>
    </body>
  • 相关阅读:
    C博客作业00—我的第一篇博客
    C语言博客作业03函数
    C语言博客作业05指针
    快速分页:jsp标签pagertaglib
    JSP与Servlet的编解码
    初探Hibernate3源码读取配置文件
    截取图片的某个部分(C#源代码)
    使用MATLAB获取视频中每一帧的图像
    Windows下较为精确的计时方法
    [转]向Windows Phone 7手机部署应用程序
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8606276.html
Copyright © 2011-2022 走看看