在網站建設時，CSS屬性眾多，在W3C CSS 2.0版本中共有122個標準屬性（http://www.w1.org/TR/CSS2/propidx.html），在W3C CSS 2.1版本中共有115個標準屬性（http://www.w1.org/TR/CSS21/propidx.html），其中刪除了版本中的個屬性：font-size-adjust、font-stretch、marker-off-set、marks、page、size和text-shadow。在W3CCSS 1.0版本中又新增加了20多個屬性（http://www.w1.org/Style/CSS/cur-rent(-?)work#CSS3）。
CSS屬性被分為不同的類型，如字體屬性、文本屬性、邊框屬性、邊距屬性、布局屬性、定位屬性、打印屬性等。關于CSS屬性的詳細列表和用法可以參閱CSS參考手冊。CSS屬性的名稱比較有規(guī)律，且名稱與意思緊密相連，根據意思記憶屬性名稱是一個不錯的方法。【示例】任何元素都可以包括外邊距、邊框、內邊距、寬和高等。用英文表示就是margin（外邊距，或稱為邊界）、border（邊框）、padding（內邊距，或稱為補白）、height（高）和width（寬），還有background（背景）。
外邊距按方位又可以包含margin-top、mar-gin-right、margin-bottom、margin-left共4個分支屬性，分別表示頂部外邊距、右側外邊距、底部外邊距和左側外邊距。內邊距也可以包含padding-top、padding-right、padding-bottom、padding-left、padding屬性。
邊框可以分為邊框類型、粗細和顏色，因此可以包含border-width、border-color和border-style屬性，這些屬性又可以按4個方位包含很多屬性，例如，border-width屬性又分為border-top-width、border-right-width、border-bottom-width、border-left-width和border-width屬性。
1、顏色值
顏色值包括顏色名、百分比、數值和十六進制數值。
?使用顏色名是最簡單的方法。雖然目前已經命名的顏色約有184種，但真正被各種瀏覽器支持，并且作為CSS規(guī)范推薦的顏色名稱只有16種。
不建議在網頁設計中使用顏色名，特別是大規(guī)模的使用，避免有些顏色名不被瀏覽器解析，或者不同瀏覽器對顏色的解釋差異。
?使用百分比。這是一種最常用的方法，例如：
color:rgb(100%,100%,100%);
這個聲明將紅、藍、綠3種原色都設置為最大值，結果組合顯示為白色。
相反，可以設置rgb(0%,0%,0%)為黑色。3個百分值相等將顯示灰色，同理哪個百分值大就偏向哪個原色。
?使用數值。數值范圍從0到255，例如：
color:rgb(255,255,255);
上面這個聲明將顯示白色，相反，可以設置為rgb(0,0,0)將顯示黑色。3個數值相等將顯示灰色，同理哪個數值大哪個原色的比重就會加大。
?十六進制顏色。這是最常用的取色方法，例如：
color:#ffffff;
其中要在十六進制前面加一個#顏色符號。上面這個聲明將顯示白色，相反，可以設置#000000為黑色，用RGB來描述：
color: #RRGGBB;
從0到255，實際上十進制的255正好等于十六進制的FF，一個十六進制的顏色值等于3組這樣的十六進制的值，它們按順序連接在一起就等于紅、藍、綠3種原色。
2. 絕對單位
絕對單位在網頁設計中很少使用，一般多用在傳統平面印刷中，但在特殊的場合使用絕對單位是很必要的。絕對單位包括英寸、厘米、毫米、磅和pica。
?英寸（in）：是使用最廣泛的長度單位。
?厘米（cm）：生活中最常用的長度單位。
?毫米（mm）：在研究領域使用廣泛。
?磅（pt）：在印刷領域使用廣泛，也稱點。CSS也常用pt設置字體大小，12磅的字體等于六分之一英寸大小。
?pica（pc）：在印刷領域使用，1pica等于12磅，所以也稱12點活字。
3. 相對單位
相對單位與絕對單位相比顯示大小不是固定的，它所設置的對象受屏幕分辨率、可視區(qū)域、瀏覽器設置，以及相關元素的大小等多種因素影響。
?emem單位表示元素的字體高度，它能夠根據字體的font-size屬性值來確定單位的大小。
【示例1】下面樣式代碼中，一個em等于font-size的屬性值，如果設置font-size:12pt，則line(-?)height:2em就會等于24pt。
p{/*設置段落文本屬性*/
font-size:12px;
line-height:2em;/*行高為24px*/
}
【示例2】如果設置font-size屬性的單位為em，則em的值將根據父元素的font-size屬性值來確定。
<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相對長度單位使用</p>
</div>
</body>
</html>
同理，如果父對象的font-size屬性的單位也為em，則將依次向上級元素尋找參考的font-size屬性值，如果都沒有定義，則會根據瀏覽器默認字體進行換算，默認字體一般為16px。
?ex
ex單位根據所使用的字體中小寫字母x的高度作為參考。在實際使用中，瀏覽器將通過em值除以2得到ex值。
?px
px單位是根據屏幕像素點來確定的。這樣不同的顯示分辨率就會使相同取值的px單位所顯示出來的效果截然不同。實際設計中，建議網頁設計時多使用相對長度單位em，且在某一類型的單位上使用統一的單位。如設置字體大小，根據個人使用習慣，在一個網站中，可以統一使用px或em。
4. 百分比
百分比也是一個相對單位值。百分比值總是通過另一個值來計算，一般參考父對象中相同屬性的值。例如，如果父元素寬度為500px，子元素的寬度為50%，則子元素的實際寬度為250px。
百分比可以取負值，但在使用中受到很多限制。
當前文章標題：網頁設計時的CSS屬性
當前URL：http://51zuanshi.com.cn/news/wzzz/3056.html
上一篇：網頁設計中的CSS樣式表
下一篇：網站建設時的CSS特性
