《CSS權威指南》學習記錄 顏色和長度單位

2021-07-12 03:55:09 字數 2300 閱讀 9976

css中有兩類數字:整數和實數。數字型別主要作為其他值型別的基礎,某些情況下,也可以直接作為屬性的值。

百分數值幾乎總是相對於另乙個數值:可能是同一元素的另乙個屬性值,也可能是從父元素那繼承的值,或者是祖先元素的值。

css規範定義了一些顏色,這些顏色可以直接根據其名字來使用。不過,可選擇的顏色數量很少,即使大多數web瀏覽器提供了更多的命名顏色,但在大多數情況下還是不夠用~~。

任何顏色都可以由紅綠藍三原色組合而成。基於此,有以下幾種指定顏色的方式:

函式式rgb顏色

p

/*黑色*/

p/*白色*/

p/*0,255,30*/

p/*有些使用者**會進行四捨五入*/

/*小數只限於百分數記法,整數三元組不能用小數*/

關於百分數三元組和整數三元組的轉換有乙個簡單的計算公式:將百分數分別乘上255,結果再四捨五入即得到整數三元組。

十六進製制rgb顏色

p

p/*#112233的簡寫形式*/

web安全顏色wen安全顏色是指,在256色的計算機系統上總能避免抖動的顏色。web安全顏色可以表示為rgb值為20%或51(十進位制)或33(十六進製制)的倍數。0和0%也是乙個安全色。例如:

rgb(40

%,100

%,80

%);rgb(0,204,153);

#693;

所有長度單位都可以接受正數和負數(有些只接受正數),其後跟乙個2字母的單位(0後不用跟單位)。長度單位可以劃分為兩類:絕對長度單位和相對長度單位。

事實上很少使用絕對長度單位,但還是介紹一下:

1.英吋(in)

2.厘公尺(cm)

3.公釐(mm)

4.點(pt)

5.派卡(pc)

換算:1in=2.54cm=25.4mm=72pt=6pc。

絕對單位在定義列印文件的樣式表時更為有用,在此通常會以英吋、點和派卡來度量長度。

共有3種相對長度單位:em,ex,px。

1.em-height和x-height

在css中,乙個em定義為一種給定字型的font-size值。例如:如果乙個元素的font-size的值為14px,則1em的值即為14px。

ex是指所用字型中小寫x的高度。因此,如果兩個段落的文字大小都是24點,但字型不同,那麼各段相應的ex值也可能不同。然而實際上,大多數使用者**只是將ex的值置為em值的一半,因為大多數字型都沒有內建ex的值,而且算起來很麻煩。不過以後應該會有更好的方法來取代這種處理。

2.px

畫素直觀地說就是顯示器上的乙個個點。一般當我們希望能夠靈活的調節文字大小,或是讓影象隨文字的大小縮放時,最好不要用畫素來表示。不過,用畫素能非常方便的表示影象的大小,因為影象的高度和寬度本身就是畫素數。

總之,在大多數情況下還是使用相對長度單位,尤其是em和px,可以更加靈活地控制樣式。

分為絕對url和相對url(uniform resource locator)。在css中,相對url要相對於樣式表本身,而不是相對於使用該樣式表的html文件。某些瀏覽器會相對於html而不是樣式表來解釋相對url,這時就要使用絕對url。

在樣式表中鏈結外部樣式表:

@import

url(***)

;

注意,url和括號之間不能有間隔。有時乙個值需要用乙個詞去描述,這個詞就叫做關鍵字。

例如:

a

:link,a

:visited

其中,none就是乙個關鍵字。相同的關鍵字對於不同的屬性可能會有不同的行為。

inherit

inherit使乙個屬性的值與父元素的值相同。大多數情況下,屬性本身會自然繼承,但也有用處。比如:正常情況下,直接指定的樣式會優先於繼承的樣式,使用inherit就可以反過來。

1.角度值。用於定義給定的聲音從什麼位置發出。共有3種角度:度(deg)、弧度(rad)、梯度(grad)。

2.時間值。用於指定語音元素之間的延遲。可以表示為毫秒(ms)、秒(s)。

3.頻率值。用於為語音瀏覽器可以產生的聲音宣告乙個給定頻率。可以表示為赫茲(hz)、兆赫茲(mhz)。

《css權威指南》顏色和背景

可選值 inherit 初始值 使用者 決定 應用於 所有元素 是否預設繼承 是可選值 transparent inherit 初始值 transparent 應用於 所有元素 是否預設繼承 是可選值 none inherit 初始值 none 應用於 所有元素 是否預設繼承 否可選值 repeat...

《CSS權威指南》學習記錄 浮動

關鍵字 float。可接受 left right none 預設值 適用於所有元素。無繼承性。乙個元素浮動時,其他元素會 圍繞 該元素。浮動元素不會與周圍元素發生外邊距合併。如果要浮動乙個非替換元素,則必須要為其宣告乙個width。讓乙個元素浮動,它會像塊級元素一樣擺放和表現,但本質不變。幾點規則 ...

《CSS權威指南》學習記錄 列表

咖啡li 茶li 牛奶li ul 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。咖啡li 牛奶li 茶li ol 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。自定義列表不僅僅是一列專案,而是專案及其注釋的組合。自定義列表以 標籤開始。每個自定義列表項以 開始。每個自定義列表項的定義...