css繼承是什麼意思?css哪些屬性可以繼承?

來源:互聯網
上載者:User
在css的學習過程中,我們會遇到一些屬性可以繼承,那麼,css中的繼承是什麼意思?有哪些屬性可以繼承呢?本篇文章就給大家來介紹一下css中繼承性的內容。

我們定義css繼承前,先來看一看HTML DOM(文檔樹),HTML DOM(文檔樹)是由html元素組成,文檔樹和家族樹類似,也有祖先、後代、父親、孩子和兄弟。其實很容易就可以理解,這裡就不多說了,要想瞭解更多的話可以看一下這個HTML DOM中文參考手冊。

css繼承是什麼意思?

看了文檔樹後,我們css中的繼承就可以定義為特定的css屬性向下傳遞到子孫元素。這其實也很好理解,就是指被包在內部的標籤將擁有外部標籤的樣式性,即子項目可以繼承父元素的屬性。

我們下面就用一個例子再來具體的說明一下css的繼承性是什麼。

<p>CSS<em>繼承性</em>代碼</p>

需要注意的是em是包含在p之內的。

當我們指定p的css樣式時,看看em會有什麼變化呢?

<style>p { color:red; }</style>

在瀏覽器中p標籤和em標籤的字型同時變紅。我們並沒有指定em的樣式,但em繼承了它的父親元素p的樣式特性。

看到這裡,我相信你應該非常清楚css中的繼承是什麼意思了,其實css繼承在我們寫代碼時是經常會用到的,甚至在不知不覺間就用到了。

當然了,上述例子中我們的屬性是可以被繼承的,但是並不是所有屬性都可以被繼承的,那麼css有哪些屬性可以繼承呢?下面我們來總結一下。

css有哪些屬性可以繼承?

1、css中有繼承性的屬性之字型屬性中的:

font:字型。font-family:規定元素的字型。font-weight:設定字型的粗細。

font-size:設定字型的尺寸。font-style:定義字型的風格。

font-variant:設定小型大寫字母的字型顯示文本,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字型的字母與其餘文本相比,其字型尺寸更小。

font-stretch:對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支援。

font-size-adjust:為某個元素規定一個 aspect 值,這樣就可以保持首選字型的 x-height。

2、css中有繼承性的屬性之文字屬性中的:

text-indent:文本縮排。text-align:文本水平對齊。line-height:行高。word-spacing:增加或減少單詞間的空白(即字間隔)。

letter-spacing:增加或減少字元間的空白(字元間距)。text-transform:控制文字大小寫。direction:規定文本的書寫方向。

color:文本顏色

3、css中有繼承性的屬性之元素可見度:

visibility:規定元素是否可見。

4、css中有繼承性的屬性之表格版面配置屬性:

caption-side:設定表格標題的位置。border-collapse:設定是否將表格邊框摺疊為單一邊框。

border-spacing:設定分隔儲存格邊框的距離。empty-cells:設定是否顯示表格中的空儲存格。

table-layout:設定顯示單元、行和列的演算法。

5、css中有繼承性的屬性之列表布局屬性:

list-style-type:修改用於清單項目的標誌類型。list-style-image:對各標誌使用一個映像。

list-style-position:可以確定標誌出現在清單項目內容之外還是內容內部。

list-style:簡寫列表樣式,用於把所有用於列表的屬性設定於一個聲明中。

6、css中有繼承性的屬性之產生內容屬性:

quotes:設定嵌套引用的引號類型。

7、css中有繼承性的屬性之游標屬性:

cursor:規定要顯示的游標的類型(形狀)

8、css中有繼承性的屬性之頁面樣式屬性:

page:規定元素應該被顯示的頁面特定類型。page-break-inside:設定在表格元素內部避免進行分頁的分頁行為。

windows:設定當元素內部發生分頁時必須在頁面頂部保留的最少行數。

orphans:設定當元素內部發生分頁時必須在頁面底部保留的最少行數。

9、css中有繼承性的屬性之聲音樣式屬性

speak:設定或檢索聲音是否給出。speak-punctuation:設定或檢索標點符號如何發音。

speak-numeral:設定或檢索數字如何發音。speak-header:設定或檢索表格頭與其後的一系列儲存格發生多少次關係。

speech-rate:設定或檢索發音速度。volume:設定或檢索音量。

voice-family:設定或檢索當前聲音類型。pitch:設定或檢索音高。

pitch-range:設定或檢索聲音的平滑程度。stress:和pitch-range相似。設定或檢索當前聲音波形的最高峰值。

richness:設定或檢索當前聲音的音色。azimuth:設定或檢索當前聲音的音場角度。

elevation:設定或檢索當前聲音的音源仰角。

10、所有元素可以繼承的屬性:visibility、cursor

11、內嵌元素可以繼承的屬性:

(1)字型系列屬性

(2)除text-indent、text-align之外的文本系列屬性

12、區塊層級元素可以繼承的屬性:text-indent、text-align

上面這些就是關於css繼承所給大家總結的內容了,當然了,如果你想在更進一步的去認識css繼承的有關知識,你可以去php中文網看一看css視頻教程欄目或者css3視頻教程欄目,裡面的各式css相關的視頻。

相關文章

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.