首頁 > web前端 > css教學 > css屬性繼承有哪些? css中可繼承的屬性和不可繼承屬性的總結

css屬性繼承有哪些? css中可繼承的屬性和不可繼承屬性的總結

不言
發布: 2018-07-27 16:30:04
原創
15771 人瀏覽過

所謂繼承就是指html元素可以從父元素繼承一部分css屬性,即使目前元素沒有定義該屬性。那麼,css哪些屬性能繼承,哪些屬性不能繼承呢?下面我們就來看看css中屬性繼承的內容。

首先我們來看看css優先權:

!important > 行內樣式> ID選擇器> 類別選擇器> 標籤> ; 通配符> 繼承> 瀏覽器預設屬性。

常用的css不可繼承的屬性

display:規定元素應該產生的框的類型

text-decoration:規定加入到文字的裝飾

text-shadow:文字陰影效果

white-space:空白符的處理

盒子模型的屬性:width、height、margin 、border、padding

背景屬性:background

定位屬性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip 、z-index

常用的css可繼承的屬性:

font:組合字體

font-family:規定元素的字體系列

font-weight:設定字體的粗細

font-size:設定字體的尺寸

font-style:定義字體的風格

text-indent :文字縮排

text-align:文字水平對齊

line-height:行高

color:文字顏色

visibility:元素可見性

遊標屬性:cursor

所有元素可以繼承的

1、元素可見性:visibility

2、遊標屬性:cursor

內聯元素可以繼承的屬性

1、字型系列屬性

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

區塊層級元素可以繼承的屬性

text-indent、text-align

inherit(繼承)值

每一個屬性可以指定值為“inherit”,即:對於給定的元素,該屬性和它父元素相對屬性的計算值取一樣的值。繼承值通常只用作後備值,它可以透過明確地指定「inherit」而得到加強,例如:

p { font-size: inherit; }

##繼承的限制

繼承雖然減少了重複定義的麻煩,但是,有些屬性是不能繼承的,例如border(邊框)、margin(邊距)、padding(補白)和背景等。

這樣設定是有道理的,例如,為一個

設定了邊框,如果此屬性也繼承的話,那麼在這個

內所有的元素都會有邊框,這無疑會產生一個讓人眼花撩亂的結果。同樣的,影響元素位置的屬性,例如margin(邊距)和padding(補白),也不會被繼承。

  同時,瀏覽器的預設樣式也在影響著繼承的結果。例如:

body { font-size: 12px; }
登入後複製

2級標題的文字不是12px。 //

H2中文字將是標題2樣式的文字而非12px大小的文字。

  這是因為瀏覽器的預設樣式設定了

的CSS規則。

同時,有些舊版的瀏覽器可能對繼承支援的不太好,例如某些瀏覽器當遇到的時候,就會遺失所有的繼承的屬性。

 css屬性一旦繼承了不能被取消,只能重新定義樣式。

 相關文章建議:

CSS繼承元素屬性_html/css_WEB-ITnose

css中屬性值繼承如何使用

 css中屬性值繼承介紹#

以上是css屬性繼承有哪些? css中可繼承的屬性和不可繼承屬性的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板