- Div+CSS3.0網(wǎng)頁布局案例精粹(升級版)
- 張曉景
- 1024字
- 2020-03-02 16:09:20
2.4 CSS中的單位和值
每個CSS屬性的值均有兩種指定形式:一種為指定值范圍,如float屬性,只可能應用left、right、none三種值;另一種為指定數(shù)值,如width能夠使用0~9999px或其他數(shù)學單位來指定,除像素(px)之外,CSS還提供了許多其他類型的單位幫助進行值的定義,如表2-1所示。
表2-1 CSS中的單位

對于設計者而言,為了便于統(tǒng)一與修改,建議在某一類型的單位上使用同一種單位,如字體大小,在某一個網(wǎng)站中,根據(jù)國家習慣及設計者的習慣,統(tǒng)一使用px或pt;顏色也同樣,在顏色設計中,建議使用十六進制顏色單位,以保證各瀏覽器均能解析。
2.4.1 定義顏色值
CSS提供四種方法表示RGB(三原色)值,第一種方法是使用簡單的十六進制數(shù)表示,表示為6位數(shù)字:

這表示所定義的顏色應該具有紅色值CC(204,80%),綠色值66(102,40%)和藍色值FF(255,100%),這是一種較淺的淡紫色,越接近白色(#FFFFFF),顏色越淡,當混合大量藍色和紅色時,得到紫色效果。
提示
所有RGB值是基于0~255的標度進行度量的,它們通常使用十六進制計數(shù),即使用以16為基數(shù)的數(shù)字系統(tǒng),包括0、1、2、3、4、5、6、7、8、9、A、B、C、D、E和F,數(shù)字32寫作20(2個16和0個1),數(shù)字111是6F(6個16和15個1)。
第二種方法是采用短十六進制表示法,即使用3位十六進制數(shù)表示,要將6位RGB代碼轉換為3位代碼,只需將2個連續(xù)重復的字母簡寫為1個,代碼如下:

第三種方法是提供三元RGB數(shù)字,范圍為0~255,用逗號隔開。第四種方法是用百分比表示。淡紫色的寫法如下:

當在CSS中設置任何顏色時(不只是color屬性),可以使用這些顏色值。例如,可以用任何一種類型值設置background-color或border。
提示
要使用顏色有效地設計,需要顏色圖,否則要頻繁試驗RGB值,可以在計算機旁邊放置顏色圖打印件,也可以參考電子文件,或者兩者都配備。
2.4.2 定義字體
CSS所支持的字體屬體主要包含字體、字號、顏色等,CSS所支持的字體屬性如表2-2所示。
表2-2 CSS所支持的字體屬性

由于某些原因,CSS所支持的字體屬性中并不是所有屬性都對中文文字產(chǎn)生作用,但絕大部分都可以應用到中文文字上。CSS屬性的釋義如下。
· color:用于設置文字的顏色。
· font-family:用于設置文字名稱,使用多個名稱時用逗號分隔,瀏覽器按照先后順序依次使用可用字體。
· font-size:用于設置文字的尺寸。
· font-size-adjust:設置或檢索用于對象中文本的字體名稱序列是否強制使用同一個尺寸。
· font-style:用于設置文字樣式。
· font-weight:用于設置文字的加粗樣式。
· font-variant:用于設置英文文本為小型的大寫字母字體。
· text-transform:用于設置英文文本的大小寫方式。
· text-decoration:用于設置文本的下畫線、頂畫線和刪除線。
- 角色動畫制作(下)
- 我的視頻我做主:Premiere Pro CS5實戰(zhàn)精粹
- 剪映:視頻剪輯從入門到精通(手機版)
- 中文版Photoshop CS6平面設計從新手到高手
- Photoshop CS6摳圖從新手到高手
- 行攝 Photoshop CS6后期修片高手之道
- AutoCAD基礎教程
- After Effects CS6完全自學教程
- 實戰(zhàn)應用:Photoshop CC+Lightroom6數(shù)碼照片處理
- After Effects影視特效制作208例
- 快·易·通:2天學會Photoshop CC圖像處理
- 一定要學的Photoshop風光人文攝影后期技法
- 攝影師的后期課:Photoshop基礎入門篇(修訂版)
- 中視頻+短視頻拍攝及運營從新手到高手
- Photoshop移動UI界面設計實用教程(全彩超值版)