CSS知識(shí)導(dǎo)圖.png

一、css的簡(jiǎn)介

1. 什么是css
      層疊樣式表，css是對(duì)html進(jìn)行樣式修飾語(yǔ)言
      層疊：就是層層覆蓋疊加，如果不同的css樣式對(duì)同一html標(biāo)簽進(jìn)行修飾，樣式有沖突的部分應(yīng)用優(yōu)先級(jí)高的，不沖突的部分共同作用
      樣式表：就是css屬性樣式的集合  
2、css的作用
     (1)修飾html的 使其html樣式更加好看
     (2)提高樣式代碼的復(fù)用性
     (3)html的內(nèi)容與樣式相分離 便于后期維護(hù)    

3、css的引入方式和書(shū)寫(xiě)規(guī)范
    (1)內(nèi)嵌樣式
        內(nèi)嵌樣式是把css的代碼嵌入到html標(biāo)簽中
        <div style="color:red;font-size: 100px;">你好啊</div>
        語(yǔ)法：
            (1)使用style屬性將樣式嵌入到html標(biāo)簽中
            (2)屬性的寫(xiě)法：屬性：屬性值
            (3)多個(gè)屬性之間使用分號(hào);隔開(kāi)
        (不建議使用)

    (2)內(nèi)部樣式
        在head標(biāo)簽中使用style標(biāo)簽進(jìn)行css的引入
        <style type="text/css">
            div{color:red;font-size: 100px;}
        </style>
        語(yǔ)法：
            (1)使用style標(biāo)簽進(jìn)行css的引入
                <style type="text/css">
                    屬性：type：告知瀏覽器使用css解析器去解析
            (2)屬性的寫(xiě)法：屬性：屬性值
            (3)多個(gè)屬性之間使用分號(hào);隔開(kāi)
    
    (3)外部樣式
        將css樣式抽取成一個(gè)單獨(dú)css文件 誰(shuí)去使用誰(shuí)就引用
        <link rel="stylesheet" type="text/css" href="demo1.css"/>
        語(yǔ)法：
            (1)創(chuàng)建css文件 將css屬性寫(xiě)在css文件中
            (2)在head中使用link標(biāo)簽進(jìn)行引入
                <link rel="stylesheet" type="text/css" href="css文件地址"/>
                rel:代表要引入的文件與html的關(guān)系
                type：告知瀏覽器使用css解析器去解析
                href：css文件地址
            (3)屬性的寫(xiě)法：屬性：屬性值
            (4)多個(gè)屬性之間使用分號(hào);隔開(kāi)

    (4)@import方式
        <style type="text/css">
            @import url("css地址");
        </style>
        link與@import方式的區(qū)別：
            (1)link所有瀏覽器都支持， import部分低版本IE不支持
            (2)import方式是等待html加載完畢之后在加載
            (3)import方式不支持js的動(dòng)態(tài)修改

二、css選擇器

1、基本選擇器
    (1)元素選擇器
        語(yǔ)法：html標(biāo)簽名{css屬性}
        示例：
            <span>hello css!!!</span>
            <style type="text/css">
                span{color:red;font-size:100px; }
            </style>

    (2)id選擇器    id唯一性
        語(yǔ)法：#id的值{css屬性}
        示例：
            <div id="div1">hello css1!!!</div>
            <div id="div2">hello css2!!!</div>
            <style type="text/css">
                #div1{background-color: red;}
                #div2{background-color: pink;}
            </style>

    (3)class選擇器
        語(yǔ)法：.class的值{css屬性}
        示例：
            <div class="style1">div1</div>
            <div class="style1">div2</div>
            <div class="style2">div3</div>
            <style type="text/css">
                .style1{background-color: red}
                .style2{background-color: pink}
            </style>
    
    ***選擇器的優(yōu)先級(jí)：id>class>元素

2、屬性選擇器
    語(yǔ)法：基本選擇器[屬性=‘屬性值’]{css屬性}
    示例：
        <form action="">
            name:<input type="text" /><br/>
            pass:<input type="password" /><br/>
        </form>
        <style type="text/css">
            input[type='text']{background-color: yellow}
            input[type='password']{background-color: pink}
        </style>    

3、偽元素選擇器
    a標(biāo)簽的偽元素選擇器
        語(yǔ)法：
            靜止?fàn)顟B(tài)    a:link{css屬性}
            懸浮狀態(tài)    a:hover{css屬性}
            觸發(fā)狀態(tài)    a:active{css屬性}
            完成狀態(tài)    a:visited{css屬性}
        示例：
            <a href="#">點(diǎn)擊我吧</a>
            <style type="text/css">
                a:link{color:blue}
                a:hover{color:red}
                a:active{color:yellow}
                a:visited{color:green}
            </style>    

4、層級(jí)選擇器
    語(yǔ)法：父級(jí)選擇器 子級(jí)選擇器 .....
    示例：
        <div id="d1">
            <div class="dd1">
                <span>span1-1</span>
            </div>
            <div class="dd2">
                <span>span1-2</span>
            </div>
        </div>
        <div id="d2">
            <div class="dd1">
                <span>span1-1</span>
            </div>
            <div class="dd2">
                <span>span1-2</span>
            </div>
        </div>
        
        <style type="text/css">
            #d1 .dd2 span{color:red}
        </style>

三、css屬性

1、文字屬性
    font-size:大小
    font-family:字體類型        
2、文本屬性
    color:顏色
    text-decoration:下劃線
        屬性值：none    underline   
    text-align:對(duì)齊方式
        屬性值：left  center  right
        <div>hello css!!!</div>
        <a href="#">click me!!!</a>
        <style type="text/css">
            div{color:red;text-decoration: underline;text-align: right }
            a{text-decoration: none;}
        </style>
3、背景屬性
    background-color:背景顏色
    background-image:背景圖片
        屬性值：url("圖片地址");
    background-repeat:平鋪方式
        屬性值：默認(rèn)橫向縱向平鋪
                repeat:橫向縱向平鋪
                no-repeat:不平鋪
                repeat-y：縱向
                repeat-x：橫向
    
    body{
        background-color: black;
        background-image: url("images/dog.gif");
        background-repeat: repeat-y;
    }

4、列表屬性
    list-style-type:列表項(xiàng)前的小標(biāo)志
        屬性值：太多了
    list-style-image:列表項(xiàng)前的小圖片
        屬性值：url("圖片地址");
        
        <ul>
            <li>程序員</li>
            <li>程序員</li>
            <li>程序員</li>
            <li>程序員</li>
        </ul>
        <style type="text/css">
            /* ul{list-style-type: decimal-leading-zero;} */
            ul{list-style-image: url("images/forward.gif");}
        </style>

5、尺寸屬性  
    width:寬度
    height:高度
        <div id="d1">div1</div>
        <div id="d2">div2</div>
        <style type="text/css">
            #d1{background-color: red;width: 200px;height: 200px;}
            #d2{background-color: pink;width: 200px;height: 200px;}
        </style>
6、顯示屬性
    display:
        屬性值：none:隱藏
                block:塊級(jí)顯示
                inline：行級(jí)顯示
        
        <form action="">
            name:<input id="name" type="text" /><span id="span">對(duì)不起 輸入不符合要求</span>
            <br>
            pass:<input id="pass" type="password" />
            <br>
            <input id="btn" type="button" value="button" />
        </form>
        <style type="text/css">
            span{color:red;display: none}
        </style>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function(){
                document.getElementById("span").style.display = "inline";
            };
        </script>

7、浮動(dòng)屬性
    float:
        屬性值：left  right
                clear:清除浮動(dòng) left right both
        缺點(diǎn)： (1)影響相鄰元素不能正常顯示
                (2)影響父元素不能正常顯示

四、css盒子模型

border:
    border-width:邊框的寬度
    border-color:邊框的顏色
    border-style:邊框的線型
    
    border-top:上邊框
    border-bottom:下邊框
    border-left:左邊框
    border-right:右邊框
            
padding:
    代表邊框內(nèi)壁與內(nèi)部元素之間的距離
    padding:10px;代表上下左右都是10px
    padding:1px 2px 3px 4px;上右下左
    padding:1px 2px;上下/左右
    padding:1px 2px 3px;
    padding-top:單獨(dú)設(shè)置
margin:
    代表邊框外壁與其他元素之間的距離
    margin:10px;代表上下左右都是10px
    margin:1px 2px 3px 4px;上右下左
    margin:1px 2px;上下/左右
    margin:1px 2px 3px;
    margin-top:單獨(dú)設(shè)置