CSS3學習筆記 1 CSS樣式繼承

2022-03-12 19:36:38 字數 4472 閱讀 2507

自己在寫css時總會遇上css樣式繼承的問題,好在一般問題不大,但一直也不明白css樣式繼承的規則,最近發現了一篇文章講的不錯,因此**過來:

所謂css

的繼承是指被包在內部的標籤將擁有外部標籤的樣式性質。繼承特性最典型的應用通常發揮在整個網頁的樣式預設,需要指定為其它樣式的部份設定在個別元素裡即可。這項特性可以給網頁設計者提供更理想的發揮空間。但同時繼承也有很多規則,應用的時候容易讓人迷惑

css的乙個主要特徵就是繼承,它是依賴於祖先

-後代的關係的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。例如乙個

body

定義了的顏色值也會應用到段落的文字中。下面舉例說明:

樣式定義:body

應用舉例**:css

層疊和繼承

深入**

這段**的應用結果是:「css

的層疊和繼承深入**」這段話是紅顏色的,「層疊和繼承」由於應用了

strong

元素,所以是粗體。這很符合製作者的意圖,也是為什麼繼承是

css的一部分的原因。

1.css

繼承的侷限性 

在css

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

首先,有些屬性是不能繼承的。這沒有任何原因,只是因為它就是這麼設定的。舉個例子來說:border

屬性,大家都知道,

border

屬性是用來設定元素的邊框的,它就沒有繼承性。如下圖所示,如果繼承了邊框屬性,那麼文件看起來就會很奇怪,除非採取另外的措施關掉邊框的繼承屬性。

多數邊框類屬性,比如象padding

(補白),

margin

(邊界),背景和邊框的屬性都是不能繼承的。

2.繼承中容易引起的錯誤

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

定義:body

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

定義成這樣:

body,table,th,td

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

3.多種樣式混合應用

既然有了繼承性,那麼在樣式表中的應用上可能會有些讀者搞不清,多個樣式表同時應用到乙個物件上會發生什麼情形呢?先舉個簡單的例子:

h1應用舉例**:

應用舉例效果:因為選擇符h1

和都匹配上面的

h1元素,那麼到底瀏覽器會應用哪乙個呢?通過在瀏覽器中觀察,我們發現這段文字應用了

這個樣式,所以它顯示的是紅色。這是因為兩條規則的特殊性不一樣,

css規則必須這樣進行處理。

樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:

統計選擇符中的id

屬性個數。 

統計選擇符中的class

屬性個數。 

統計選擇符中的html

標記名格式。 

最後,按正確的順序寫出三個數字,不要加空格或逗號,得到乙個三位數。( 

注意,你需要將數字轉換成乙個以三個數字結尾的更大的數

)。相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。

以下是乙個按特性分類的選擇符的列表:

h1                         

特性值為:

1p em                     

特性值為:

2特性值為:

10 p.bright                   

特性值為:

11p.bright em.dark            

特性值為:

22#id316                    

特性值為:

100從上表我們可以看出#id316

具有更高的特殊性,因而它有更高的權重。當有多個規則都能應用於同乙個元素時,權重越高的樣式將被優先採用。

4.css繼承的優先順序問題

上面我們討論了css

的繼承性和特殊性,在特殊性的框架下,被繼承的特性值為

0,這就意味著任何顯示宣告的規則將會覆蓋其繼承樣式。因此,不管一條規則具有多高的權重,如果沒有其他規則能應用於這個繼承元素,那麼它也只是個被繼承的規則而已,舉例說明。

樣式定義:

body 

li ul.white 

應用舉例**:

有些讀者可能認為除包含.white

類的列表項顯示為白色外,其餘所有的列表項都應該是灰色的。然而情況並非如此。

為什麼會出現這樣的情況呢?因為帶選擇符li

的顯式宣告的權值比從

ul.white

規則那裡繼承過來的權值要大,所以每個列表項都是灰色的。

可能有些地方不是很好理解,大家多思考一下就會明白,平時在應用樣式表的時候多留意思考一下。

