網(wǎng)頁(yè)設(shè)計(jì)時(shí)的CSS屬性

網(wǎng)站建設(shè)時(shí),CSS屬性眾多,在W3C CSS 2.0版本中共有122個(gè)標(biāo)準(zhǔn)屬性(http://www.w1.org/TR/CSS2/propidx.html),在W3C CSS 2.1版本中共有115個(gè)標(biāo)準(zhǔn)屬性(http://www.w1.org/TR/CSS21/propidx.html),其中刪除了版本中的個(gè)屬性:font-size-adjust、font-stretch、marker-off-set、marks、page、size和text-shadow。在W3CCSS 1.0版本中又新增加了20多個(gè)屬性(http://www.w1.org/Style/CSS/cur-rent(-?)work#CSS3)。

CSS屬性被分為不同的類(lèi)型,如字體屬性、文本屬性、邊框?qū)傩?、邊距屬性、布局屬性、定位屬性、打印屬性等。關(guān)于CSS屬性的詳細(xì)列表和用法可以參閱CSS參考手冊(cè)。CSS屬性的名稱比較有規(guī)律,且名稱與意思緊密相連,根據(jù)意思記憶屬性名稱是一個(gè)不錯(cuò)的方法。【示例】任何元素都可以包括外邊距、邊框、內(nèi)邊距、寬和高等。用英文表示就是margin(外邊距,或稱為邊界)、border(邊框)、padding(內(nèi)邊距,或稱為補(bǔ)白)、height(高)和width(寬),還有background(背景)。

外邊距按方位又可以包含margin-top、mar-gin-right、margin-bottom、margin-left共4個(gè)分支屬性,分別表示頂部外邊距、右側(cè)外邊距、底部外邊距和左側(cè)外邊距。內(nèi)邊距也可以包含padding-top、padding-right、padding-bottom、padding-left、padding屬性。

邊框可以分為邊框類(lèi)型、粗細(xì)和顏色,因此可以包含border-width、border-color和border-style屬性,這些屬性又可以按4個(gè)方位包含很多屬性,例如,border-width屬性又分為border-top-width、border-right-width、border-bottom-width、border-left-width和border-width屬性。

 CSS屬性值

1、顏色值

顏色值包括顏色名、百分比、數(shù)值和十六進(jìn)制數(shù)值。

?使用顏色名是最簡(jiǎn)單的方法。雖然目前已經(jīng)命名的顏色約有184種,但真正被各種瀏覽器支持,并且作為CSS規(guī)范推薦的顏色名稱只有16種。

不建議在網(wǎng)頁(yè)設(shè)計(jì)中使用顏色名,特別是大規(guī)模的使用,避免有些顏色名不被瀏覽器解析,或者不同瀏覽器對(duì)顏色的解釋差異。   

?使用百分比。這是一種最常用的方法,例如:

color:rgb(100%,100%,100%);

這個(gè)聲明將紅、藍(lán)、綠3種原色都設(shè)置為最大值,結(jié)果組合顯示為白色。

相反,可以設(shè)置rgb(0%,0%,0%)為黑色。3個(gè)百分值相等將顯示灰色,同理哪個(gè)百分值大就偏向哪個(gè)原色。   

?使用數(shù)值。數(shù)值范圍從0到255,例如:

color:rgb(255,255,255);

上面這個(gè)聲明將顯示白色,相反,可以設(shè)置為rgb(0,0,0)將顯示黑色。3個(gè)數(shù)值相等將顯示灰色,同理哪個(gè)數(shù)值大哪個(gè)原色的比重就會(huì)加大。   

?十六進(jìn)制顏色。這是最常用的取色方法,例如:

color:#ffffff;

其中要在十六進(jìn)制前面加一個(gè)#顏色符號(hào)。上面這個(gè)聲明將顯示白色,相反,可以設(shè)置#000000為黑色,用RGB來(lái)描述:

color: #RRGGBB;

