這是我的第二篇博客，H5教程CSS入門，適合剛開始學習H5的新手，讓我們共同進步。
1. CSS簡介
1.1 CSS是什么？
CSS稱為樣式層疊表，是用於增強或控制網頁樣式，並允許將樣式信息與網頁內容分離的一種標記性語言。
1.2 我們為什么要使用CSS？
1.為了方便樣式的復用，方便網站后期維護。
2.為了達到頁面的精准控制，實現精美復雜的頁面。
簡單點說，CSS就是為了讓你的網頁更加好看。前面學的HTML相當於你買了一個毛坯房，雖然結構有了，但是實在是太難看了，不能住人，所以你就需要CSS來給你裝修一下。
2.CSS基本語法
2.1 CSS的三種鏈接方式
<div style="all: inherit;"></div>
2.1.1行內樣式表
1.將CSS樣式與HTML代碼，完全糅雜在一起，不符合W3C關於"內容與表現分離"的基本規范，不利於后期維護。
2.優先級最高，但是不推薦使用。
2.1.2內部樣式表
<style type="text/css"></style>
1.一定程度的將CSS樣式與HTML代碼分離，但是分離不夠徹底，無法實現樣式復用。
2.優先級低於行內樣式表。
<link rel="stylesheet" type="text/css" href="02.應用CSS的三種方法.css"/>
2.1.3外部樣式表
1.實現了CSS樣式與HTML代碼的徹底的分離，符合W3C的規范，方便樣式復用與維護。
2.優先級低於內部樣式表。
3.以后開發推薦使用。
2.1.4擴展閱讀（導入外部樣式表的另一種方式）
<style type="text/css"> @import url("02."); </style>
【兩種導入方法的區別】
1.link標簽是標准的HTML標簽，而import不是。
2.link可以連接各種樣式的文件，而import只能導入CSS文件。
3.link使用的是鏈接的方式，相當於HTML與CSS文件的橋梁。
import使用的是導入的方式，會在文檔加載時，將CSS的代碼導入到HTML中。
4.link在網頁邊加載的時候邊鏈接CSS文件，而import會在網頁完全加載之后，在導入CSS文件。
2.2CSS常用選擇器
2.2.1標簽選擇器
1.寫法：HTML標簽名{樣式屬性：樣式屬性值；--}
2.作用選中頁面中所有對應的標簽。
2.2.2類選擇器
1.寫法：.選擇器名稱{}
調用：在需要修改樣式的標簽上，使用class="選擇器名稱"，調用對應選擇器。
2.作用：修改所有調用選擇器的標簽。
3.優先級高於標簽選擇器。
2.2.3ID選擇器
1.寫法：#選擇器名稱{}
調用：在需要修改樣式的標簽上，使用id="選擇器名稱"，調用對應選擇器。
2.ID是唯一的，同一頁面只能有一個ID
3.優先級大於class選擇器。
2.2.4通用選擇器
1.寫法：*{}
2.作用：選中頁面中所有標簽。
3.優先級最低。
2.2.5后代選擇器
1.寫法：選擇器1 選擇器2 選擇器3...{}（中間加空格）
例子：div .li{}需滿足，div里面的class="li" 的元素。可以是子代，也可以是后代。
2.2.6子代選擇器
1.寫法：選擇器1>選擇器2>選擇器3...{}（大於號隔開）
例如：div>ul{}則ul必須是div的直接子代。
2.優先級：近者優先，越精確越優先。
2.2.7交集選擇器
1.寫法：選擇器1選擇器2...{}（中間什么都不寫）
例如：.li#li{}元素必須同時具備class="li",id="li"才能生效。
2.2.8並集選擇器
1.寫法：選擇器1,選擇器2...{}（用逗號隔開）
例如：.li,#li{}元素只要具備class="li"或者id="li"就能生效。
2.2.9偽類選擇器
1.寫法：選擇器名稱：偽類狀態{}
2.常用偽類狀態
link：未訪問狀態
visited：已訪問狀態
hover：鼠標之上狀態
actived：激活選定狀態
focus：獲得焦點（input常用）
3.超鏈接多種偽類共存時順序：
link（visited）hover actived
4.使兩個控件同時對鼠標事件做出反應的寫法：
共同父容器選擇器：偽類狀態 控件選擇器{
對應控件事件}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS常用選擇器</title> <!--頁面中插入CSS的寫法，需使用style標簽包裹。type="text/css"--> <style type="text/css"> li{ color: red; } /*【標簽選擇器】 * 1.寫法：HTML標簽名{樣式屬性：樣式屬性值；--} * 2.作用選中頁面中所有對應的標簽。*/ .li{ color: orange; } /*【類選擇器】 * 1.寫法：.選擇器名稱{} * 調用：在需要修改樣式的標簽上，使用class="選擇器名稱"，調用對應選擇器。 * 2.作用：修改所有調用選擇器的標簽。 * 3.優先級高於標簽選擇器。*/ #li{ color: yellow; } /** 【ID選擇器】 * 1.寫法：#選擇器名稱{} * 調用：在需要修改樣式的標簽上，使用id="選擇器名稱"，調用對應選擇器。 * 2.ID是唯一的，同一頁面只能有一個ID * 3.優先級大於class選擇器。*/ *{ font-size: 20px; background-color: aqua; } /*【通用選擇器】 * 1.寫法：*{} * 2.作用：選中頁面中所有標簽。 * 3.優先級最低。*/ div li{ color: green; } /*【后代選擇器】 * 1.寫法：選擇器1 選擇器2 選擇器3...{} * 例子：div .li{}需滿足，div里面的class="li" 的元素。可以是子代，也可以是后代。 * 【子代選擇器】 * 1.寫法：選擇器1>選擇器2>選擇器3...{} * 例如：div>ul{}則ul必須是div的直接子代。 * 2.優先級：近者優先，越精確越優先。 * 【偽類選擇器】 * * * */ .li#li{ color: blue; } .li,#li{ color: darkviolet; } a:link{ color: black; } a:visited{ color: blue; } a:hover{ color: red; } a:active{ color: yellow; } input:hover{ color: red; } input:active{ color: blue; } input:focus{ color: yellow; } </style> </head> <body> <div> <ul> <li class="li" id="li">列表第一項</li> <li>列表第二項</li> <li class="li">列表第三項</li> <li id="li">列表第四項</li> </ul> </div> <ul> <li class="li">列表第一項</li> <li>列表第二項</li> <li class="li">列表第三項</li> <li id="li">列表第四項</li> </ul> <a href="03.CSS常用文本屬性.html" target="_blank"> This is a chaolianjie</a> <input type="text" name="text" id="text" /> </body> </html>
【擴展閱讀】
2.2.1選擇器的優先級
1.第一原則：近者優先，最內層選擇器要大於外層。
例如： div ul li>div #ul li在ul 內層，所以li標簽選擇器能覆蓋#ul id選擇器
2.當作用在同一層時，ID選擇器>class選擇器>標簽選擇器。
例如：div #li>div .li>div li。只要最后一個選擇器都作用與li 那么無論之前有多少嵌套，均沒有選擇關系。
3.當作用於同一層，而且最后一層為同等選擇器
例如：div ul li>div li作用范圍選的更精准，則優先級更高。
4.當優先級完全相同時，寫在后面的選擇器會覆蓋選在后面的選擇器。
2.2.2選擇器的命名規范
1.只能使用字母數字下划線。
2.開頭不能是數字。