下面我們再來看乙個例子,若給定如下所示的標記,則em

強調文字將會是灰色的,而非黑色,因為

em規則的權值要大於從

h1元素繼承來的權值:

樣式定義: 

h1#id316                   

特性值為:

101em                         

特性值為:

1應用舉例**:

這是因為第二條em

規則的特性值(

1)要比被繼承的特性值(

0)要大,事實上規定

h1#id316

的原始特性值(

101)對其繼承值沒有影響,仍舊為0。

小技巧:

如果想讓h1

始終為黑色,而

em文字在其他情況下紅色,那麼下面的樣式表設定就是乙個很好的方法:h1,

h1 em                  

特性值為:1,

2em                           

特性值為:

1給定這個規則後,除在h1

元素內的任何

em文字就都是紅色,而

h1內的

em文字仍舊為黑色,由於其選擇符分組,在第一條規則中就有兩條有效的規則(一條是對

h1的,另一條是對

h1 em

的)也就有兩個特性值——每條規則乙個。

上面我們討論了多個樣式規則同時應用於同一物件時,哪個規則會被最終應用的一些情況,可能有些細心的讀者會說,那style

元素呢?對啊,

html

**中可以直接應用內聯樣式

style

的嘛。那麼它的特性值如何呢?

回答是這樣的:帶有style

的元素在

css1

下其特性值為

100,儘管類似於

#id316

這樣的id

選擇符的特性值也為

100,但在實際應用中,

style

這一權值會更高一些,因為

style

元素的值看起來要比多數普通規則的權值大。所以我們可以看出內聯樣式具有高的特性值,具體的例子我們就不舉了,大家可以自己試試。

5.人為定義css

繼承優先順序

在製作網頁的過程中,我們可能想要設定某個規則比其他的規則更重要,css

中允許這樣設定,它們被稱為重要規則(

important rule

)。這是根據其宣告的方式和它們的自然屬性來命名的。通過在一條規則的分號前插入!

important

這樣乙個短語來標記一條重要規則,比如說:

顏色值#red

被標記為

!important

,而背景色

white

未被標記,如果需要二條規則都是重要的話,那麼每條規則都需要標上

!important

。正確地放置!important

的位置是很重要的,否則整條規則將為無效。

!important

總是放在規則宣告的最後,在分號之前。

標記為!important

的規則具有最高的權值,也就是說他沒有具體的特性值,但是比其他的權值都要大。需要注意的是,雖然製作者定義的樣式比使用者定義的樣式具有更高權值時,但

!important

規則恰恰相反:重要的使用者定義規則要比製作者定義的樣式具有更高權值,即使是標記為

!important

的重要規則也是如此。

看了這麼多文字介紹後,我們來舉個例子看一下:

樣式定義:

h1 應用舉例**:

應用舉例效果:

!important

規則會覆蓋內聯

style

屬性的內容,所以結果文字是灰色的而不是黑色的。

還有最後一種需要考慮的情況:繼承值總是具有特性值0

的特點,即使是從帶有

!important

的規則繼承的值也是如此,在匹配重要規則的元素之外,重要性也會隨之消失,這點是需要我們特別注意的!

CSS自學筆記(1) CSS簡介

css cascading style sheet 級聯樣式表 是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言。同時css也是一種設計語言,是將正真的網頁表現和內容分離的設計語言。關於css的一些概述 樣式定義如何顯示html 元素 ...

css3新學習樣式

css3 1 旋轉角度 transform rotate 30deg 旋轉30度 2 圓角邊框 由小到大 border radius 25px moz border radius 25px old firefox 3 邊框陰影 box shadow box shadow 10px 10px 5px ...

CSS基礎1 CSS樣式表及樣式規則

1 css cascading style sheets 層疊樣式表。用於定義html元素的顯示形式,是w3c推出的格式化網頁內容的標準技術 2 css作為每個 設計者必須掌握的技術之一,有幾個優點 1 提高頁面瀏覽速度,比傳統文字設計方法至少節約50 以上的檔案尺寸 2 縮短改版時間,降低維護費用...