css的学习

高级选择器:

　　1后代选择器: 儿子孙子重孙子

　　　　　　　　　　举例: div ul li p{ color:red; }

    <style>
        <!--.father p{-->
            <!--color:green;-->
        <!--}     /* 德玛西亚之力 和wuoeiqi都变成绿色  wuoeiq前面的原点显示黑色    */-->
        .father .wu {
            color: yellow;
        }                                       /*只是把wuoeiqi变成了黄色  */
    </style>
</head>
<body>
    <div class="father">
        <p>德玛西亚之力</p>
        <ul>
            <li>
                <p class="wu">wuoeiqi</p>
            </li>
        </ul>

    </div>

</body>

后代选择器

　　2子代选择器: 只能是亲儿子 div>p{}

 <title>Title</title>
    <style>
        <!--五个雨蝶变黄色-->
        .father>p{
            color: yellow;
        }
        /*理论上赵薇变红 实际上赵薇wusir都变红*/
        .father>ul>li{
            color: red;
        }
        /*日天变成蓝色*/
        .container{color:blue;}

    </style>
</head>
<body>
    <div class="father">
        <p>雨蝶</p>
        <p>雨蝶</p>
        <p>雨蝶</p>
        <p>雨蝶</p>
        <p>雨蝶</p>
        <div class="content">
            <p>wusir</p>
        </div>
        <ul>
            <li>赵薇
                <ul>
                    <li>wusir</li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="container">
        <p>日天</p>
    </div>
</body>

一知半解

　　3组合选择器:多个选择器组合到一起共同设置样式

　　　　　　　　　　举例: div,p,a,li,span,{font-size:14px;}

 <title>Title</title>
    <style>
        body,div,p,a,span{
            color: lightgoldenrodyellow;
        }
    </style>
</head>
<body>
    <div>
        alex
    </div>
    <p>alex2</p>
    <a href="#">ritian</a>
    <span>wusir</span>
</body>

了然

　　4交集选择器:第一个标签必须是标签选择器，第二个标签必须是类选择器

　　　　　　　　div.active{ }

 1 h4{
 2      100px;
 3     font-size: 14px;
 4 }
 5 .active{
 6     color: red;
 7     text-decoration: underline;
 8 }
 9 /* 交集选择器 */
10 h4.active{
11     background: #00BFFF;
12 }

View Code

　　5属性选择器:

　　　　　　input[type='text']

   <title>Title</title>
    <style>

        form input[type='password']{
            background-color: red;
        }
    </style>
</head>
<body>
<form action="">
    <input type="text" id="user">jaja
    <input type="password">123
</form>
</body>

给密码背景变红色

伪类选择器:LoVe HAte

　　a:link 没有被访问的

　　a:visited 访问过后的

　　a:hover 鼠标悬停的时候

　　a:active 摁住的时候

  <title>Title</title>
    <style>
        a:link{
            color: blue;
        }
        a:visited{
            color: #b3b3b3;
        }
        a:hover{
            color: #f2f2f2;
        }
        a:active{
            color: chartreuse;
        }
        /*给变形金刚做修饰*/
        span:hover{
            color: blue;
            font-size: 30px;
            text-decoration: underline;
        }
        /*修饰alex*/
        .father:hover .child{
            color:red;
            display: block; 
        }


    </style>
</head>
<body>
    <a href="#">百度一下</a>
    <span>变形金刚</span>
    <div class="father">
        小猪佩奇
        <p class="child">alex</p>
    </div>

</body>

伪类选择器

伪元素选择器:

　　p:before 在...的前面添加内容一定要结合content

　　p:after 在....的后面添加内容与后面的布局有很大的关系

  <title>Title</title>
    <style>
        /*修改p元素的第一位*/
        p:first-letter{
            color:red;
            font-size: 26px;
        }
        p:before{
            content: '$';
        }
        p:after{
            content: 'hou';
        }
        /* 隐藏元素,不占位置*/
        /*.box2{*/
            /*display: none;*/
            /**/
        /*}*/
         /* 隐藏元素,不占位置*/
        /*.box2{*/
            /*display: block;*/
            /*visibility: hidden;*/
            /*height: 0;*/
        /*}*/

    </style>
