CSS繼承

hlcfan 發(fā)布于2019-08-28 17:51 / 600人閱讀

摘要：的繼承是由所使用的樣式屬性定義的。如何使用繼承最簡單的方法就是知道所有屬性中那些是默認被繼承的，如果這個屬性被繼承，就會知道它會在元素所有子元素中生效。被繼承查看屬性，會看到它的繼承性是，也就是默認不被繼承的。

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

什么是CSS繼承

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

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

這是一個很大的標題

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

h1{font-size: 120%;}

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

如何使用CSS繼承

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

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

body {font-family: Arial, sans-serif; }

使用「inherit」值

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

body { margin: 1em; }
p { margin: inherit; }

繼承使用計算值（Computed Values）

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

再舉一個例子：

這是普通文本

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

更多關于計算值可以閱讀CSS Computed Value。

background被「繼承」

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



這是一個很大的標題

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

更多關于初始值可以閱讀CSS Initial Value。

本文翻譯自CSS Inheritance,How CSS Inheritance Works in Web Documents。

GPU云服務器云服務器虛擬繼承單繼承多繼承函數(shù)繼承

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110847.html

css屬性的繼承、初識值、計算值、當前值、應用值

摘要：計算屬性的計算值通常包括將相對值轉換成絕對值如單位或百分比。返回的解析值可能是計算值或應用值。最后，計算布局尺寸比如或百分數(shù)換算為像素值，結果即應用值。繼承當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值。 css屬性我覺得大部分學習前端的人應該都沒有按照教科書一般的來學習css，可能是類似搭積木一樣，需要什么拿什么，所以可能最對一些基本的概念沒有很好的理解，這里列出的是...

pkhope 2019-08-29 13:19 評論0 收藏0
Sass快速入門學習筆記

摘要：在中，你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。這個過程中，用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個個打開。與此類似，會命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個重要特性就是它為css引入了變量。你可以把反復使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。或者，對于僅使用過一次的屬...

appetizerio 2019-04-23 13:44 評論0 收藏0
css樣式的繼承性、層疊性、優(yōu)先級

摘要：一樣式的繼承性作用給父元素設置一些屬性，子元素也可以使用應用場景一般用于設置網(wǎng)頁上的一些共性信息，例如網(wǎng)頁的文字顏色，字體，文字大小等內容。一、css樣式的繼承性: 作用：給父元素設置一些屬性，子元素也可以使用應用場景：一般用于設置網(wǎng)頁上的一些共性信息，例如網(wǎng)頁的文字顏色，字體，文字大小等內容。優(yōu)化代碼，降低工作量注意點： 1.并不是所有的屬性都可以繼承，、只有color/font-...

MkkHou 2019-04-23 11:44 評論0 收藏0
【Hello CSS】第七章-CSS的繼承與可變性

摘要：中的繼承實際上是父級元素對子元素的影響。如果使用的屬性為繼承屬性，則將其視為，否則則視為。張載名言警句人若志趣不遠，心不在焉，雖學不成。張載效果如下代碼在我中，大家可以隨時查看。作者：陳大魚頭 github： KRISACHAN 繼承繼承（英語：inheritance）是面向對象軟件技術當中的一個概念。在 CSS 中與層疊（英語：Cascade）一起描述了如何設置樣...

wangtdgoodluck 2019-08-30 11:27 評論0 收藏0
【Hello CSS】第七章-CSS的繼承與可變性

摘要：中的繼承實際上是父級元素對子元素的影響。特殊的通用屬性值為處理繼承提供了四種特殊的通用屬性值，其值如下值意義繼承的值。如果使用的屬性為繼承屬性，則將其視為，否則則視為。作者：陳大魚頭 github： KRISACHAN 繼承繼承（英語：inheritance）是面向對象軟件技術當中的一個概念。在 CSS 中與層疊（英語：Cascade）一起描述了如何設置樣式規(guī)則，并為所有...

dabai 2019-05-23 17:31 評論0 收藏0