day4(css优先级)

参考博客：

　　http://www.cnblogs.com/yuanchenqi/articles/6856399.html

 

css属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
           /*.c1[po*="p"]{*/
               /*color: red;*/
           /*}*/

         /*[po="p1 p"]{*/
             /*color: green;*/
         /*}*/

        /*.c1{*/
            /*color: red;*/
        /*}*/
        /*.btn{*/
            /*font-size: 30px;*/
        /*}*/

    </style>
</head>
<body>

<div po="p1 p" class="c1 btn">p1</div>
<!--这个class有两个值，即等于c1又等于btn-->
<div po="p2 p" class="c1">p2</div>

<div class="c1">p3</div>

</body>
</html>
View Code

css优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*div{*/
            /*color: red;*/
        /*}*/


       /*#id1{*/
            /*background-color: blueviolet;*/
        /*}*/

        /*.d2{*/
            /*background-color: bisque;*/
        /*}*/
        /*div{*/
            /*background-color: darkblue;*/
        /*}*/

         /*#id1 .p1{*/
            /*color: darkcyan;*/
        /*}*/

        /*div p{*/
            /*color: green;*/
        /*}*/

        /*.d1 p{*/
            /*color: red;*/
        /*}*/

        /*.p1{*/
            /*color: sienna;*/
        /*}*/

         /*.d1 .p2{*/
             /*color: red;*/
         /*}*/

        .d1 .c2 .p2{
            color: green;
        }
        .p2{
            color: red!important;
        }

    </style>
</head>
<body>

<!--<div class="d1 d2" id="id1" style="background-color: green">-->

<div class="d1 d2" id="id1">
    DIV
    <p class="p1">PPP</p>
    <div class="c2">
        <div class="c3">
            <p class="p2">inner</p>
        </div>
    </div>
</div>

<p>hello</p>

<span>span</span>


</body>
</html>
View Code

 

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：


1 内联样式表的权值最高               style=""－－－－－－－－－－－－1000；

2 统计选择符中的ID属性个数。       #id －－－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

 

css颜色，文本在标签中的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            color: blue;
            /*color: RGB(0,255,0);*/
            /*color: RGBA(255,0,0,1);*/
            /*R是红色，G是green，B是蓝色，A是透明度*/
            /*color: #A1A1A1;*/
            opacity:0.9 ;
            /*此也是个透明度的设置*/
        }
        div{
            width: 200px;
            height: 200px;
            background-color: gray;
            text-align: right;
            /*控制文本在背景的位置，right为右边，还有center，left*/
        }
    </style>
</head>
<body>

<p>hello</p>
<div>DIV</div>
</body>
</html>
View Code

 

 

背景 属性，图片什么的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 1600px;
            height: 1600px;

            /*背景图片相关*/
            /*/!*background-image: url("12.jpg");*!/*/
            /*/!*background-repeat: no-repeat;*!/*/
            /*/!*background-position: 400px 200px;*!/*/
            /*/!*background-position: center center;*!/*/
            /*把背景图片调整，第一个center水平居中(离左边的距离)，第二个center是距离上边缘的位置*/
            background: url("12.jpg") no-repeat 100px 100px ;
            /*简写的一个全部包括其中，no-repeat不平铺*/
            background-color: #2459a2;

        }
    </style>
</head>
<body>
<div>

</div>


</body>
</html>
View Code

 

display属性很重要，常用，有四参数

  • none知道就行了，
  • block设为块标签
  • inline设为内联标签
  • inline-block此属性重要，能设长宽而且不是块(内联标签不能设长宽，而块标签是独占一行的)

 

posted @ 2018-02-13 16:06  wanchenxi  阅读(144)  评论(0)  编辑  收藏  举报