</head>
<body>
    <p class="box">
        <span>alex</span>
    </p>
    <span class="box2">alex1</span>
    <div>wusir</div>

View Code

css的继承性和层叠性

　　继承性:color text-xxxx font-xxxx line-xxxx的属性可以继承下来.盒模型的属性是不可以继承的

　　a标签有特殊情况,设置a标签的字体颜色一定要选中a不要使用继承性

<title>Title</title>
    <style>
       .box{
           color: red;
       }
        .box a{
            color: #f2f2f2;
        }
        .box p{
            color: green;
            font-size: 30px;
            line-height: 30px;
            background-color:red;
            text-align: right;
        }
        span{
            background-color:transparent;
        }

    </style>
</head>
<body>
    <div class="box">
        ritian
        <a href="#">百度</a>
        <p>
            wusir
            <span>alex</span>
        </p>
    </div>

　　层叠性:覆盖

　　1 行内>id>class>标签 1000>100>10>1

　　2数数按顺序数id class 标签

　　3先选中标签,权重一样以后设置的为主

　　4如果都是继承来的属性,保证就近原则

　　5都是继承来的属性,选择的标签一样近,再去数权重

<style>
     /*看权重 数数选择器 id>class>标签*/
      /* 1 0 0*/
     #box{
            color:red;
        }
     /* 0 1 0*/
     .box{color: green}
     /* 0 0 1*/
     div{color: blue}

/* 最终结果为红色 */
    </style>
</head>
<body>

   <div class="box" id="box">猜猜我是什么颜色</div>
</body>

    <style>
        /*1 3 0 */
        #father1 .box2 #father3 p{
            color: yellow;
        }
        
        /*0 4 0*/
        /*.box1 .box2 .box3 .box4{
            color: red;
        }*/
        /*2 1 1*/
        #father1 #father2 .box3 p{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>

走火入魔版

    <style>
    /*继承来的属性 它的权重为0，跟选中的标签没有可比性*/
        #father1 #father2 #father3{
            color: red;
        }
        #father1 .box2 .box3 p{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>

千万不要点

盒模型:

　　属性: 内容的宽度

　　　　heigth:内容的高度

　　　　padding:内边距内容到边框的距离

　　　　border:边框

　　　　margin:外边距

    <style>
        .box{
            200px;
            height: 200px;
            background-color:chartreuse;
            padding: 50px;
            border: 10px solid green;
        }


    </style>
</head>
<body>
    <div class='box'>有点意思</div>
        
</body>

　　盒模型的计算:

　　　　总结:保证盒模型的大小不变,加padding就一定要减去width或者heigth

　　　　前提是在标准文档流 padding:父子之间调整位置 margin:兄弟之间调整位置

布局的方式:浮动:

　　浮动能实现元素并排

　　盒子一浮动就脱离了标准文档流,不占位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0; 
        }
        .top-Bar{
            100%;
            height: 40px;
            background-color: #333; 
        }
        .container{
             1226px;
            height: 40px;
            /*background-color: red;*/
            margin-right: auto;
            margin-left: auto;
        }
        .top-Bar .top-l{
             550px;
            height: 40px;
            background-color: green;
            float: left;
        }
        .top-Bar .top-shop{
             100px;
            height: 40px;
            background-color: yellow;
            float: right;
        }
        .top-Bar .top-info{
             200px;
            height: 40px;
            background-color: purple;
            float: right;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    
    <div class="top-Bar">
        <div class="container">
            <div class="top-l">
                
            </div>
            <div class="top-shop"></div>
            <div class="top-info"></div>
        </div>
    </div>
</body>
</html>

如有雷同纯属巧合