首頁 > web前端 > css教學 > 主體

css核心基礎的總結

高洛峰
發布: 2017-03-04 10:17:13
原創
1225 人瀏覽過

今日這篇是整合前面的css補充知識的。

我覺得前面的關於css的知識補充進去有點亂,今日整理整理一下。

層疊樣式表

層疊是什麼意思?為什麼這個字如此重要,以至於要出現在它的名稱裡。

層疊可以簡單地理解為衝突的解決方案。

什麼是衝突?

就是同一個元素在使用不同的選擇器選擇中後添加相同的樣式。

優先權規則可以表述為

行內樣式>ID樣式>類別樣式>標記樣式

在複雜的頁面中,某一個元素有可能會從許多地方取得樣式,例如一個網站的某一

級標題整體設定為使用綠色,而對某個特殊欄位需要使用藍色,這樣在欄位中就需

#要覆蓋通用的樣式設定。在很簡單的頁面中,這樣的特殊需求實現起來不會很難,

但是如果網站的結構很複雜,就完全有可能程式碼變得非常混亂,可能出現無法找到

某個元素的樣式來自於哪條規則的情況。因此,必須充分理解css中「層疊」的原理。

 

計算衝突樣式的優先權是一個比較複雜的過程,而不僅僅是上面這個簡單的優先權規則

可以完全描述的。但是讀者可以把一個大的原則,就是「越特殊的樣式,優先順序越高」。

 

而這樣怎麼樣才是特殊且越特殊怎麼定位,請接著看以下的內容。

特殊性:

每個選擇器都有特殊性,而如果一個元素有兩個或多個衝突的屬性聲明,特殊性高的勝出。

選擇器的特殊性由選擇器本身的元件決定。特殊性值表述為4個部分,如:0,0,0,0.

一個選擇器的具體特殊性如下確定:

對於選擇器中給定的各個ID屬性值,則在第二個部分加一:0,1,0,0。

對於選擇器中給定的各個類別屬性值、屬性選擇或偽類,則在第三個部分加一:0,0,1,0。

對於選擇器中給定的各個元素和偽元素,則在第四個部分加一:0,0,0,1。

結合符和通配選擇器對特殊性沒有任何貢獻。

但通配選擇器特殊性為零  : 即0,0,0,0。

結合符連零都沒有。

範例:

h1{color:red;}   為0,0,0,1

p em{color:purple}  為0,0,0,2

.grape{color:purple}  為0,0,1,0

#p.b e.a{color:red; }   0,0,2,2

#aa {color:red;}    0,1,0,0

p#aa *[href]{color:red;}  0,1,1,1

而第一個0是為行內樣式準備的,因為越前面,代表優先權越高,假如非零數字位置一樣,那麼先比較前面的數字的大小,

然後再往下比較,直到數字不相對,取數字大那個的優先權高。

所以才有上面的那個大致優先權規則:

行內樣式>ID樣式>類別樣式>標記樣式

它們剛好可以作為每個部分的代表,也是四個,對號上座。


重要聲明 !important   ,就是把你所需要的宣告標出來,它的優先權最高,不過它要放在宣告的值的最後。

繼承:

繼承的特殊性連零都沒有,就是沒有特殊性;

這個0特殊性有零與無特殊性有很大的差別,就是0特殊性的選擇器可以為後代加樣式,

而繼承雖然也有給後代加樣式,但有限制的,只有有繼承能力的才能加到後代元素中,如color等,而margin、padding和border這些屬性都不會加到後代裡。

相同權重的,依序比較,順序越下他的優先順序最高。

較高特殊性強於較低特殊性

所以偽類宣告順序:link-visited-hover-active

LVHA(簡寫)

當:visited在他們之後時,由於權重一樣,所以會看他們的順序,而:visited在他們之後會勝出。

當不是寫統一屬性就不會出現這種問題。所以寫同一種屬性時要注意 ! ! ! !

 

以上是css的核心基礎。

 

擴充這篇知識之外:


包含區塊:

包含區塊的寬度就是所包含的元素的父級的寬度,而父級的寬度就是包含在裡面的各個元素的

margin-left   +    border-left   +   padding-left  +   width  寬


width、margin-left、margin-right都可以設定auto;

而margin-left和margin-right同時設定auto,會在居中,但這是有條件的:

1、這個元素必須是區塊級元素並且沒有脫離文檔流

2、這個元素有設定寬度

margin-top、margin-bottom設置auto是不會垂直居中,設定成auto,它們只會等於零。

水平總長度的七大屬性,這七個屬性就是上面計算公式的屬性,他們的總和不能大於水平總長度,而margin能為負值,在計算上也不違反這個規則。

注意:只有margin能為負值。

至於margin為負值時什麼樣的,自己去體驗,這個屬性看起來挺犯規的。

以上這篇css核心基礎總結篇(推薦)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。

更多css核心基礎的總結相關文章請關注PHP中文網!



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