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

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

成都創(chuàng)新互聯公司是專業(yè)的新鄉(xiāng)網站建設公司，新鄉(xiāng)接單;提供成都網站制作、做網站、外貿營銷網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行新鄉(xiāng)網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

而b唯獨和a的樣式里顏色不同本應該寫：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 的縮寫。譯作層疊樣式表單。是用于(增強)控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。

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

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

有辦法去掉從父級元素繼承下來的 CSS 樣式嗎

在div里給它加上一個類，給新加的類寫樣式。

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

首先，有些屬性是不能繼承的。這沒有任何原因，只是因為它就是這么設置的。舉個例子來說：border屬性，大家都知道，border屬性是用來設置元素的邊框的，它就沒有繼承性。如下圖所示，如果繼承了邊框屬性，那么文檔看起來就會很奇怪，除非采取另外的措施關掉邊框的繼承屬性。

多數邊框類屬性，比如象Padding（補白），Margin（邊界），背景和邊框的屬性都是不能繼承的。

擴展資料

CSS中的樣式覆蓋原則：

規(guī)則一：由于繼承而發(fā)生樣式沖突時，最近祖先獲勝（最近原則）。

strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍色。

規(guī)則二：繼承的樣式和直接指定的樣式沖突時，直接指定的樣式獲勝（最直接原則）。

strong?{color:red;}

那么根據規(guī)則二，strong中的文字最終顯示為紅色。

規(guī)則三：直接指定的樣式發(fā)生沖突時，樣式權值高者獲勝。

樣式的權值取決于樣式的選擇器，權值定義如下表。

css選擇器?權值

標簽選擇器?1

類選擇器?10

ID選擇器?100

內聯樣式?1000

偽元素(:first-child等)?1

偽類(:link等)?10

可以看到，內聯樣式的權值ID選擇器類選擇器標簽選擇器，除此以外，后代選擇器的權值為每項權值之和，比如”#nav?.current?a”的權值為100?+?10?+?1?=?111。

CSS哪些樣式屬性可以繼承

所有元素可繼承：

內聯樣式：

塊狀樣式：

列表樣式：

表格樣式：

css的三大特性：層疊，繼承、優(yōu)先級以及權重的計算

三大特性：層疊性、繼承性、優(yōu)先級

相同選擇器給設置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個沖突的樣式。層疊性主要解決樣式沖突問題。

在這里會顯示的顏色為pink，字體大小為20px。

子標簽會繼承父標簽的某些樣式

在這里p標簽會顯示紅字，20px。

行高的繼承

當同一個元素指定多個選擇器，就會有優(yōu)先級的產生

p為白色因為繼承權重為0，無論父類是什么權重都不繼承。

所以如果要給a設置樣式就要單獨設置一個a的樣式。

這里顯示的為藍色，因為權重大。

最終大豬蹄子的顏色為紅色，大肘子和豬尾巴為藍色。

如何實現CSS 類繼承呢

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

一、繼承

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

樣式定義：

body{color:red;}

應用舉例代碼：

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

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

二、css繼承的局限性

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

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

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

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

body{color:blue}

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

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

這樣表格內的文字也會變成藍色。

四、多種樣式混合應用

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

樣式定義：

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

應用舉例代碼：

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

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

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

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

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

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

最后，按正確的順序寫出三個數字，不要加空格或逗號，得到一個三位數。( 注意，你需要將數字轉換成一個以三個數字結尾的更大的數)。相應于選擇符的最終數字列表可以很容易確定較高數字特性凌駕于較低數字的。

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

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具有更高的特殊性，因而它有更高的權重。當有多個規(guī)則都能應用于同一個元素時，權重越高的樣式將被優(yōu)先采用。

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

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

樣式定義：

body { background:black;}

li { color:gray;}

ul.white { color:white}

應用舉例代碼：

ul

li舉例列表一/li

li舉例列表二/li

li舉例列表三/li

li舉例列表四/li

/ul

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

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

樣式定義：

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

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

應用舉例代碼：

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

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

小技巧：

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

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

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

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

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

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

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

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

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

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

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

樣式定義：

h1 { color:gray !important;}

應用舉例代碼：

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

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

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

【8】CSS盒子模型、樣式繼承和默認樣式

內容 content ：盒子的主要區(qū)域，盒子中的文本內容以及后代元素都顯示在內容區(qū)域中。

內邊距 padding ：內容與盒子邊界的距離。

邊框 border ：邊框顯示在盒子的邊界上。

外邊距 margin ：盒子和相鄰兄弟元素或父元素的距離。

盒子的大小=內容的大小+內邊距的大小+邊框的大小

元素默認 總寬度 = 父元素內容的寬度 - 元素自己的左右外邊距

元素默認 內容寬度 = 父元素內容的寬度 - 元素自己的左右外邊距 - 元素自己的左右邊框寬度 - 元素自己的左右內邊距

本文標題：css樣式繼承,css樣式繼承屬性
網站鏈接：http://jinyejixie.com/article4/dseceie.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站改版、電子商務、服務器托管、全網營銷推廣、品牌網站制作、網站收錄

廣告

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