1. 程式人生 > >css有哪些屬性可以繼承?

css有哪些屬性可以繼承?

1.背景介紹

瞭解css樣式表的繼承,我們先從文件樹(HTML DOM)開始,文件樹由HTML元素組成,文件樹和家族樹類似,也有祖先、後代、父親、孩子、兄弟css樣式表繼承指的是,特定的css屬性向下傳遞到後代元素。

2.知識剖析

對於一些可以繼承的屬性,可以只設置上級的CSS樣式表樹形,子級(下級)不用設定,會自動繼承此CSS屬性,可以減少CSS程式碼,便於維護。那麼有哪些屬性可以自動繼承?

有繼承性的屬性:

    1、字體系列屬性
    font:組合字型
    font-family:規定元素的字體系列
    font-weight:設定字型的粗細
    font-size:設定字型的尺寸
    font-style:定義字型的風格
    font-variant:設定小型大寫字母的字型顯示文字,這意味著所有的小寫字母
            均會被轉換為大寫,但是所有使用小型大寫字型的字母與其餘文字
            相比,其字型尺寸更小。
    font-stretch:允許你使文字變寬或變窄。所有主流瀏覽器都不支援。
    font-size-adjust:為某個元素規定一個 aspect 值,字型的小寫字母 "x"
            的高度與"font-size" 高度之間的比率被稱為一個字型的 aspect 值。
            這樣就可以保持首選字型的 x-height

有繼承性的屬性:

    2、文本系列屬性
    text-indent:文字縮排
    text-align:文字水平對齊
    text-shadow:設定文字陰影
    line-height:行高
    word-spacing:增加或減少單詞間的空白(即字間隔)
    letter-spacing:增加或減少字元間的空白(字元間距)
    text-transform:控制文字大小寫
    direction:規定文字的書寫方向
    color:文字顏色

有繼承性的屬性:

3、元素可見性:visibility
4、表格佈局屬性:caption-side
            
border-collapse
empty-cells 5、列表屬性:list-style-type list-style-image list-style-position、list-style 6、設定巢狀引用的引號型別: quotes 7、游標屬性:cursor 8、還有一些不常用的;speak,page等屬性,暫不講解
所有元素可以繼承的屬性: 1、元素可見性:visibility 2、游標屬性:cursor 內聯元素可以繼承的屬性: 1、字體系列屬性 2、除text-indent、text-align之外的文本系列屬性
塊級元素可以繼承的屬性: text-indent、text-align

無繼承的屬性

    1、display
    2、文字屬性:vertical-align
                 text-decoration
    3、盒子模型的屬性:寬度、高度、內外邊距、邊框等
    4、背景屬性:背景圖片、顏色、位置等
    5、定位屬性:浮動、清除浮動、定位position等
    6、生成內容屬性:content、counter-reset、counter-increment
    7、輪廓樣式屬性:outline-style、outline-width、outline-color、outline
    8、頁面樣式屬性:size、page-break-before、page-break-after

3.常見問題

問題1:多種樣式混合應用的優先順序問題

問題2:font-size的繼承問題

4.解決方案

當有多個規則都能應用於同一個元素時,權重越高的樣式將被優先採用。”important>內聯 >ID>類 >標籤 |偽類|屬性選擇 >偽物件 >繼承 >萬用字元”

5.擴充套件思考

inherit關鍵字

inherit 關鍵字指定一個屬性應從父元素繼承它的值。inherit 關鍵字可用於任何 HTML 元素上的任何 CSS 屬性

6.參考文獻

問題1:font-size的繼承

答案:問題1

問題2:inherit關鍵字有哪些

答案:問題2

問題3:css有哪些可以繼承的屬性

答案:問題3