css有哪些屬性可以繼承?
阿新 • • 發佈:2019-02-03
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所有元素可以繼承的屬性: 1、元素可見性:visibility 2、游標屬性:cursor 內聯元素可以繼承的屬性: 1、字體系列屬性 2、除text-indent、text-align之外的文本系列屬性border-collapse empty-cells 5、列表屬性:list-style-type list-style-image list-style-position、list-style 6、設定巢狀引用的引號型別: quotes 7、游標屬性:cursor 8、還有一些不常用的;speak,page等屬性,暫不講解
無繼承的屬性
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關鍵字
6.參考文獻
問題1:font-size的繼承
答案:問題1
問題2:inherit關鍵字有哪些
答案:問題2
問題3:css有哪些可以繼承的屬性
答案:問題3