怎么在css中繼承已有的css樣式？

比如a有如下的樣式：123456.a{????height:20px;????width:20px;????color:red;????margin:10px?20px;}

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、咸豐網(wǎng)絡(luò)推廣、小程序定制開發(fā)、咸豐網(wǎng)絡(luò)營銷、咸豐企業(yè)策劃、咸豐品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供咸豐建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：sd-ha.com

而b唯獨和a的樣式里顏色不同本應(yīng)該寫：123456.b{????height:20px;????width:20px;????color:blue;????margin:10px?20px;}

這時候你就可改寫：1234567891011.a,.b{????height:20px;????width:20px;????margin:10px?20px;}.a{????color:red;}.b{????color:blue;}

CSS是Cascading Style Sheet 的縮寫。譯作層疊樣式表單。是用于(增強)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。

你可以用以下三種方式將樣式表加入您的網(wǎng)頁。而最接近目標的樣式定義優(yōu)先權(quán)越高。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。

每個屬性都有一個指定的值：Inherit。它的意思是:將父對象的值等同為計算機值得到。這個值通常僅僅是備用的。顯式的聲明它可用來強調(diào)。

CSS 樣式的繼承

繼承是一種規(guī)則，CSS的某些樣式是具有繼承性的，它允許樣式不僅應(yīng)用于某個特定html標簽元素，而且應(yīng)用于其后代。

注意：有一些css樣式是不具有繼承性的。

怎么在css中繼承已有的css樣式

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è)置字體的粗細

font-size：設(shè)置字體的尺寸

font-style：定義字體的風(fēng)格

font-variant：設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。

font-stretch：對當(dāng)前的?font-family 進行伸縮變形。所有主流瀏覽器都不支持。

font-size-adjust：為某個元素規(guī)定一個?aspect 值，這樣就可以保持首選字體的 x-height。

2、文本系列屬性

text-indent：文本縮進

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、光標屬性：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、光標屬性：cursor

四、內(nèi)聯(lián)元素可以繼承的屬性

1、字體系列屬性

2、除text-indent、text-align之外的文本系列屬性

五、塊級元素可以繼承的屬性

1、text-indent、text-align

如何實現(xiàn)CSS 類繼承呢

所謂css的繼承是指被包在內(nèi)部的標簽將擁有外部標簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個網(wǎng)頁的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個別元素里即可。這項特性可以給網(wǎng)頁設(shè)計者提供更理想的發(fā)揮空間。。css是層疊樣式表(cascading style sheets)的簡稱。

一、繼承

css的一個主要特征就是繼承，它是依賴于祖先-后代的關(guān)系的。繼承是一種機制，它允許樣式不僅可以應(yīng)用于某個特定的元素，還可以應(yīng)用于它的后代。例如一個body定義了的顏色值也會應(yīng)用到段落的文本中。下面舉例說明：

樣式定義：

body{color:red;}

應(yīng)用舉例代碼：

pcss的strong層疊和繼承/strong深入探討/p

這段代碼的應(yīng)用結(jié)果是：“css的層疊和繼承深入探討”這段話是紅顏色的，“層疊和繼承”由于應(yīng)用了strong元素，所以是粗體。這很符合制作者的意圖，也是為什么繼承是css的一部分的原因。

二、css繼承的局限性

在css中，繼承是一種非常自然的行為，我們甚至不需要考慮是否能夠這樣去做，但是繼承也有其局限性。

首先，有些屬性是不能繼承的。這沒有任何原因，只是因為它就是這么設(shè)置的。舉個例子來說：border屬性，大家都知道，border屬性是用來設(shè)置元素的邊框的，它就沒有繼承性。多數(shù)邊框類屬性，比如象padding(補白)，margin(邊界)，背景和邊框的屬性都是不能繼承的。

三、繼承中容易引起的錯誤

有時候繼承也會帶來些錯誤，比如說下面這條css定義：

body{color:blue}

在有些瀏覽器中這句定義會使除表格之外的文本變成藍色。從技術(shù)上來說，這是不正確的，但是它確實存在。所以我們經(jīng)常需要借助于某些技巧，比如將css定義成這樣：

body,table,th,td{color:blue}

這樣表格內(nèi)的文字也會變成藍色。

四、多種樣式混合應(yīng)用

既然有了繼承性，那么在樣式表中的應(yīng)用上可能會有些讀者搞不清，多個樣式表同時應(yīng)用到一個對象上會發(fā)生什么情形呢？先舉個簡單的例子：

樣式定義：

.apple{color:red;}h1{color:yellow;}

應(yīng)用舉例代碼：

h1 class="apple"這兒的蘋果好紅啊/h1

應(yīng)用舉例效果：因為選擇符h1和.apple都匹配上面的h1元素，那么到底瀏覽器會應(yīng)用哪一個呢？通過在瀏覽器中觀察，我們發(fā)現(xiàn)這段文字應(yīng)用了.apple這個樣式，所以它顯示的是紅色。這是因為兩條規(guī)則的特殊性不一樣，css規(guī)則必須這樣進行處理。

