大家好，我是IT修真院深圳分院第04期學員，一枚正直善良的web程序員。

今天給大家分享一下，修真院官網 js任務中可能會使用到的知識點：

css有哪些屬性可以繼承？

1.背景介紹

在我們深入探討繼承之前，有必要先理解文檔樹。所有的HTMl文檔都是樹，文檔樹由HTML元素組成,文檔樹和家族樹類似，也有祖先、后代、父親、孩子、兄弟

祖先指任意相連，但是在文檔樹上部的元素。

后代指任意相連，但是在文檔樹下部的元素。

父輩指相連并且直接在該元素上部的元素。

子輩指相連并且直接在該元素下部的元素。

兄弟指與其他元素共享一個父輩的元素。

除此之外還有必要先知道CSS的規則，CSS規則告訴瀏覽器如何去渲染HTML頁面上的特定元素。

1:選擇器“選擇”受此規則影響的HTML頁面上的元素。??

2:聲明部分是由一對大括號以及其中任意內容組成的容器。??

3:聲明告訴瀏覽器如何去渲染頁面上被選中的元素。??

4:屬性告訴你選中元素的樣式外觀。??

5:值是你希望給屬性設置準確的樣式。

2.知識剖析

現在我們可以進入正題了。

css樣式表繼承指的是，特定的css屬性向下傳遞到后代元素

為了看到繼承的實際應用，我們將使用下面的HTML代碼。

注意: em元素在 p元素的內部。

我們也使用CSS代碼。注意：em元素未指定樣式。

在瀏覽器中， p元素和 em元素同時變紅。

但是為什么em元素會變紅？其并沒有設置顏色樣式。

因為em元素繼承了p元素的顏色屬性。

繼承是網頁開發者更加輕松，否則我們就要對所以的子孫元素指定屬性。

CSS文件大小將會大大增加，變得更難創建與維護，同時降低了下載速度。

3.常見問題

是否所以的CSS屬性都可以繼承呢？

非也！并非所以的CSS屬性都支持繼承。

如果每個CSS屬性都繼承，對于作者而言，反而會讓事情更糟。

開發人員需要將子孫元素不需要的CSS屬性一個一個地“關掉”。

我們可以設想下，如果默認狀態下，border屬性是可以繼承的...

然后我們將border屬性應用于p元素，結果？

結果在p里面em元素也有了紅色邊框。??

幸運的是，邊框是非繼承的，所以em元素是沒有邊框的。

通常來說，僅僅那些使我們工作輕松的屬性是繼承的。

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大小。

改像素值（14px）重寫了瀏覽器默認的font-size大小。在這個新值被后代繼承了。

實例二:百分比p 元素設置了85%的font-size大小。 p { font-size:85%;}? ?

?瀏覽器默認的font-size大小和百分比值被用來生成計算后的值。在這個新值被后代繼承了。??

實例三:em單位

p 元素設置了0.85em的font-size大小。

瀏覽器默認的font-size和em值（.85em）被用來生成計算后的值。在這個新值被后代繼承了。

6.擴展思考

開發者如何使用繼承書寫高效的CSS代碼。

例如，你可以設置color，font-size和font-family在body元素上。

這些屬性會被繼承到所有后代元素上。

然后你可以重寫你需要的屬性值，制定性的顏色值??

新的font-family值

以及需要的font-size值。

7.參考文獻

參考一：CSS之繼承詳解

8.更多討論

1.如何讓input元素繼承字體屬性？

答：可以使用inherif屬性來繼承父級的樣式。

2.如何讓兩個使用相同類名的元素具有不同的效果?

答：可以使用偽類選擇器，比如nth-child(X),使父元素下具體第X個元素修改樣式。

3.什么情況下應該繼承特征？

答：在子元素都可以使用相同的字體，顏色，就可以在父元素寫想相同的樣式。

感謝大家觀看！

今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚!