舉例詳解CSS中的繼承

CSS的繼承是由所使用的樣式屬性定義的。換句話說(shuō),當(dāng)你查看CSS屬性backgruound-color,你會(huì)看到一欄「繼承性」,也許你幾乎沒(méi)有在意過(guò)它,但是它還是十分有用的。
什么是CSS繼承
每一個(gè)元素都是文檔樹(shù)的一部分,除了最頂級(jí)的HTML元素,每個(gè)元素都有其對(duì)應(yīng)的父級(jí)元素,每一個(gè)父級(jí)元素的CSS屬性值都可以被應(yīng)用到它的子元素中去。
舉個(gè)栗子,H1標(biāo)簽包含著一個(gè)EM標(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繼承
最簡(jiǎn)單的方法就是知道CSS所有屬性中那些是默認(rèn)被繼承的,如果這個(gè)屬性被繼承,就會(huì)知道它會(huì)在元素所有子元素中生效。
我們經(jīng)常在非常頂級(jí)的元素上定義基礎(chǔ)樣式,比如BODY標(biāo)簽,如果在body中設(shè)置字體,因?yàn)槔^承,文檔中所有元素都會(huì)應(yīng)用這個(gè)字體:
- h1{font-size: 120%;}
使用「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)頁(yè)中其他值來(lái)定義,這個(gè)對(duì)于繼承屬性尤其重要。如果在body中定義font-size:1em,文檔中所有元素字體大小并不都是1em,這是因?yàn)橄馠1-H6這類元素的font-size的值是相對(duì)大小。H1默認(rèn)是網(wǎng)頁(yè)中字體最大的元素,當(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è)屬性,比如寫這么一段:
“很大的”依舊有了黃色的背景,這是因?yàn)閎ackground屬性的初始值(initial value)是transparent(透明),所以看到的黃色背景其實(shí)是h1標(biāo)簽的背景。
相關(guān)文章
- 你對(duì)CSS層疊和繼承的概念和用法你是否熟悉,這里和大家分享一下,文檔中的一個(gè)元素可能同時(shí)被多個(gè)CSS選擇器選中,每個(gè)選擇器都有一些CSS規(guī)則,這就是層疊,而所謂繼承,就2011-01-27
- 我們知道文檔中的一個(gè)元素可能同時(shí)被多個(gè)css選擇器選中,每個(gè)選擇器都有一些css規(guī)則,這就是層疊。所謂繼承,就是父元素的規(guī)則也會(huì)適用于子元素。2010-03-14
- 下面小編就為大家?guī)?lái)一篇CSS默認(rèn)可繼承樣式詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-06
CSS教程:學(xué)習(xí)CSS的繼承性-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
所謂CSS的繼承是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個(gè)網(wǎng)頁(yè)的樣式預(yù)設(shè),需要指定為其它樣式的部份設(shè)定在個(gè)別元素里即可。這項(xiàng)2008-10-17CSS樣式表中繼承關(guān)系的空格與不空格-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
這可能是一個(gè)非常簡(jiǎn)單的問(wèn)題,但是今天花一點(diǎn)點(diǎn)時(shí)間把這個(gè)簡(jiǎn)單的問(wèn)題在說(shuō)清晰一點(diǎn),相信大家對(duì)CSS的學(xué)習(xí)和認(rèn)識(shí)會(huì)很有幫助,強(qiáng)化一些概念的東西,對(duì)以后的工作效率的2008-10-17CSS教程:水平對(duì)齊(text-align)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
水平對(duì)齊(text-align),用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。 1.語(yǔ)法 text-align具體參數(shù)如下: 語(yǔ)法:text-align:left|right|center|justify 說(shuō)明:2008-10-17CSS教程:line-height屬性的繼承-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
原文:http://www.planabc.net/2008/07/25/unitless-line-heights/ 淘寶商城的detail 頁(yè)面“產(chǎn)品詳情”部分是商家自定義區(qū)塊,曾出現(xiàn)這樣一個(gè)問(wèn)題: &2008-10-17CSS教程:行高line-height屬性(2)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
相關(guān)文章:CSS教程:行高line-height屬性(1) 7.3.3行高的計(jì)算與繼承 以em、ex和百分比為單位的行高,其基數(shù)是元素本身的字體尺寸。例如有代碼如下: <pstyle=&quo2008-10-17CSS教程:理解繼承屬性及應(yīng)用-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
4.5繼承 在本書的[3.3.2繼承與層疊]一節(jié)曾經(jīng)簡(jiǎn)要介紹過(guò)繼承:(X)HTML元素可以從其父元素那里繼承部分CSS屬性,即使當(dāng)前元素并沒(méi)有定義該屬性。 4.5.1值的繼承 繼承也是2008-10-17- 下面小編就為大家?guī)?lái)一篇深入理解CSS定位與層疊。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-15