CSS的5種屬性值

在CSS中，每個(gè)屬性的屬性值都有一定的范圍，并且不同類(lèi)型的屬性值有不同的值。對(duì)于一個(gè)屬性，必須取得正確的屬性值，才能被瀏覽器正確地解釋?zhuān)虼艘欢ㄒ迕糠N類(lèi)型的屬性值范圍。在CSS中屬性一般有以下幾種類(lèi)型：整數(shù)和實(shí)數(shù)、長(zhǎng)度值、百分比值、URL和顏色5種。

一、整數(shù)和實(shí)數(shù)

在CSS中，整數(shù)可以包括正整數(shù)、負(fù)整數(shù)和零，不能有小數(shù)。如果整數(shù)或小數(shù)后面帶有單位px，表示像素、px叫像素，這是目前來(lái)說(shuō)使用最為廣泛的一種單位，1像素也就是屏幕上的一個(gè)小方格，這個(gè)通常是看不出來(lái)的。由于顯示器有多種不同的大小，它的每一個(gè)小方格大小是有所差異的，所以像素單位的標(biāo)準(zhǔn)也不都是一樣的。整數(shù)型屬性和屬性值如下所示：

實(shí)數(shù)包括整數(shù)，而且可以有小數(shù)。CSS 3中，em用于給定字體的font-size值，例如，一個(gè)元素字體大小為12px，那么1em就是12px，如果該元素字體大小改為15px，則1em就是15px。簡(jiǎn)單來(lái)說(shuō)，無(wú)論字體大小是多少，1em總是字體的大小值。em的值總是隨著字體大小的變化而變化的。如：

P{

  Font-size：1.5em；             /*設(shè)置字號(hào)為小數(shù)1.5em*/

}

二、長(zhǎng)度值

長(zhǎng)度值可以是正整數(shù)、負(fù)整數(shù)、零和小數(shù)的任一實(shí)數(shù)。下面代碼定義了DIV層寬度為500像素，外邊距為0像素，邊框?yàn)樨?fù)數(shù)。

注意：當(dāng)長(zhǎng)度為0時(shí)可以不帶單位。

很多屬性可以使用負(fù)數(shù)的長(zhǎng)度值，如果負(fù)數(shù)的長(zhǎng)度值超出了CSS能容納的限制，此長(zhǎng)度值將被轉(zhuǎn)變?yōu)榭梢灾С值淖罱咏拈L(zhǎng)度；如果某個(gè)屬性不支持負(fù)數(shù)的長(zhǎng)度，那么這個(gè)屬性的聲明將是無(wú)效的聲明。

三、百分比值

百分比就是一個(gè)正整數(shù)加%，在CSS中百分比是一個(gè)相對(duì)值，依賴(lài)于參照的其他元素，例如：

這個(gè)例子中的div就是相對(duì)于body整個(gè)頁(yè)面框架的，意味著寬度和高度是整個(gè)頁(yè)面的50%。

四、URL

在CSS中URL是一個(gè)字符串類(lèi)型，它不分大小寫(xiě)，通常用來(lái)指定一個(gè)文件路徑。其中“/phpMyAdmin/themes/”表示圖片所在路徑，“dot.gif”表示文件名稱(chēng)。例如：

通過(guò)URL指明背景圖片文件所在的位置。

五、顏色值

顏色在CSS中有多種表達(dá)方式，包括十六進(jìn)制色、RGB顏色、RGBA顏色、HSL顏色，其中十六進(jìn)制色最為常用。

CSS 3中可以直接用英文單詞命名與之相應(yīng)的顏色，這種方法優(yōu)點(diǎn)是簡(jiǎn)單、直接、容易掌握。此處預(yù)設(shè)了16種顏色以及這16種顏色的衍生色，這16種顏色是CSS 3規(guī)范推薦的，而且一些主流的瀏覽器都能夠識(shí)別它們。

當(dāng)然，除了CSS預(yù)定義的顏色外，設(shè)計(jì)者為了使頁(yè)面色彩更加豐富，還可以使用十六進(jìn)制顏色和RGB顏色。十六進(jìn)制顏色的基本格式為#RRGGBB。其中R表示紅色，G表示綠色，B表示藍(lán)色。而RR、GG、BB最大值為FF，表示十進(jìn)制中的255，最小值為00，表示十進(jìn)制中的0.例如，#FF0000表示紅色，#00FF00表示綠色，#0000FF表示藍(lán)色，#000000表示黑色，#FFFFFF表示白色，而其他顏色分別是通過(guò)紅、綠、藍(lán)三種基本色的結(jié)合而形成的。例如，#FFFF00表示黃色，#FF00FF表示紫紅色。

如果要使用十進(jìn)制表示顏色，則需要使用RGB顏色。十進(jìn)制表示顏色，最大值為255，最小值為0.要使用RGB顏色，必須使用rgb（R，G，B），其中R、G、B分別表示紅、綠、藍(lán)的十進(jìn)制，通過(guò)這三個(gè)值的變化結(jié)合，便可以形成不同的顏色。例如，rgb（255,0,0）表示紅色，rgb（0,255,0）表示綠色，rgb（0,0,255）則表示藍(lán)色。黑色表示為rbg（0,0,0），白色表示為rgb（255,255,255）。

CSS 3新增加了HSL顏色表現(xiàn)方式。HSL色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，它通過(guò)對(duì)色調(diào)（H）、飽和度（S）、亮度（L）三個(gè)顏色通道的改變以及它們相互之間的疊加來(lái)獲得各種顏色。

RGBA也是CSS 3新增顏色模式，RGBA色彩模式是RGB色彩模式的擴(kuò)展，在紅、綠、藍(lán)三原色的基礎(chǔ)上增加了不透明度參數(shù)。

下面是使用十六進(jìn)制色設(shè)定屬性值的例子。

P{

Background-color：#0000FF；   /*設(shè)置背景顏色為十六進(jìn)制顏色值*/

}

注意：由于其他顏色表達(dá)方式不大常用，這里不再講述。