css样式

一丶css的引入方式

　　1.行内样式

    <div>
        <p style="color: green">我是一个段落</p>
    </div>

　　2.内接样式

<style type="text/css">
    /*写我们的css代码*/
        
    span{
    color: yellow;
    }

</style>

　　3.外接样式-链接式

<link rel="stylesheet" href="./index.css">

 　　4.外接样式-导入式

<style type="text/css">
        @import url('./index.css');
</style>

 二丶css选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/reset.css">
    <style type="text/css">
        
        /*1.标签选择器 选中的是 ‘共性’*/
        p{
            color: red;
        }
        /*重置样式*/
        /*组合选择器*/
        ul,ol{
            list-style: none;
        }


        /*2.类选择器  .类名  选中的也是共性 可以有多个*/
        .active{
            color: yellow;
        }
        .large{
            font-size: 30px;
        }

        /*3.id选择器  选中的是‘特性’ # id是唯一的*/
        #p1{
            color: green;
        }
        /*4. 通配符选择器   * 在以后工作中不要用这个  */

        /*一开始布局页面如果写css,一定要重置*/

        /**{    
            padding: 0;
            margin: 0;

        }*/
        a{
                /*清除a标签的下划线*/
            text-decoration: none;
        }
        .baidu{
            color: blue;
            /*下划线*/
            text-decoration: underline;
            /*显示小手的状态*/
            cursor: pointer;
        }
        input{
            border: none;
            width: 400px;
            height: 40px;
            border: 1px solid #e0e0e0;
            font-size: 22px;
        }

    </style>
</head>
<body>
    <p id="p1">alex</p>
    <p id="p2">alex2</p>
    <p>alex3</p>
    <p>alex4</p>
    <p>alex5</p>
    <ul>
        <li class="active large">
            alex1
        </li>
        <li>
            alex2
        </li>
    </ul>
    <ul>
        <li class="active">
            wusir
        </li>
    </ul>
    <a href="javascript:void(0);">百度一下</a>
    <span class="baidu">百度一下</span>
    <input type="text">

</body>
</html>
View Code

三丶高级选择器

　　后代选择器   儿子丶孙子丶重孙子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>后代选择器</title>
        <style type="text/css">
            /*指定到了具体标签,father下的,类是wu的标签的变色*/
            .father .wu{
                color:red;
            }
            /*father后代里的所有p标签都变色*/
            /*.father p{
                color: green;
            }*/
        </style>
    </head>
    <body>
        <div class="father">
            <p>你好</p>
            <ul>
                <li>
                    <p class="wu">wusir</p>
                </li>
            </ul>
            
        </div>
        <p class="wu">日天</p>
    </body>
</html>
后代选择器

