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