CSS CSS中繼承性與層疊性

2021-07-09 18:48:05 字數 1746 閱讀 8356

上篇介紹了css裡面的選擇器,接下來我們了解css中兩大特性,繼承性和層疊性

繼承性

所謂繼承,就是父元素的規則也會適用於子元素。比如給body設定為color:red;那麼他內部的元素如果沒有其他的規則設定,也都會變成紅色。

首先我們先來了解dom(文件物件模型)樹,

當使用css對乙個設定後,這樣的設定會對該元素產生作用,一級他的子元素產生作用,比如body就是html的子元素。一級一級一直下來。html是所有的祖先元素。

當你對任何乙個元素設定屬性以後,如果對body字型設定成藍色,後代字型都應該是藍色,除非某一級進行了重新設定。

多數邊框類屬性,比如象padding(補白),margin(邊界),背景和邊框的屬性都是不能繼承的。border屬性是用來設定元素的邊框的,它沒有繼承性。

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

font-family          font-size          font-style          font-variant          font-weight          

font          letter-spacing          line-height          text-align          text-align        

text-indent          text-transform          word-spacing

list-style-image       list-style-position     list-style-type              list-style

color

瀏覽棋預設字型大小16px,而body定義了字型大小(16px x 85% = 13.6px). 如果子元素沒有指定字型大小13.6px這個值將被子元素繼承。

例項:

歡迎品嚐西紅柿炒雞蛋

效果展示:

層疊特性

行內樣式》id樣式》類別樣式》標記樣式

例項:

這是第一行文字

這是第二行文字

這是第三行文字

這是第四行文字

這是第五行文字

效果展示:

第一行沒有使用類別選擇器,沒有使用id選擇器,所以用標記選擇器

第二行同時滿足p的規則,也滿足.red的規則,這是產生了衝突。以類別選擇器為準

第三行定義了類別選擇器和id選擇器,最後使用id選擇器的樣式。

第四行用到了行內樣式,又高於id選擇器,就用行內樣式的樣式

第五行用了兩個類別選擇器,預設前面的。

小結

CSS 繼承性和層疊性

繼承性 有一些屬性,當給自己設定的時候,自己的後代都繼承上了,如color text 開頭的 line 開頭的 font 開頭的。type text css divstyle head 我是段落p 我是段落p 我是段落p div body 不是所有屬性都能夠繼承,如上圖,color屬性會被繼承,但b...

css 繼承性和層疊性

css有兩大特性 繼承性和層疊性 物件導向語言都會存在繼承的概念,在物件導向語言中,繼承的特點 繼承了父類的屬性和方法。那麼我們現在主要研究css,css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承。記住 有一些屬性是可以繼承下...

CSS的繼承性和層疊性

css有兩大特性 繼承性和層疊性 物件導向語言都會存在繼承的概念,在物件導向語言中,繼承的特點 繼承了父類的屬性和方法。那麼我們現在主要研究css,css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承。記住 有一些屬性是可以繼承下...