樣式表中的特殊性描述了不同規(guī)則的相對權(quán)重，它的基本規(guī)則是：

統(tǒng)計選擇符中的id屬性個數(shù)。

統(tǒng)計選擇符中的class屬性個數(shù)。

統(tǒng)計選擇符中的html標記名格式。

最后，按正確的順序?qū)懗鋈齻€數(shù)字，不要加空格或逗號，得到一個三位數(shù)。( 注意，你需要將數(shù)字轉(zhuǎn)換成一個以三個數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。

以下是一個按特性分類的選擇符的列表：

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)有多個規(guī)則都能應(yīng)用于同一個元素時，權(quán)重越高的樣式將被優(yōu)先采用。

五、css繼承的優(yōu)先級問題

上面我們討論了css的繼承性和特殊性，在特殊性的框架下，被繼承的特性值為0，這就意味著任何顯示聲明的規(guī)則將會覆蓋其繼承樣式。因此，不管一條規(guī)則具有多高的權(quán)重，如果沒有其他規(guī)則能應(yīng)用于這個繼承元素，那么它也只是個被繼承的規(guī)則而已，舉例說明。

樣式定義：

body { background:black;}

li { color:gray;}

ul.white { color:white}

應(yīng)用舉例代碼：

ul

li舉例列表一/li

li舉例列表二/li

li舉例列表三/li

li舉例列表四/li

/ul

有些讀者可能認為除包含.white類的列表項顯示為白色外，其余所有的列表項都應(yīng)該是灰色的。然而情況并非如此。因為帶選擇符li的顯式聲明的權(quán)值比從ul.white規(guī)則那里繼承過來的權(quán)值要大，所以每個列表項都是灰色的。

下面再來看一個例子，若給定如下所示的標記，則em強調(diào)文字將會是灰色的，而非黑色，因為em規(guī)則的權(quán)值要大于從h1元素繼承來的權(quán)值：

樣式定義：

h1#id316 { color:black;} 　特性值為：101

em { color:gray;} 特性值為：1

應(yīng)用舉例代碼：

h1 id="id316"深入探討emcss的繼承性/em/h1

這是因為第二條em規(guī)則的特性值(1)要比被繼承的特性值(0)要大，事實上規(guī)定h1#id316的原始特性值(101)對其繼承值沒有影響，仍舊為0。

小技巧：

如果想讓h1始終為黑色，而em文字在其他情況下紅色，那么下面的樣式表設(shè)置就是一個很好的方法：

h1,h1 em { color:black;} 特性值為：1，2

em { color:red;}　特性值為：1

給定這個規(guī)則后，除在h1元素內(nèi)的任何em文字就都是紅色，而h1內(nèi)的em文字仍舊為黑色，由于其選擇符分組，在第一條規(guī)則中就有兩條有效的規(guī)則(一條是對h1的，另一條是對h1 em的)也就有兩個特性值--每條規(guī)則一個。

六、人為定義css繼承優(yōu)先級

在制作網(wǎng)頁的過程中，我們可能想要設(shè)置某個規(guī)則比其他的規(guī)則更重要，css中允許這樣設(shè)置，它們被稱為重要規(guī)則(important rule)。這是根據(jù)其聲明的方式和它們的自然屬性來命名的。通過在一條規(guī)則的分號前插入!important這樣一個短語來標記一條重要規(guī)則，比如說：

p.apple { color:#red !important; background:white;}

顏色值#red被標記為!important，而背景色white未被標記，如果需要二條規(guī)則都是重要的話，那么每條規(guī)則都需要標上!important。

正確地放置!important的位置是很重要的，否則整條規(guī)則將為無效。!important總是放在規(guī)則聲明的最后，在分號之前。

標記為!important的規(guī)則具有最高的權(quán)值，也就是說他沒有具體的特性值，但是比其他的權(quán)值都要大。需要注意的是，雖然制作者定義的樣式比用戶定義的樣式具有更高權(quán)值時，但!important規(guī)則恰恰相反：重要的用戶定義規(guī)則要比制作者定義的樣式具有更高權(quán)值，即使是標記為!important的重要規(guī)則也是如此。

看了這么多文字介紹后，我們來舉個例子看一下：

樣式定義：

h1 { color:gray !important;}

應(yīng)用舉例代碼：

h1 style="color:black;"看這兒！/h1

應(yīng)用舉例效果:!important規(guī)則會覆蓋內(nèi)聯(lián)style屬性的內(nèi)容，所以結(jié)果文字是灰色的而不是黑色的。

還有最后一種需要考慮的情況：繼承值總是具有特性值0的特點，即使是從帶有!important的規(guī)則繼承的值也是如此，在匹配重要規(guī)則的元素之外，重要性也會隨之消失

文章題目：ios繼承css樣式,css繼承性
文章起源：http://sd-ha.com/article8/hoocip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站改版、網(wǎng)站制作、關(guān)鍵詞優(yōu)化、域名注冊、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)