CSS 繼承與層疊

2022-07-25 04:54:09 字數 1979 閱讀 6225

一、html 的文件結構

是乙個文件樹。有祖先後代關係、父子關係、兄弟關係

二、css 繼承

1. 從父元素繼承部分 css 屬性。例如，

<


p>css <


span


>繼承


span


>


p>



p
span 元素就是 p 元素的子元素，那麼 span 元素會繼承 p 元素的部分樣式，效果如下

2. 不是所有的樣式都可以繼承

div

<


div>


<


p>css <


span


>繼承


span


>


p>


<


div>css 層疊


div>


div>
結果如下

兩個 div 元素都顯示相應的樣式，但是 p 元素和 span 元素並沒有繼承 div 的樣式進行顯示。所以並不是所有的樣式都可以繼承。

3. css 繼承還會存在一些錯誤（瀏覽器版本問題）

<


head


>


<


style 


type


="text/css"


>


body


style


>


head


>


<


body


>


<


div>


<


p>css <


span


>繼承


span


>


p>


<


div>css 層疊


div>


div>


<


p>css繼承與層疊


p>


<


table 


border


="1"


>


<


tr>


<


td>css


td><


td>繼承


td>


tr>


body


>
如果在 ie6 版本及以下的瀏覽器中，table 可能不能繼承到 body 中的樣式，要解決這一問題，可以採用群組選擇器的方法。

body,table,p,div
4. 繼承的優先順序子元素在繼承上級元素的樣式的時候，這些樣式的影響力是非常弱的，可以說，繼承的優先順序其實是比較低的。

有些標籤具有自己的樣式，例如 h1 標籤，

h1
em 即基準大小的兩倍。瀏覽器可以在設定中看見設定的字型的大小。例如 chrome 瀏覽器，預設為 中 16px，那麼 h1 的字型大小則為 32 px。

如果我們設定 body 的字型大小為 12 px ，那麼 h1 的大小就會變成 24 px。

當上級定義的樣式和預設樣式衝突的時候，此時他將會忽略繼承得來的樣式。

二、層疊

1. 可以定義多個樣式

2. 不衝突時，多個樣式可層疊為乙個

pp
3. 衝突時，按不同樣式規則優先順序來應用樣式

pp
此時，p 標籤中樣式發生了衝突，按照優先順序規則，最後應為藍色。

CSS 繼承與層疊

css 繼承 即，從父元素那繼承部分css屬性 好處 1.父元素設定樣式，子元素可以繼承部分屬性 2.減少css 注意 當元素本身的樣式與繼承而來的樣式有衝突時，將忽略繼承來的樣式，如下 chrom瀏覽器預設字型大小是16px h1 預設字型大小font size 是2em 正常字型的兩倍 因此，在...

CSS繼承與層疊

層疊優先順序 盒模型定位體系 常規流首先，css被稱為層疊樣式表，css有兩大特性 繼承性和層疊性 繼承 是給父級設定了一些屬性。子級繼承了父級的該屬性，這就是我們css的繼承。但是不是每個屬性都能繼承的。這裡我列舉一些 color font text line 像一些盒子元素，定位元素 浮動 絕對...

CSS 層疊和繼承

我們知道文件中的乙個元素可能同時被多個css選擇器選中，每個選擇器都有一些css規則，這就是層疊。這些規則有可能不矛盾的，自然這些規則將會同時起效，然而有些規則是相互衝突的，例如 html xmlns head title css cascade title style type text css ...