所謂css的繼承是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個(gè)網(wǎng)頁的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個(gè)別元素里即可。這項(xiàng)特性可以給網(wǎng)頁設(shè)計(jì)者提供更理想的發(fā)揮空間。。css是層疊樣式表(cascading style sheets)的簡稱。
創(chuàng)新互聯(lián)建站專注于金口河網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供金口河營銷型網(wǎng)站建設(shè)，金口河網(wǎng)站制作、金口河網(wǎng)頁設(shè)計(jì)、金口河網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造金口河網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供金口河網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
一、繼承
css的一個(gè)主要特征就是繼承，它是依賴于祖先-后代的關(guān)系的。繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代。例如一個(gè)body定義了的顏色值也會(huì)應(yīng)用到段落的文本中。下面舉例說明：
樣式定義：
body{color:red;}
應(yīng)用舉例代碼：
pcss的strong層疊和繼承/strong深入探討/p
這段代碼的應(yīng)用結(jié)果是：“css的層疊和繼承深入探討”這段話是紅顏色的，“層疊和繼承”由于應(yīng)用了strong元素，所以是粗體。這很符合制作者的意圖，也是為什么繼承是css的一部分的原因。
二、css繼承的局限性
在css中，繼承是一種非常自然的行為，我們甚至不需要考慮是否能夠這樣去做，但是繼承也有其局限性。
首先，有些屬性是不能繼承的。這沒有任何原因，只是因?yàn)樗褪沁@么設(shè)置的。舉個(gè)例子來說：border屬性，大家都知道，border屬性是用來設(shè)置元素的邊框的，它就沒有繼承性。多數(shù)邊框類屬性，比如象padding(補(bǔ)白)，margin(邊界)，背景和邊框的屬性都是不能繼承的。
三、繼承中容易引起的錯(cuò)誤
有時(shí)候繼承也會(huì)帶來些錯(cuò)誤，比如說下面這條css定義：
body{color:blue}
在有些瀏覽器中這句定義會(huì)使除表格之外的文本變成藍(lán)色。從技術(shù)上來說，這是不正確的，但是它確實(shí)存在。所以我們經(jīng)常需要借助于某些技巧，比如將css定義成這樣：
body,table,th,td{color:blue}
這樣表格內(nèi)的文字也會(huì)變成藍(lán)色。
四、多種樣式混合應(yīng)用
既然有了繼承性，那么在樣式表中的應(yīng)用上可能會(huì)有些讀者搞不清，多個(gè)樣式表同時(shí)應(yīng)用到一個(gè)對象上會(huì)發(fā)生什么情形呢？先舉個(gè)簡單的例子：
樣式定義：
.apple{color:red;}h1{color:yellow;}
應(yīng)用舉例代碼：
h1 class="apple"這兒的蘋果好紅啊/h1
應(yīng)用舉例效果：因?yàn)檫x擇符h1和.apple都匹配上面的h1元素，那么到底瀏覽器會(huì)應(yīng)用哪一個(gè)呢？通過在瀏覽器中觀察，我們發(fā)現(xiàn)這段文字應(yīng)用了.apple這個(gè)樣式，所以它顯示的是紅色。這是因?yàn)閮蓷l規(guī)則的特殊性不一樣，css規(guī)則必須這樣進(jìn)行處理。
樣式表中的特殊性描述了不同規(guī)則的相對權(quán)重，它的基本規(guī)則是：
統(tǒng)計(jì)選擇符中的id屬性個(gè)數(shù)。
統(tǒng)計(jì)選擇符中的class屬性個(gè)數(shù)。
統(tǒng)計(jì)選擇符中的html標(biāo)記名格式。
最后，按正確的順序?qū)懗鋈齻€(gè)數(shù)字，不要加空格或逗號(hào)，得到一個(gè)三位數(shù)。( 注意，你需要將數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。
以下是一個(gè)按特性分類的選擇符的列表：
h1 {color:blue;}特性值為：1
p em {color:purple;}特性值為：2
.apple {red;} 特性值為：10
p.bright {color:yellow;} 特性值為：11
p.bright em.dark {color:brown;} 特性值為：22
#id316 {color:yellow} 特性值為：100
從上表可以看出#id316具有更高的特殊性，因而它有更高的權(quán)重。當(dāng)有多個(gè)規(guī)則都能應(yīng)用于同一個(gè)元素時(shí)，權(quán)重越高的樣式將被優(yōu)先采用。
五、css繼承的優(yōu)先級(jí)問題
上面我們討論了css的繼承性和特殊性，在特殊性的框架下，被繼承的特性值為0，這就意味著任何顯示聲明的規(guī)則將會(huì)覆蓋其繼承樣式。因此，不管一條規(guī)則具有多高的權(quán)重，如果沒有其他規(guī)則能應(yīng)用于這個(gè)繼承元素，那么它也只是個(gè)被繼承的規(guī)則而已，舉例說明。
樣式定義：
body { background:black;}
li { color:gray;}
ul.white { color:white}
應(yīng)用舉例代碼：
ul
li舉例列表一/li
li舉例列表二/li
li舉例列表三/li
li舉例列表四/li
/ul
有些讀者可能認(rèn)為除包含.white類的列表項(xiàng)顯示為白色外，其余所有的列表項(xiàng)都應(yīng)該是灰色的。然而情況并非如此。因?yàn)閹нx擇符li的顯式聲明的權(quán)值比從ul.white規(guī)則那里繼承過來的權(quán)值要大，所以每個(gè)列表項(xiàng)都是灰色的。
下面再來看一個(gè)例子，若給定如下所示的標(biāo)記，則em強(qiáng)調(diào)文字將會(huì)是灰色的，而非黑色，因?yàn)閑m規(guī)則的權(quán)值要大于從h1元素繼承來的權(quán)值：
樣式定義：
h1#id316 { color:black;} 特性值為：101
em { color:gray;} 特性值為：1
應(yīng)用舉例代碼：
h1 id="id316"深入探討emcss的繼承性/em/h1
這是因?yàn)榈诙lem規(guī)則的特性值(1)要比被繼承的特性值(0)要大，事實(shí)上規(guī)定h1#id316的原始特性值(101)對其繼承值沒有影響，仍舊為0。
小技巧：
如果想讓h1始終為黑色，而em文字在其他情況下紅色，那么下面的樣式表設(shè)置就是一個(gè)很好的方法：
h1,h1 em { color:black;} 特性值為：1，2
em { color:red;} 特性值為：1
給定這個(gè)規(guī)則后，除在h1元素內(nèi)的任何em文字就都是紅色，而h1內(nèi)的em文字仍舊為黑色，由于其選擇符分組，在第一條規(guī)則中就有兩條有效的規(guī)則(一條是對h1的，另一條是對h1 em的)也就有兩個(gè)特性值--每條規(guī)則一個(gè)。
六、人為定義css繼承優(yōu)先級(jí)
在制作網(wǎng)頁的過程中，我們可能想要設(shè)置某個(gè)規(guī)則比其他的規(guī)則更重要，css中允許這樣設(shè)置，它們被稱為重要規(guī)則(important rule)。這是根據(jù)其聲明的方式和它們的自然屬性來命名的。通過在一條規(guī)則的分號(hào)前插入!important這樣一個(gè)短語來標(biāo)記一條重要規(guī)則，比如說：
p.apple { color:#red !important; background:white;}
顏色值#red被標(biāo)記為!important，而背景色white未被標(biāo)記，如果需要二條規(guī)則都是重要的話，那么每條規(guī)則都需要標(biāo)上!important。
正確地放置!important的位置是很重要的，否則整條規(guī)則將為無效。!important總是放在規(guī)則聲明的最后，在分號(hào)之前。
標(biāo)記為!important的規(guī)則具有最高的權(quán)值，也就是說他沒有具體的特性值，但是比其他的權(quán)值都要大。需要注意的是，雖然制作者定義的樣式比用戶定義的樣式具有更高權(quán)值時(shí)，但!important規(guī)則恰恰相反：重要的用戶定義規(guī)則要比制作者定義的樣式具有更高權(quán)值，即使是標(biāo)記為!important的重要規(guī)則也是如此。
看了這么多文字介紹后，我們來舉個(gè)例子看一下：
樣式定義：
h1 { color:gray !important;}
應(yīng)用舉例代碼：
h1 style="color:black;"看這兒！/h1
應(yīng)用舉例效果:!important規(guī)則會(huì)覆蓋內(nèi)聯(lián)style屬性的內(nèi)容，所以結(jié)果文字是灰色的而不是黑色的。
還有最后一種需要考慮的情況：繼承值總是具有特性值0的特點(diǎn)，即使是從帶有!important的規(guī)則繼承的值也是如此，在匹配重要規(guī)則的元素之外，重要性也會(huì)隨之消失
所有元素可繼承：
內(nèi)聯(lián)樣式：
塊狀樣式：
列表樣式：
表格樣式：
CSS中可以和不可以繼承的屬性：
一、無繼承性的屬性
1、display：規(guī)定元素應(yīng)該生成的框的類型
2、文本屬性：
vertical-align：垂直文本對齊
text-decoration：規(guī)定添加到文本的裝飾
text-shadow：文本陰影效果
white-space：空白符的處理
unicode-bidi：設(shè)置文本的方向
3、盒子模型的屬性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成內(nèi)容屬性：content、counter-reset、counter-increment
7、輪廓樣式屬性：outline-style、outline-width、outline-color、outline
8、頁面樣式屬性：size、page-break-before、page-break-after
9、聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有繼承性的屬性
1、字體系列屬性
font：組合字體
font-family：規(guī)定元素的字體系列
font-weight：設(shè)置字體的粗細(xì)
font-size：設(shè)置字體的尺寸
font-style：定義字體的風(fēng)格
font-variant：設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。
font-stretch：對當(dāng)前的?font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持。
font-size-adjust：為某個(gè)元素規(guī)定一個(gè)?aspect 值，這樣就可以保持首選字體的 x-height。
2、文本系列屬性
text-indent：文本縮進(jìn)
text-align：文本水平對齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫
direction：規(guī)定文本的書寫方向
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、生成內(nèi)容屬性：quotes
7、光標(biāo)屬性：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
2、光標(biāo)屬性：cursor
四、內(nèi)聯(lián)元素可以繼承的屬性
1、字體系列屬性
2、除text-indent、text-align之外的文本系列屬性
五、塊級(jí)元素可以繼承的屬性
1、text-indent、text-align
1、新建一個(gè)html文件，命名為test.html。
2、在test.html文件內(nèi)，使用table標(biāo)簽創(chuàng)建一個(gè)表格，并使用border設(shè)置表格邊框?yàn)?px。
3、在test.html文件內(nèi)，在table標(biāo)簽內(nèi)，使用tr、td標(biāo)簽設(shè)置為兩行兩列表格。
4、在css標(biāo)簽內(nèi)，設(shè)置類名為t1的樣式，使用width屬性設(shè)置寬度為250px，使用height屬性設(shè)置高度為200px。
5、在css標(biāo)簽內(nèi)，設(shè)置類名為t2的樣式，使用font-size屬性設(shè)置文字大小為20px，使用color屬性設(shè)置文字顏色為紅色，使用text-align屬性設(shè)置文字居中。
6、在test.html文件內(nèi)，在table標(biāo)簽內(nèi)添加class屬性，把class屬性值設(shè)置為“t1 t2”,從而實(shí)現(xiàn)給表格添加兩個(gè)class樣式。
重慶分公司
重慶分公司
