CSS三種機制及優先順序問題

2022-03-10 00:08:21 字數 1011 閱讀 1023

為了解決衝突,css利用三種機制來達到目的:繼承、層疊和特指。

1.繼承

css中很多可以繼承的屬性都和文字有關係,比如說字型啊,顏色啊,字型大小這些,不能繼承的也有一些,比如說盒子模型裡面外邊距(margin)、內邊距(padding)、邊框(border)等。

對於能夠繼承的屬性,比如說字型大小大小,我們一般有兩種方法來寫單位,一種是用畫素(px),另一種是用百分比(例如60%),在利用百分比的時候要注意下,因為這個百分比會影響到它的後代,也就是說後代又是前者的60%,那這個後代的字型就是36%了。

2.層疊

層疊是css的核心機制,也是一種可以方便實用的改變css樣式的方法。這裡面說的層疊就是樣式表中的層疊,在文字樣式中可以一層一層疊加上去,這樣做有乙個好處是可以讓瀏覽器面對很多個屬性的時候可以通過層層篩選達到最終想要的那個值。

既然層疊這麼好用,我們來說一下它有什麼規則吧。

a.首先是要對每個元素和屬性的宣告

b.然後按照順序和權重排序

c.按特指度排序

d.順序決定權重

當然了,作者就是設計這個東西的人(就是你),使用者就是讀者,看這個東西的人,如果說使用者是特殊人士,需要放大字型大小或者改變顏色,可以強制瀏覽器載入成想要的樣式。

3.特指

乙個簡單的計分原則是,0.0.0.0,1.0.0.0比0.11.0.0大,排在前面的1比後面的100都管用。

第乙個0那裡是檢驗是否是內聯元素,如果是,則置1

第二位是id位,有幾個就加幾

第三位是class位,有幾個類、偽類和屬性就加幾

第四位是element位,有幾個元素就加幾

下面是幾個栗子:

a {}        特指度為0.0.0.1

.a{}        特指度為0.0.1.0

#a{}       特指度為0.1.0.0

.a.b c{}   特指度為0.0.2.1

#a b.c{}  特指度為0.1.1.1

css的三種引入方式及優先順序

第一 css的三種引入方式 1.行內樣式 最直接最簡單的一種,直接對html標籤使用style 例如 缺點 html頁面不純淨,檔案體積大,不利於蜘蛛爬行,後期維護不方便。2.內嵌樣式 內嵌樣式就是將css 寫在之間,並且用進行宣告,例如 優缺點 頁面使用公共css 也是每個頁面都要定義的,如果乙個...

css優先順序機制

一般情況下,優先順序如下 外部樣式 external style sheet 內部樣式 internal style sheet 內聯樣式 inline style 引用的外部樣式css後面的優先順序高於前面的優先順序。例如 優先順序ace skins.min.css assets css ace ...

設定css三種方法的優先順序

有的小夥伴問了,如果有一種情況 對於同乙個元素我們同時用了三種方法設定css樣式,那麼哪種方法真正有效呢?在下面 中就出現了這種情況 1 使用內聯式css設定 超酷的網際網路 文字為粉色。2 然後使用嵌入式css來設定文字為紅色。3 最後又使用外部式設定文字為藍色 style.css檔案中設定 但最...