CSS三大特性之繼承性

來源:互聯網
上載者:User

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>





相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.