資訊專欄INFORMATION COLUMN
摘要：的繼承是由所使用的樣式屬性定義的。如何使用繼承最簡單的方法就是知道所有屬性中那些是默認(rèn)被繼承的，如果這個(gè)屬性被繼承，就會(huì)知道它會(huì)在元素所有子元素中生效。被繼承查看屬性，會(huì)看到它的繼承性是，也就是默認(rèn)不被繼承的。
CSS的繼承是由所使用的樣式屬性定義的。換句話說，當(dāng)你查看CSS屬性backgruound-color，你會(huì)看到一欄「繼承性」，也許你幾乎沒有在意過它，但是它還是十分有用的。
什么是CSS繼承每一個(gè)元素都是文檔樹的一部分，除了最頂級(jí)的HTML元素，每個(gè)元素都有其對(duì)應(yīng)的父級(jí)元素，每一個(gè)父級(jí)元素的CSS屬性值都可以被應(yīng)用到它的子元素中去。
舉個(gè)栗子，H1標(biāo)簽包含著一個(gè)EM標(biāo)簽：
這是一個(gè)很大的標(biāo)題
EM就是H1標(biāo)簽的子元素，任何H1中繼承的CSS屬性值會(huì)自動(dòng)在EM標(biāo)簽中生效，比如：
h1{font-size: 120%;}
由于font-size是默認(rèn)繼承的CSS屬性，"很大的"字體也會(huì)和H1一樣，被放大到120%。
如何使用CSS繼承最簡單的方法就是知道CSS所有屬性中那些是默認(rèn)被繼承的，如果這個(gè)屬性被繼承，就會(huì)知道它會(huì)在元素所有子元素中生效。
我們經(jīng)常在非常頂級(jí)的元素上定義基礎(chǔ)樣式，比如BODY標(biāo)簽，如果在body中設(shè)置字體，因?yàn)槔^承，文檔中所有元素都會(huì)應(yīng)用這個(gè)字體：
body {font-family: Arial, sans-serif; }
使用「inherit」值
每個(gè)CSS屬性的值都包括inherit，屬性被定義這個(gè)值后，即使這個(gè)屬性不是默認(rèn)繼承，也會(huì)應(yīng)用父級(jí)元素這個(gè)CSS屬性的值，比如：
body { margin: 1em; }
p { margin: inherit; }
繼承使用計(jì)算值（Computed Values）
計(jì)算值指的是這個(gè)值相對(duì)于網(wǎng)頁中其他值來定義，這個(gè)對(duì)于繼承屬性尤其重要。如果在body中定義font-size:1em，文檔中所有元素字體大小并不都是1em，這是因?yàn)橄馠1-H6這類元素的font-size的值是相對(duì)大小。H1默認(rèn)是網(wǎng)頁中字體最大的元素，當(dāng)設(shè)置body元素字體大小時(shí)，H1-H6會(huì)根據(jù)這個(gè)「平均」大小的字體計(jì)算實(shí)際的字體大小。
再舉一個(gè)例子：
這是普通文本
按照之前所述，font-size是默認(rèn)被繼承的CSS屬性，然而span字體的大小并不是p的80%，而是和p一樣大，正是因?yàn)槔^承使用的是計(jì)算值，如果p的父級(jí)元素的字體大小為30px，p的字體大小計(jì)算值為24px，span繼承的則是24px，而不是80%。
更多關(guān)于計(jì)算值可以閱讀CSS Computed Value。
background被「繼承」查看backgruound屬性，會(huì)看到它的繼承性是no，也就是默認(rèn)不被繼承的。但是瀏覽器依舊默認(rèn)「繼承」了這個(gè)屬性，比如寫這么一段：
這是一個(gè)很大的標(biāo)題
“很大的”依舊有了黃色的背景，這是因?yàn)閎ackground屬性的初始值（initial value）是transparent（透明），所以看到的黃色背景其實(shí)是h1標(biāo)簽的背景。
更多關(guān)于初始值可以閱讀CSS Initial Value。
本文翻譯自CSS Inheritance,How CSS Inheritance Works in Web Documents。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110847.html
摘要：計(jì)算屬性的計(jì)算值通常包括將相對(duì)值轉(zhuǎn)換成絕對(duì)值如單位或百分比。返回的解析值可能是計(jì)算值或應(yīng)用值。最后，計(jì)算布局尺寸比如或百分?jǐn)?shù)換算為像素值，結(jié)果即應(yīng)用值。繼承當(dāng)元素的一個(gè)繼承屬性沒有指定值時(shí)，則取父元素的同屬性的計(jì)算值。 css屬性 我覺得大部分學(xué)習(xí)前端的人應(yīng)該都沒有按照教科書一般的來學(xué)習(xí)css，可能是類似搭積木一樣，需要什么拿什么，所以可能最對(duì)一些基本的概念沒有很好的理解，這里列出的是...
摘要：在中，你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。這個(gè)過程中，用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個(gè)個(gè)打開。與此類似，會(huì)命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個(gè)重要特性就是它為css引入了變量。你可以把反復(fù)使用的css屬性值 定義成變量，然后通過變量名來引用它們，而無需重復(fù)書寫這一屬性值?；蛘撸瑢?duì)于僅使用過一 次的屬...
摘要：一樣式的繼承性作用給父元素設(shè)置一些屬性，子元素也可以使用應(yīng)用場景一般用于設(shè)置網(wǎng)頁上的一些共性信息，例如網(wǎng)頁的文字顏色，字體，文字大小等內(nèi)容。一、css樣式的繼承性: 作用：給父元素設(shè)置一些屬性，子元素也可以使用 應(yīng)用場景： 一般用于設(shè)置網(wǎng)頁上的一些共性信息，例如網(wǎng)頁的文字顏色，字體，文字大小等內(nèi)容。優(yōu)化代碼，降低工作量 注意點(diǎn)： 1.并不是所有的屬性都可以繼承，、 只有color/font-...
摘要：中的繼承實(shí)際上是父級(jí)元素對(duì)子元素的影響。如果使用的屬性為繼承屬性，則將其視為，否則則視為。張載名言警句人若志趣不遠(yuǎn)，心不在焉，雖學(xué)不成。張載效果如下代碼在我中，大家可以隨時(shí)查看。 作者：陳大魚頭 github： KRISACHAN 繼承 繼承（英語：inheritance） 是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個(gè)概念。在 CSS 中與 層疊（英語：Cascade） 一起描述了如何設(shè)置樣...
摘要：中的繼承實(shí)際上是父級(jí)元素對(duì)子元素的影響。特殊的通用屬性值為處理繼承提供了四種特殊的通用屬性值，其值如下值意義繼承的值。如果使用的屬性為繼承屬性，則將其視為，否則則視為。 作者：陳大魚頭 github： KRISACHAN 繼承 繼承（英語：inheritance） 是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個(gè)概念。在 CSS 中與 層疊（英語：Cascade） 一起描述了如何設(shè)置樣式規(guī)則，并為所有...
閱讀 3007·2023-04-26 02:29
閱讀 618·2019-08-30 15:54
閱讀 1704·2019-08-29 13:13
閱讀 632·2019-08-28 17:51
閱讀 2753·2019-08-26 13:58
閱讀 1560·2019-08-26 13:27
閱讀 2844·2019-08-26 11:39
閱讀 3475·2019-08-26 10:46
