02CSS繼承，層疊和優先級07
day07
CSS繼承和層疊
CSS繼承
好處：
1.父元素設置樣式，子元素可以繼承部分屬性
2.減少代碼
CSS層疊
可以定義多個樣式
不沖突時，多個樣式可層疊為一個
沖突時，按不同樣式規則優先級來應用樣式
CSS優先級
CSS使用優先級
CSS選擇器優先級
id選擇器>class選擇器>標簽選擇器>通配符選擇器
同類樣式多次引用，樣式表中後定義的優先級高
CSS優先級規則
同一樣式表中：
1.權值相同
就近原則
2.權值不同
CSS樣式權值高，就使用哪種樣式
選擇器權值
標簽選擇器：權值為1
類選擇器和偽類：權值為10
ID選擇器：權值為100
通配符選擇器：權值為0
行內樣式：權值為1000
!important規則
可調整樣式規則的優先級
添加在樣式規則之後，中間用空格隔開
CSS樣式命名
常用的CSS樣式命名
1）頁面結構
頁頭：header 導航:nav
頁面主體：main 側欄：sidebar
頁尾：footer 欄目：column
內容：content/container 頁面外圍控制：wrapper
容器：container 左右中：left right center
2）導航
導航：nav 左導航：leftsidebar
主導航：mainnav 右導航：rightsidebar
子導航：subnav 菜單：menu
頂導航：topnav 子菜單：submenu
邊導航：sidebar 標題：title
摘要：summary
3）功能
標誌：logo 註冊：register
廣告：banner 搜索：search
登錄：login 功能區：shop
登陸條：loginbar 標題：title
案例：
css_jc.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS繼承和層疊</title> <style type="text/css"> p{font-size: 23px} div{color: red;border: 1px solid blue;} div div{color: green;} div div{color: orange;} div{font-size: 24px} </style> </head> <body> <div> <p>CSS<span>繼承</span></p> <div>CSS層疊</div> </div> <p>CSS繼承和層疊</p> </body> </html>
css_priority.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS選擇器優先級</title> <style type="text/css"> div{color: red;} #idgreen{color: green;} /*.classblue{color: blue;} .classyellow{color: yellow;}*/ div{color: gray;} *{color: black;} b{color: purple;} /*1*/ p b{color: yellow !important;} /*2*/ .classblue{color: blue;} /*10*/ div #test2 b{color: gray;} /*102*/ #test1 p b{color: orange;} /*102*/ div p .classblue{color: red;} /*12*/ </style> </head> <body> <p>單獨使用</p> <div>使用標簽選擇器樣式</div> <div id="idgreen">使用ID樣式</div> <div class="classblue">使用class樣式</div> <!--id選擇器>標簽選擇器 class選擇器>標簽選擇器 --> <p>同一個元素引用標簽,id,class定義的樣式</p> <div class="classblue" id="idgreen">CSS樣式，同時引用標簽,id,class定義的樣式</div> <div id="idgreen" class="classblue">CSS樣式，同時引用標簽,id,class定義的樣式</div> <!-- id選擇器>class選擇器>標簽選擇器 --> <p></p> <div class="classblue classyellow">CSS優先級，藍色在前，黃色在後</div> <div class="classyellow classblue">CSS優先級，藍色在後，黃色在前</div> <div>CSS優先級</div> <!-- 優先級結果：同類樣式多次引用，樣式表中後定義的優先級高 --> <p>派生選擇器優先級</p> <div id="test1"> <h1>CSS樣式優先級</h1> <p id="test2">所謂<b class="classblue" style="color: red;">CSS優先級</b>，指CSS樣式在瀏覽器中被解析的先後順序</p> <div><b>權值相同</b>，就近原則；<b>權值不同</b>，哪個權值高，使用哪個。</div> </div> </body> </html>
02CSS繼承，層疊和優先級07