CSS基礎知識(下)

2022-09-06 16:15:10 字數 1269 閱讀 3339

稍微複雜的樣式表中都可能存在兩條甚至多條規則同時選擇乙個元素的情況。css通過一種叫作層疊(cascade)的機制來處理這種衝突。

層疊機制的原理是為規則賦予不同的重要程度。最重要的是作者樣式表,即由**開發者所寫的樣式。其次是使用者樣式表,使用者可以通過瀏覽器的設定選項,為網頁應用自己的樣式。排在最後的是瀏覽器(或使用者**)的預設樣式表,它們一般都會被作者樣式表覆蓋掉。

css允許使用者使用!important覆蓋任何規則。

層疊機制的重要性級別從高到低:

在此基礎上,規則再按選擇符的特殊性排序。特殊性高的選擇符會覆蓋特殊性低的選擇符。如果兩條規則的特殊性相等,則後定義的規則優先。

為了量化規則的特殊性,每種選擇符都對應著乙個數值。

乙個規則的特殊性就表示為其每個選擇符的累加數值。

特殊性由高到低:

如果兩條規則擁有相等的特殊性,則優先應用後定義的規則,也就是層疊機制

理解特殊性是寫好css的關鍵,而控制特殊性規則是大型**開發中最難處理的問題。利用特殊性,可以先為公用元素設定預設樣式,然後在更特殊的元素上覆蓋這些樣式。

我們應該簡化選擇符、降低特殊性。

任何直接應用給元素的樣式都會覆蓋繼承的樣式,因為繼承的樣式沒有任何特殊性。

繼承是很有用的機制,有了它就可以避免給乙個元素的所有後代重複應用相同的樣式。

把樣式放在style元素中。

a general intro

為了讓樣式表能在多個頁面中重用,通常最好把它儲存到乙個外部檔案中。

a general intro

a general intro

如果為某個元素應用樣式時,有兩個或更多特殊性相等的規則互相競爭,則後宣告的樣式勝出。

選擇以什麼方式把css載入到頁面中,決定了瀏覽器顯示頁面的速度。

1.減少http請求

2.壓縮和快取內容

3.不讓瀏覽器渲染阻塞j**ascript

CSS樣式基礎知識(下)

1 預定的顏色 2 十六進製制顏色 如 0f0f0f 3 rgb顏色 128,0,0 全紅 4 在rgb的基礎上又新增了表示透明度的alpha 5 hsl 用色調,飽和度,和透明度三個分量來表示顏色 6 hsla 在hsl的基礎上又新增了表示透明度的alpha 預定義顏色 rgb顏色 16進製制顏色...

CSS 基礎知識

選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...

CSS基礎知識

css規則有兩個主要的部分組成 選擇器,以及一條或者多條宣告h1 css內部的注釋以 開始,以 結束p id選擇器,通過 來選擇html元素 username class選擇器,通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...