CSS: 層疊樣式表 style:樣式
修飾和美化整個網頁，實現各種不同的網頁布局風格
行內樣式的優先級最高 內部樣式和外部樣式並沒有明確的優先級，看先后書寫順序，后寫的會覆蓋先寫的
行內樣式：將css樣式直接加到html每一個標簽上，在頭部標簽書寫 類似於寫HTML的屬性 使用style="樣式名:樣式內容;" 來設置
例： <p style="color:red;">文字顏色是紅色</p>
內部樣式： <style></style>需要使用一對style標簽，一般寫在html的head標簽中
外部樣式：需要使用link標簽來引入一個css文件 rel屬性表示引入文件的類型 href屬性表示引入文件的路徑
導入樣式和外部樣式的區別：
導入樣式：加載順序是先加載HTML頁面，當所有頁面內容加載完之后，才會開始加載css，
會導致頁面剛打開的前一兩秒有短暫的沒有css效果的網頁
外部樣式：加載HTML頁面的同時一起加載CSS樣式
關於編程語言 命名要求：不能以數字開頭，不能使用特殊符號 可以使用的有 字母 數字 下划線 _ 美元符號 $
css的選擇器：
基本選擇器（元素選擇符）： 優先級：
id > 類 > 標簽 > 通配符
優先級的計算： 采用權重值計算
id 權重值 100
類 10
標簽 1
通配 0
通配選擇符： * 表示 代表匹配頁面中所有的HTML標簽，設置統一的樣式
注意：該選擇符盡量避免使用，對頁面的性能有影響
例： *{color:red;} 將頁面所有的文字顏色設置成紅色
標簽選擇符（類型選擇符）：
通過標簽名來選擇對應的HTML標簽，設置統一樣式
例： p{color:red;} 將頁面中所有的p標簽文字顏色設置成紅色
類選擇符： class屬性 每一個標簽都可以添加一個class屬性，該屬性代表類名
在css中 使用 . 來表示類選擇符
例： .co{color:green;} 將所有class名字是co的標簽設置文字顏色是綠色
ID選擇符： id屬性 每一個標簽都可以加一個id屬性，但是該屬性具有唯一性，同一個id名只允許出現一次
在css中 使用 # 來代表ID選擇符
例： #lis{color:red;} 將id名為lis的標簽設置文字顏色是紅色
關系選擇符：
包含選擇符(后代選擇器) 語法： 選擇器1 選擇器2{樣式名:樣式值;}
例： ul .lis{color:red;} 表示獲取到ul中所有后代標簽class屬性是lis的標簽，設置顏色是紅色
子選擇符 語法： 選擇器1>選擇器2{樣式名:樣式值;}
例： ul>li{color:red;} 表示獲取到ul中所有子元素是li的標簽，設置顏色是紅色
相鄰選擇符 語法： 選擇器1+選擇器2{樣式名:樣式值;}
相鄰選擇符只會選擇到下一個相鄰的兄弟標簽，不會選擇之前的兄弟標簽
例： #li3+li{color:red;} 表示選擇id是li3的標簽的下一個兄弟元素是li的標簽，設置顏色是紅色
兄弟選擇符 語法： 選擇器1~選擇器2{樣式名:樣式值;}
兄弟選擇符只會選擇當前標簽之后的所有兄弟標簽，不會選擇到前面的兄弟標簽
例： #li3~li{color:red;} 表示選擇id是li3的標簽的后面所有兄弟元素是li的標簽，設置顏色是紅色
我們把標簽 元素 節點 可以看成是一個東西就是html上面的標簽
屬性選擇器：
選擇器[屬性名]{} 選擇具有某一個屬性的一類標簽
例： p[class]{color:red;} 表示選擇具有class屬性的p標簽，設置文字顏色是紅色
選擇器[屬性名=屬性值]{} 選擇具有某一屬性，並且規定了屬性值的一類標簽
例： p[class=a1]{color:blue;} 表示選擇具有class屬性並且屬性值是a1的所有p標簽，設置文字顏色是藍色
選擇器[屬性名^=值] 選擇具有某一屬性，並且屬性值以什么值作為開頭
例： p[class^=a]{color:green;} 表示選擇具有class屬性，並且屬性值以a開頭的所有p標簽，設置顏色為綠色
選擇器[屬性名$=值] 選擇具有某一屬性，並且屬性值以什么值作為結尾
例： p[class$=a]{color:green;} 表示選擇具有class屬性，並且屬性值以a結尾的所有p標簽，設置顏色為綠色
選擇器[屬性名*=值] 選擇具有某一屬性，並且屬性值包含某一個內容
例： p[class*=a]{color:green;} 表示選擇具有class屬性，並且屬性值中帶有a的所有p標簽，設置顏色為綠色
偽類選擇器：
a:link 表示超鏈接沒有被訪問前的狀態
a:visited 表示超鏈接被訪問后的狀態
a:hover 表示鼠標懸浮在超鏈接上的狀態
a:active 表示鼠標按下但並沒有釋放是的狀態
注意 a:hover 必須位於 a:link 和 a:visited 之后，a:active 必須位於 a:hover 之后
可靠的順序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜歡(love)和討厭(hate)兩個詞來概括
li:first-child 表示選擇父元素下的第一個子元素，並且該元素是li
li:last-child 表示選擇父元素下的最后一個子元素，並且該元素是li
li:nth-child(n) 表示選擇父元素下的第n個元素，並且該元素是li
li:first-of-type 表示選擇父元素下出現的第一個li標簽
li:last-of-type 表示選擇父元素下出現的最后一個li標簽
li:nth-of-type(n) 表示選擇父元素下的第n個li標簽
odd 代表奇數
even 代表偶數
2n 代表偶數
2n+1 代表奇數
3n+1 代表隔兩行