從0到255,實(shí)際上十進(jìn)制的255正好等于十六進(jìn)制的FF,一個(gè)十六進(jìn)制的顏色值等于3組這樣的十六進(jìn)制的值,它們按順序連接在一起就等于紅、藍(lán)、綠3種原色。

2. 絕對(duì)單位

絕對(duì)單位在網(wǎng)頁(yè)設(shè)計(jì)中很少使用,一般多用在傳統(tǒng)平面印刷中,但在特殊的場(chǎng)合使用絕對(duì)單位是很必要的。絕對(duì)單位包括英寸、厘米、毫米、磅和pica。   

?英寸(in):是使用最廣泛的長(zhǎng)度單位。  

?厘米(cm):生活中最常用的長(zhǎng)度單位。   

?毫米(mm):在研究領(lǐng)域使用廣泛。  

?磅(pt):在印刷領(lǐng)域使用廣泛,也稱點(diǎn)。CSS也常用pt設(shè)置字體大小,12磅的字體等于六分之一英寸大小。   

?pica(pc):在印刷領(lǐng)域使用,1pica等于12磅,所以也稱12點(diǎn)活字。

3. 相對(duì)單位

相對(duì)單位與絕對(duì)單位相比顯示大小不是固定的,它所設(shè)置的對(duì)象受屏幕分辨率、可視區(qū)域、瀏覽器設(shè)置,以及相關(guān)元素的大小等多種因素影響。   

?emem單位表示元素的字體高度,它能夠根據(jù)字體的font-size屬性值來(lái)確定單位的大小。

【示例1】下面樣式代碼中,一個(gè)em等于font-size的屬性值,如果設(shè)置font-size:12pt,則line(-?)height:2em就會(huì)等于24pt。

p{/*設(shè)置段落文本屬性*/

font-size:12px;

line-height:2em;/*行高為24px*/

}

【示例2】如果設(shè)置font-size屬性的單位為em,則em的值將根據(jù)父元素的font-size屬性值來(lái)確定。

<html>

<head>

<meta http-equiv="Content-Type" 

content="text/html; charset=utf-8" />

<title>示例代碼</title>

<style type="text/css">

#main {font-size:12px;}p {font-size:2em; }

 /*字體大小將顯示為24px*/

</style>

</head>

<body>

<div id="main">

<p>em相對(duì)長(zhǎng)度單位使用</p>

</div>

</body>

</html>

同理,如果父對(duì)象的font-size屬性的單位也為em,則將依次向上級(jí)元素尋找參考的font-size屬性值,如果都沒(méi)有定義,則會(huì)根據(jù)瀏覽器默認(rèn)字體進(jìn)行換算,默認(rèn)字體一般為16px。

 ?ex

ex單位根據(jù)所使用的字體中小寫(xiě)字母x的高度作為參考。在實(shí)際使用中,瀏覽器將通過(guò)em值除以2得到ex值。   

?px

px單位是根據(jù)屏幕像素點(diǎn)來(lái)確定的。這樣不同的顯示分辨率就會(huì)使相同取值的px單位所顯示出來(lái)的效果截然不同。實(shí)際設(shè)計(jì)中,建議網(wǎng)頁(yè)設(shè)計(jì)時(shí)多使用相對(duì)長(zhǎng)度單位em,且在某一類(lèi)型的單位上使用統(tǒng)一的單位。如設(shè)置字體大小,根據(jù)個(gè)人使用習(xí)慣,在一個(gè)網(wǎng)站中,可以統(tǒng)一使用px或em。

4. 百分比

百分比也是一個(gè)相對(duì)單位值。百分比值總是通過(guò)另一個(gè)值來(lái)計(jì)算,一般參考父對(duì)象中相同屬性的值。例如,如果父元素寬度為500px,子元素的寬度為50%,則子元素的實(shí)際寬度為250px。

百分比可以取負(fù)值,但在使用中受到很多限制。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))