day02_css學習筆記

黑澤明軍發表於2018-04-18
CSS筆記

day02_css學習筆記

=============================================================================
=============================================================================
涉及到的知識點有：
    一、css的簡介
        1、什麼是css?
        2、css的作用
        3、css的引入方式和書寫規範
            (1) 內嵌樣式
            (2) 內部樣式
            (3) 外部樣式
            (4) @import方式（開發中基本不用該方式）
    二、css的選擇器
        1、基本選擇器
            (1)元素選擇器（標籤選擇器）
            (2)id選擇器（id具有唯一性）
            (3)class選擇器（類選擇器）
            (4)選擇器的優先順序：id選擇器 > class選擇器 > 元素選擇器
        2、屬性選擇器
        3、偽元素選擇器（常用於a標籤）
        4、層級選擇器
    三、css的屬性
        1、文字屬性    
        2、文字屬性
        3、背景屬性
        4、列表屬性
        5、尺寸屬性    
        6、顯示屬性
        7、浮動屬性
    四、css的盒子模型
        border:盒子的厚度
        padding:盒子(邊框)內壁與內部元素的距離
        margin:盒子(邊框)外壁與外部元素之間的距離
=============================================================================
=============================================================================
day02_css學習筆記
-----------------------------------------------------------------------------
一、css的簡介
    1、什麼是css?
        層疊樣式表（Cascading Style Sheets），css是對html進行樣式修飾的語言。
        層疊：就是層層覆蓋疊加，如果不同的css樣式對同一html標籤進行修飾時，樣式有衝突的部分應用優先順序高的，不衝突的部分共同作用。
        樣式表：就是css屬性樣式的集合。
--------------------------------------        
    2、css的作用
        (1) 修飾html，使其html樣式更加好看。
        (2) 提高樣式程式碼的複用性，極大的提高了工作效率。
        (3) 使html的內容與樣式相分離，便於後期維護(降耦合了)。
--------------------------------------
    3、css的引入方式和書寫規範
        (1) 內嵌樣式
                是把css的程式碼直接嵌入到html標籤中。
            示例：
                <div style="color: red; font-size: 100px;">你好，世界！</div>
            語法：
                (1) 使用style屬性將樣式嵌入到html標籤中 
                (2) 屬性的寫法：屬性:屬性值
                (3) 多個屬性之間使用分號;隔開
            不建議使用。
            
        (2) 內部樣式
                在head標籤中使用style標籤進行css的引入。
            示例：
                <head>
                    <style type="text/css">
                        div{color: red; font-size: 100px;}
                    </style>
                </head>
                <body>
                    <div>你好，世界！</div>
                </body>
            語法：
                (1) 使用style標籤進行css的引入
                    <style type="text/css">
                        屬性type：告知瀏覽器使用css解析器去解析
                (2) 屬性的寫法：屬性:屬性值
                (3) 多個屬性之間使用分號;隔開
                
        (3) 外部樣式
                先將css樣式抽取成一個單獨css檔案，誰去使用誰就引用。
            示例：
                <link rel="stylesheet" type="text/css" href="demo1.css" />
            語法：
                (1) 建立.css檔案，將css屬性寫在.css檔案中，如：div{color:red;font-size:100px;}
                (2) 在head標籤中使用link標籤進行引入
                    <link rel="stylesheet" type="text/css" href="css檔案地址" />
                        rel：代表要引入的檔案與html的關係，stylesheet：樣式表
                        type：告知瀏覽器使用css解析器去解析
                        href：css檔案地址
                (3) 屬性的寫法：屬性:屬性值
                (4) 多個屬性之間使用分號;隔開
                
        (4) @import方式（開發中基本不用該方式）
            示例：
                <style type="text/css">
                    @import url("css地址");
                </style>
            link方式與@import方式的區別：
                (1) link方式所有瀏覽器都支援，import方式部分低版本IE瀏覽器不支援
                (2) import方式是等待html載入完畢之後再載入（所以會有一個缺點：網速慢時，後載入樣式，比較醜）
                (3) import方式不支援js的動態修改
