CSS基礎語法(三) CSS的6種特性
樣式表常用寫法及特性(組合、繼承、關聯性、權值性、層疊性、重要性)
1.樣式的組合:把具有相同聲明定義的選擇符組合在一起,並用逗號隔開。-例如:段落元素p、單元格元素td和類c1可以使用相同樣式:
p,td,.c1{font-size:12pt;font-family:黑體;color:red}
2.樣式的繼承:若子元素未定義,則它將繼承上級元素的樣式的定義。但存在少數屬性不能繼承。(但註意有一些css樣式是不具有繼承性的。如border:1px solid red;)
繼承時會一直向上找,如果在父級找到了就繼承父的樣式,如果父級沒找到會去祖級去找,找到後會繼承祖級的樣式。
div{color:red;} <span>標簽會繼承<div>標簽的樣式
<div>三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</div>
3.樣式表的關聯性:
樣式表的關聯性指在某些樣式定義中,可以定義某樣式僅在某個特定元素範圍內才有效。
div>span{font-size:12pt;font-family:黑體;color:red}
4.樣式的權值性:
p和.first都匹配到了p這個標簽上,那麽會顯示哪種顏色呢?green是正確的顏色,那麽為什麽呢?是因為瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。
下面是權值的規則:
標簽的權值為1,類選擇符的權值為10,ID選擇符的權值最高為100。
p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/
5.層疊性:
最後 p 中的文本會設置為green,這個層疊很好理解,理解為後面的樣式會覆蓋前面的樣式。
p{color:red;}
p{color:green;}
<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>
6.重要性:
我們在做網頁代碼的時,有些特殊的情況需要為某些樣式設置具有最高權值,怎麽辦?這時候我們可以使用!important來解決。
如下代碼:
p{color:red!important;}
p{color:green;}
<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>
這時 p 段落中的文本會顯示的red紅色。
CSS基礎語法(三) CSS的6種特性