css有哪些屬性可以繼承
1.背景介紹
在我們深入探討繼承之前，有必要先理解文檔樹。所有的HTMl文檔都是樹，文檔樹由HTML元素組成,文檔樹和家族樹類似，也有祖先、后代、父親、孩子、兄弟
除此之外還有必要先知道CSS的規則，CSS規則告訴瀏覽器如何去渲染HTML頁面上的特定元素。
2.知識剖析
現在我們可以進入正題了。
css樣式表繼承指的是，特定的css屬性向下傳遞到后代元素
為了看到繼承的實際應用，我們將使用下面的HTML代碼。
我們也使用CSS代碼。注意：em元素未指定樣式。
但是為什么em元素會變紅？其並沒有設置顏色樣式。
因為em元素繼承了p元素的顏色屬性。
繼承是網頁開發者更加輕松，否則我們就要對所以的子孫元素指定屬性。
CSS文件大小將會大大增加，變得更難創建與維護，同時降低了下載速度。
3.常見問題
是否所以的CSS屬性都可以繼承呢？
非也！並非所以的CSS屬性都支持繼承。
如果每個CSS屬性都繼承，對於作者而言，反而會讓事情更糟。
開發人員需要將子孫元素不需要的CSS屬性一個一個地“關掉”。
我們可以設想下，如果默認狀態下，border屬性是可以繼承的...
然后我們將border屬性應用於p元素，結果？
通常來說，僅僅那些使我們工作輕松的屬性是繼承的。
4.解決方案
那么有哪些屬性可以自動繼承呢
有繼承性的屬性：
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：文本水平對齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫
direction：規定文本的書寫方向
color：文本顏色
3、元素可見性：visibility
4、表格布局屬性：caption-side、border-collapse、border-spacing、
empty-cells、table-layout
5、列表屬性：list-style-type、list-style-image、list-style-position、list-style
6、生成內容屬性：quotes
7、光標屬性：cursor
8、頁面樣式屬性：page、page-break-inside、windows、orphans
9、聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、
speech-rate、volume、voice-family、pitch、pitch-range、
stress、richness、、azimuth、elevation
所有元素可以繼承的屬性：
1、元素可見性：visibility、opacity 2、光標屬性：cursor
內聯元素可以繼承的屬性:
1、字體系列屬性 2、除text-indent、text-align之外的文本系列屬性
塊級元素可以繼承的屬性:
1、text-indent、text-align
無繼承的屬性
1、display
2、文本屬性：vertical-align：
text-decoration：
text-shadow：
white-space：
unicode-bidi：
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
繼承中比較特殊的幾點
1、a 標簽的字體顏色不能被繼承
1、h1-h6標簽字體的大下也是不能被繼承的
因為它們都有一個默認值
5.編碼實戰
font-size的繼承是如何實現的？
實例一:像素
p 元素設置了14px的font-size大小。
實例二:百分比p 元素設置了85%的font-size大小。 p { font-size:85%;}
實例三:em單位
p 元素設置了0.85em的font-size大小。
6.擴展思考
開發者如何使用繼承書寫高效的CSS代碼。
例如，你可以設置color，font-size和font-family在body元素上。
這些屬性會被繼承到所有后代元素上。
7.參考文獻
參考一：CSS之繼承詳解
8.更多討論
1.如何讓input元素繼承字體屬性？
答：可以使用inherif屬性來繼承父級的樣式。
2.如何讓兩個使用相同類名的元素具有不同的效果?
答：可以使用偽類選擇器，比如nth-child(X),使父元素下具體第X個元素修改樣式。
3.什么情況下應該繼承特征？
答：在子元素都可以使用相同的字體，顏色，就可以在父元素寫想相同的樣式。
作者：仿佛鋒
鏈接：https://www.jianshu.com/p/fbfc6c751e34
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。