CSS中的繼承是什么

這篇文章主要講解了“CSS中的繼承是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS中的繼承是什么”吧！

CSS的繼承是由所使用的樣式屬性定義的。換句話說，當你查看CSS屬性backgruound-color，你會看到一欄「繼承性」，也許你幾乎沒有在意過它，但是它還是十分有用的。
什么是CSS繼承

每一個元素都是文檔樹的一部分，除了最頂級的HTML元素，每個元素都有其對應的父級元素，每一個父級元素的CSS屬性值都可以被應用到它的子元素中去。

舉個栗子，H1標簽包含著一個EM標簽：

EM就是H1標簽的子元素，任何H1中繼承的CSS屬性值會自動在EM標簽中生效，比如：

CSS Code復制內容到剪貼板

1. h2{font-size: 120%;}  

由于font-size是默認繼承的CSS屬性，"很大的"字體也會和H1一樣，被放大到120%。
如何使用CSS繼承

最簡單的方法就是知道CSS所有屬性中那些是默認被繼承的，如果這個屬性被繼承，就會知道它會在元素所有子元素中生效。

我們經常在非常頂級的元素上定義基礎樣式，比如BODY標簽，如果在body中設置字體，因為繼承，文檔中所有元素都會應用這個字體：

CSS Code復制內容到剪貼板

1. h2{font-size: 120%;}  

使用「inherit」值

每個CSS屬性的值都包括inherit，屬性被定義這個值后，即使這個屬性不是默認繼承，也會應用父級元素這個CSS屬性的值，比如：

CSS Code復制內容到剪貼板

1. body { margin: 1em; }   

2. p { margin: inherit; }  

繼承使用計算值（Computed Values）

計算值指的是這個值相對于網頁中其他值來定義，這個對于繼承屬性尤其重要。如果在body中定義font-size:1em，文檔中所有元素字體大小并不都是1em，這是因為像H1-H6這類元素的font-size的值是相對大小。H1默認是網頁中字體最大的元素，當設置body元素字體大小時，H1-H6會根據這個「平均」大小的字體計算實際的字體大小。

再舉一個例子：

按照之前所述，font-size是默認被繼承的CSS屬性，然而span字體的大小并不是p的80%，而是和p一樣大，正是因為繼承使用的是計算值，如果p的父級元素的字體大小為30px，p的字體大小計算值為24px，span繼承的則是24px，而不是80%。

更多關于計算值可以閱讀CSS Computed Value。
background被「繼承」

查看backgruound屬性，會看到它的繼承性是no，也就是默認不被繼承的。但是瀏覽器依舊默認「繼承」了這個屬性，比如寫這么一段：

“很大的”依舊有了黃色的背景，這是因為background屬性的初始值（initial value）是transparent（透明），所以看到的黃色背景其實是h2標簽的背景。

感謝各位的閱讀，以上就是“CSS中的繼承是什么”的內容了，經過本文的學習后，相信大家對CSS中的繼承是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！