-----------------------------------------------------------------------------
二、css的選擇器
    1、基本選擇器
        (1)元素選擇器（標籤選擇器）
            語法：html標籤名{css屬性}
            示例：
                <head>
                <style type="text/css">
                    span{color:red; font-size:100px;}
                </style>
                </head>
                <body>
                    <span>hello,css!</span>
                </body>
            注意：
                <span> 在CSS定義中屬於一個行內元素，在行內定義一個區域，也就是一行內可以被 <span> 劃分成好幾個區域，從而實現某種特定效果。
                <div>  在CSS定義中屬於一個塊級元素，<div> 可以包含段落、標題、表格甚至其它部分。
        (2)id選擇器（id具有唯一性）
            語法：#id的值{css屬性}
            示例：
                <head>
                <style type="text/css">
                    #div1{background-color: red;}
                    #div2{background-color: pink;}
                </style>
                </head>
                <body>
                    <div id="div1">hello,css1!</div>
                    <div id="div2">hello,css2!</div>
                </body>
        (3)class選擇器（類選擇器）
            語法：.class的值{css屬性}
            示例：
                <head>
                <style type="text/css">
                    .style1{background-color: red}
                    .style2{background-color: blue}
                </style>
                </head>
                <body>
                    <div class="style1">div1</div>
                    <div class="style1">div2</div>
                    <div class="style2">div3</div>
                </body>
        (4)選擇器的優先順序：id選擇器 > class選擇器 > 元素選擇器
            示例：
                <head>
                <style type="text/css">
                    span{color: red; font-size: 100px;}
                    #span{color: pink;}
                    .class{color: green;}
                </style>
                </head>
                <body>
                    <span id="span" class="span">hello,css!</span>
                </body>
--------------------------------------
    2、屬性選擇器
        語法：基本選擇器[屬性=`屬性值`]{css屬性}
        示例：
            <head>
            <style type="text/css">
                input[type=`text`]{background-color: yellow}
                #id2[type=`password`]{background-color: pink}
                .class3[type=`password`]{background-color: red}
            </style>
            </head>
            <body>
                <form action="">
                    name:<input type="text" /><br/>
                    pass:<input id="id2" type="password" /><br/>
                    pass:<input class="class3" type="password" /><br/>
                </form>
            </body>
--------------------------------------
    3、偽元素選擇器（常用於a標籤）
        a標籤的偽元素選擇器
            語法4種：
                靜止狀態    a:link{css屬性}
                懸浮狀態    a:hover{css屬性}
                觸發狀態    a:active{css屬性}
                完成狀態    a:visited{css屬性}
            示例：
                <head>
                <style type="text/css">
                    a:link{color: blue}
                    a:hover{color: red}
                    a:active{color: yellow}
                    a:visited{color: green}
                </style>
                </head>
                <body>
                    <a href="#">點選我吧</a>
                </body>
--------------------------------------
    4、層級選擇器
        語法：父級選擇器 子級選擇器 ...
        示例：
            <head>
            <style type="text/css">
                #d1 .dd2 span{color: red}
            </style>
            </head>
            <body>
                <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>
            </body>
-----------------------------------------------------------------------------
三、css的屬性
    1、文字屬性                        
        css文字屬性                    html文字屬性
        font-size:字型大小             size="2"        [1,7]
        font-family:字型型別        　 face="黑體"
        示例：
            <head>
            <style type="text/css">
                span{color: red; font-size: 100px; font-family: 黑體;}
            </style>
            </head>
            <body>
                <span>hello,css!</span>
            </body>
--------------------------------------        
    2、文字屬性
        color:文字顏色
        text-decoration:文字下劃線
            屬性值：none  underline    
        text-align:文字對齊方式
            屬性值：left  center  right
        示例：
            <head>
            <style type="text/css">
                div{color: red; text-decoration: underline; text-align: right }
                a{text-decoration: none;}
            </style>
            </head>
            <body>
                <div>hello,css!</div>
                <a href="#">click,me!</a>
            </body>
--------------------------------------
    3、背景屬性
        background-color:背景顏色
        background-image:背景圖片
            屬性值：url("圖片地址");
        background-repeat:背景平鋪方式
            屬性值：預設橫向縱向平鋪
                repeat:橫向縱向平鋪
                no-repeat:不平鋪
                repeat-y：縱向平鋪
                repeat-x：橫向平鋪
        示例：
            <head>
            <style type="text/css">
                body{
                    background-color: black;
                    background-image: url("../../images/dog.gif");
                    background-repeat: repeat-y;
                }
            </style>
            </head>
            <body>
            </body>
