CSS有三大特性,分別是繼承性,層疊性,優先順序,這裡講解繼承性
繼承性是指指被包在內部的標籤將擁有外部標籤的樣式性,即子項目可以繼承父元素的屬性,例如下面的代碼,div中包含2個p標籤,1個span標籤,當給div設定字型顏色為紅色時,他的子標籤會繼承父元素的屬性,因而會顯示紅色。 在CSS中以text-、font-、line- 開頭的屬性都是可以繼承的。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { color: red; } </style></head><body> <div> <p>蘋果</p> <p>香蕉</p> <span>葡萄</span> </div></body></html>
顯示結果如下:
但是繼承也會有其特殊性主要有以下三種:
1> a 標籤的字型顏色不能被繼承,例如將上面代碼的div標籤中代碼改為如下的代碼後,a標籤的字型顏色是不會改變的,通過頁面的F12可以查看得到,a標籤是有一個預設的 color: -webkit-link;字型顏色屬性,所以給父元素設定顏色是不能改變a標籤字型的顏色
<div> <p>蘋果</p> <p>香蕉</p> <span>葡萄</span> <a href="#">這是a標籤</a></div>
2> h標籤字型的大下也是不能被繼承的,如下代碼給父元素在設定一個字型屬性20px,在div中添加一個h2標籤,在瀏覽器中可以發現h2標籤中的字型大小不會改變,因為h2標籤中也有一個預設的預設的font-size: 1.5em;字型大小屬性,
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { color: red; font-size: 20px; } </style></head><body> <div> <p>蘋果</p> <p>香蕉</p> <span>葡萄</span> <a href="#">這是a標籤</a> <h2>這是h2標籤</h2> </div></body></html>
3> div 標籤的高度如果不設定由內容來決定(沒有內容高度為0),寬度預設由父元素繼承過來,下面的代碼就很好的示範了div的寬高,在每個div標籤後面添加了一個br標籤來強制換行,因為如果不使用br標籤來強制換行的話,div就會緊緊挨著一起,看不不出來div的高度,第一個div因為沒有內容,所以在瀏覽器上不顯示出來,而第二div裡面添加了一句話,但是高度是由裡面的內容撐出來的,第三個div裡面也是一句話,並且在內容當中使用了一個br標籤來強制換行,這樣就會發現該div的高度會比第二div的高度要高,如果繼續向div標籤裡面新增內容,高度也會隨之相應的變高。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { background-color: red; } </style></head><body> <div></div> <br/> <div>這是div標籤</div> <br/> <div>這也是<br/>div標籤</div></body></html>