css核心基礎總結篇 推薦

2022-09-22 01:48:11 字數 2313 閱讀 1683

今日這篇是整合前面的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   為0,0,0,1

p em  為0,0,0,2

.grape  為0,0,1,0

p.b e.a   0,0,2,2

#aa    0,程式設計客棧1,0,0

div#aa *[href]  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   +   padding-righ   +   border-right  + &nmizcjbsp;  margin-right=包含塊水平寬

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

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

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

2、這個元素有設定寬度

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

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

注意:只有margin能為負值。

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

本文位址:

CSS學習總結 基礎篇 CSS選擇器

選擇器就是根據不同需求把不同的標籤選出來,然後針對性性的進行樣式設定 通過選擇器,我們還可以實現各種複雜的指定,同時也能大量減少樣式表的 書寫量,最終書寫出來的樣式表也會變得簡潔明瞭。即把某個標籤選擇出來 示例 選擇器分為基礎選擇器和復合選擇器兩大類。基礎選擇器就是由單個選擇器構成 基礎選擇器又可以...

CSS學習總結 基礎篇 設計字型屬性

css fonts屬性可以用於定義字型系列,大小,粗細,和文字樣式 斜體,加粗,下劃線等 css使用font family屬性定義文字的字型系列 語法格式 p div 示例 doctype html en utf 8 字型屬性 title h2p style head 標題字型設定為微軟雅黑 h2 ...

CSS學習總結 基礎篇 背景的修改

css可以使用背景屬性設定背景顏色,背景,背景平鋪,背景位置,背景圖固定等。background color屬性可以定義任意元素的背景顏色。預設值是transparent 透明 示例 utf 8 表單 表單 如果需要設定背景是否平鋪,可以通過background repeat屬性來設定,有四個引數 ...