　　子代选择器  只能是亲儿子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子代选择器</title>
        <style type="text/css">
            /*含有father类下面的子标签p变色*/
            /*.father>p{
                color: red;
            }*/
            /*含有father类下面的ul标签下的li标签变色*/
            .father>ul>li{
                color: blue; 
                width: 100px;
            }
            .container{
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <p>alex</p>
            <p>alex</p>
            <p>alex</p>
            <p>alex</p>
            <div class="content">
                <p>wusir</p>
            </div>
            <ul>
                <li>
                    <p>alex2</p>
                    <ul>
                        <li>wusir2</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="container">
        <p>日天</p>
        </div>
    </body>
</html>
View Code

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
            /*标签的组合选择*/
            body,div,p,a,span{
                color: blueviolet;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div>alex</div>
        <p>骑猪日天鸟</p>
        <a href="#">噬月吞天狗</a>
        <span>wusir</span>
    </body>
</html>
组合选择器

　　交集选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>交集选择器</title>
        <style type="text/css">
            div{
                color: red;
            }
            div.active{
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="active">alex</div>
    </body>
</html>
交集选择器

　　属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style type="text/css">
            form input[type="text"]{
                background-color: red;
            }
            form input[type="password"]{
                background-color: blue;
            }
            form #user{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <form action="">
            <input type="text" name="" id="user" value="" />
            <input type="password" name="" id="" value="" />
            <input type="text" name="" id="" value="" />
        </form>
    </body>
</html>
属性选择器

　　伪类选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style type="text/css">
            /*爱恨准则 LoVe HAte*/
            
            /*没有被访问的a标签的颜色*/
            a:link{
                color: red;
            }
            /*访问过后的a标签的颜色*/
            a:visited{
                color: yellow;
            }
            /*鼠标悬停时候a标签的颜色*/
            a:hover{
                color: green;
            }
            /*鼠标点击时a标签的颜色*/
            a:active{
                color: slateblue;
            }
            /*鼠标悬停在上面时候的变成下面的样式*/
            span:hover{
                color: red;
                font-size: 42px;
                text-decoration: underline;
            }
            /*使child不显示*/
            .child{
                display: none;
            }
            /*鼠标悬停在father上面时候 child变成下面的样式*/
            .father:hover .child{
                color: blueviolet;
                display: block;
                font-size: 52px;
            }
        </style>
    </head>
    <body>
        <a href="#">百度一下</a>
        <br>
        <span>alex</span>
        <div class="father">
            wusir
            <p class="child">alex2</p>
        </div>
    </body>
</html>
伪类选择器

　　伪元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style type="text/css">
            /*p标签中第一个元素变成下面样式*/
            p:first-letter{
                color: red;
                font-size: 30px;
            }
            /*在p标签最前面加上符号*/
            p:before{
                content: '$';
            }
            /*在p标签最后面加上符号*/
            p:after{
                content: '%';
            }
            .box{
                background-color: black;
                /*需求：这个盒子一定是块级标签  span==>块 并且不再页面中占位置。未来与布局有很大关系 */
                
                /*隐藏元素,不占位置*/
                /*display: none;*/
                display: block;
                
                
                /*隐藏元素,占位置*/
                visibility: hidden;
                height: 0;
            }
        </style>
    </head>
    <body>
        <p class="box">
            <span>alex</span>
        </p>
        <span class="box2">alex2</span>
        <div>
            wusir
        </div>
    </body>
</html>
伪元素选择器

三丶css的继承性和层叠性

 　　继承性:

　　　　color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。盒模型的属性是不可以继承下来的 a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>继承性</title>
        <style type="text/css">
            /*box下面的p标签中的span标签变成下面样式*/
            /*.box p span{
                color: red;
            }*/
            .box{
                color: red;
            }
            .box a{
                color: yellow;
            }
            .box p{
                color: green;
                font-size: 30px;
                line-height: 30px;
                background-color: crimson;
                text-align: right;
            }
            span{
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <div class="box">
            日天
            <a href="#">百度一下</a>
            <p>
                wusir
                <span>alex</span>
            </p>
        </div>
    </body>
</html>
继承性

　　层叠性

　　　　(1)行内 > id >class >标签 

　　　　(2)数数  数 id class 标签

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

　　　　(4)继承来的属性,它的权重为0,与选中的标签没有可比性

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*css层叠性  权重 谁的权重大就会显示谁的样式*/

            /*如何看权重  数数选择器  id  class 标签*/
            
            /*1 0 0*/
            #box{
                color: cornflowerblue;
            }
            /*0 1 0*/
            .box{
                color: red;
            }
            /*0 0 1*/
            div{
                color: green;
            }
            
            /*  id > 类 > 标签*/
        </style>
    </head>
    <body>
        <div id="box" class="box">猜猜我是什么颜色
            
        </div>
    </body>
</html>
层叠性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层叠性-深入</title>
        <style type="text/css">
            /*1 3 0*/
            #father1 .box #father2 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>
</html>
层叠性-深入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层叠性-再深入</title>
        <style type="text/css">
            /*继承来的属性 它的权重为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>
    </body>
</html>
层叠性-再深入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层叠性-又再深入</title>
        <style type="text/css">
        /*继承来的属性 权重为0*/

        /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/
            /*#father1 .box2{
                color: red;
            }
            .box1{
                color: green;
            }*/
            /*都是继承来的 ，都一样深*/
    
            #father1 #father2 .box3{
                color: red;
            }
            #father1 .box2 .box3{
                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>
</html>
层叠性-又再深入

四丶盒模型

　　属性:

　　　　内容的宽度

　　　　height:内容的高度

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

　　　　border:边框

　　　　margin:外边框另一个边到另一个边的距离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 300px;
                height: 300px;
                background-color: red;
                padding: 20px;
                border: 10px solid greenyellow;
            }
        </style>
    </head>
    <body>
        <div id="box" class="box">
            
        </div>
    </body>
</html>
盒模型

　　盒模型的计算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒模型的计算</title>
        <style type="text/css">
            
            .box{
                width: 180px;
                height: 180px;
                padding-left: 20px;
                padding-top: 20px;
                border: 1px solid red;
            }
            span{
                background-color: blue;
            }
            .box1{
                margin-left: 30px;
            }
        </style>
    </head>
    <body>
        <!--202*202-->
        <div class="box">
            <span>哈哈哈</span>
            <span class="box1">嘻嘻嘻</span>
        </div>
        <div class="box">
            <span>嘎嘎嘎</span>
        </div>
    </body>
</html>
盒模型的计算

　　浮动

　　float:left  向左浮动

　　float:right 向右浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*一定要先写这个*/
            *{
                padding: 0;
                margin: 0;
            }
            .top-Bar{
                width: 100%;
                height: 40px;
                background-color: #333;
            }
            .container{
                width: 1226px;
                height: 40px;
                margin-right: auto;
                margin-left: auto;
            }
            .top-Bar .top-l{
                width: 550px;
                height: 40px;
                background-color: green;
                float: left;
            }
            .top-Bar .top-shop{
                width: 100px;
                height: 40px;
                background-color: yellow;
                float: right;
            }
            .top-Bar .top-info{
                width: 200px;
                height: 40px;
                background-color: blue;
                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>
浮动
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qicun/p/9663485.html