--------------------------------------
    4、列表屬性
        list-style-type:列表項前的小標誌
            屬性值：太多了
        list-style-image:列表項前的小圖片
            屬性值：url("圖片地址");
        示例：
            <head>
            <style type="text/css">
                /* ul{list-style-type: decimal-leading-zero;} */
                ul{list-style-image: url("../../images/forward.gif");}
            </style>
            </head>
            <body>
                <ul>
                    <li>黑馬程式設計師</li>
                    <li>黑馬程式設計師</li>
                    <li>黑馬程式設計師</li>
                    <li>黑馬程式設計師</li>
                </ul>
            </body>
--------------------------------------
    5、尺寸屬性    
        width:寬度
        height:高度
　　　　 line-height:行高
        示例：
            <head>
            <style type="text/css">
                #d1{background-color: red; width: 200px; height: 200px; display: block;}
                #d2{background-color: pink; width: 200px; height: 200px;}
            </style>
            </head>
            <body>
                <div id="d1">div1</div>
                <div id="d2">div2</div>
            </body>
--------------------------------------
    6、顯示屬性
        display:
            屬性值：
                none:隱藏
                block:塊級顯示
                inline:行級顯示
            示例：
                <head>
                <style type="text/css">
                    span{color: red; display: none}
                </style>
                </head>
                <body>    
                    <form action="">
                        name:<input id="name" type="text" /><span id="span">對不起 輸入不符合要求</span><br>
                        pass:<input id="pass" type="password" /><br>
                        <input id="btn" type="button" value="button" />
                    </form>
                </body>
                <script type="text/javascript">
                    document.getElementById("btn").onclick = function() {
                        document.getElementById("span").style.display = "inline";
                    };
                </script>
--------------------------------------
    7、浮動屬性
        float:
            屬性值：
                left:左浮
                right:右浮
        clear:清除浮動
            屬性值：
                left:清除左浮動 
                right:清除右浮動 
                both:清除浮動 
        缺點：
            (1) 影響相鄰元素不能正常顯示
            (2) 影響父元素不能正常顯示
        示例：
            <head>
                <meta charset="UTF-8">
                <title>Insert title here</title>
                <style type="text/css">
                    #d1{width: 200px; height: 200px; background-color: red; float: left;}
                    #d2{width: 200px; height: 200px; background-color: green; float: left;}
                    #d3{width: 200px; height: 200px; background-color: pink; clear: both;}    
                    .clear{clear: both}
                </style>
                </head>
                <body>    
                    <div id="d1"></div>
                    <div id="d2"></div>
                    <div id="d3">xxx</div>
                    <div class="clear"></div>        
                </body>
-----------------------------------------------------------------------------
四、css的盒子模型
    屬性：
        border:盒子的厚度
            border-width:邊框的寬度
            border-color:邊框的顏色
            border-style:邊框的線型
                可以簡寫。如：border: 10px green solid 
                solid 實線  dashed 虛線  dotted 圓點  double 雙實線
            單獨設定：
            border-top:上邊框寬度
            border-bottom:下邊框寬度
            border-left:左邊框寬度
            border-right:右邊框寬度
            
        padding:盒子(邊框)內壁與內部元素的距離
            padding: 10px;                上下左右都是10px
            padding: 1px 2px 3px 4px;     上右下左(順時針)
            padding: 1px 2px;             上下/左右
            padding: 1px 2px 3px;         上/左右/下
            單獨設定：
            padding-top: 
            padding-top:上邊框寬度
            padding-bottom:下邊框寬度
            padding-left:左邊框寬度
            padding-right:右邊框寬度
                
        margin:盒子(邊框)外壁與外部元素之間的距離
            margin: 10px;                 上下左右都是10px
            margin: 1px 2px 3px 4px;      上右下左
            margin: 1px 2px;              上下/左右
            margin: 1px 2px 3px;          上/左右/下
　　　　　　　margin: 5px auto 15px          auto表示居中
            單獨設定：
            margin-top:上邊框寬度
            margin-bottom:下邊框寬度
            margin-left:左邊框寬度
            margin-right:右邊框寬度

=============================================================================

 

我的GitHub地址：https://github.com/heizemingjun
我的部落格園地址：http://www.cnblogs.com/chenmingjun
我的螞蟻筆記部落格地址：http://blog.leanote.com/chenmingjun
Copyright ©2018 黑澤明軍
【轉載文章務必保留出處和署名，謝謝！】

相關文章