自從W3C制定了代號爲Cougar
的HTML
的4.0
版本以來，存在在Web
頁面中的動態效果首次被正式的承認了，W3C
把動態超文本（Dynamic HTML
）的實現分爲了三個部分：腳本、支持動態效果的瀏覽器和CSS
。前兩者也許你經常用到，但CSS
是什麼或許你並不清楚，如果有過製作Web
頁面的經歷，你可能聽說過樣式單或風格單，如果對此你亦無耳聞，不要緊，只要你想製作出具有更多新特性的Web
頁，本文將同樣適合於你。（請使用IE4或IE5對CSS手冊中的屬性實例進行驗證）
一、什麼是CSS
？
CSS
是Cascading Style Sheet
的縮寫，有些書上把它譯爲"
層疊樣式單"
或"
級聯樣式單"
（下文簡稱"
樣式單"
），在1997
年W3C
頒佈HTML4
標準的同時也公佈了有關樣式單的第一個標準CSS1
。樣式單是對以前的HTML
（3.2
以前的HTML
版本）語法的一次重大革新，以前的HTML
版本中，各種功能的實現是通過標記元素實現的，這也造成了各個瀏覽器廠商爲了標新立意創建各種只有自家支持的標記，各種標記互相嵌套，就可以達到不同的效果，比如要在一段文字中把一部分文字變成紅色，HTML3.2
中應該是這樣的：
<p><font color=red> 這裏顯示紅色字</font></p>
而在樣式單中，把某些標記（如上例中的"font" 標記）屬性化，利用樣式單，上例可以變成：
<p style="color:red"> 這裏顯示紅色字</p>
這就是樣式單的全部功能嗎？遠遠不是！前面說過樣式單是DHTML 的一部分，建立樣式單的真正意義在於把對象真正引入了HTML ，使得可以使用腳本程序（如Javascript 、VBScript ）調用對象屬性，並且可以改變對象屬性，達到動態的目的，這在以前的HTML 中是無法實現的，如果你使用過如VB 等面向對象的編程工具，你會更快的發現，用樣式單做DHTML 是多麼容易。樣式單的另一項貢獻是簡化了HTML 中各種繁瑣的標記，使得各個標記的屬性更具有一般性和通用性，並且樣式單擴展了原先的標記功能，能夠實現更多的效果，樣式單甚至超越了Web 頁面的本身顯示功能，而把樣式擴展到多種媒體上，顯示了難以抗拒的魅力。
樣式單自從CSS1
的版本之後，又在1998
年5
月發佈了CSS2
版本，樣式單得到了更多的充實。Internet Explorer4
和Netscape Navigator4
都宣傳支持樣式單，但從各方面來看IE4
的效果都要超過NE4
，這是因爲IE4
和NE4
的Javascript
文檔模型（DOM
）不同而造成的，從表面看，二者的模型區別不大，但實質上卻是大相徑庭，IE4
的模型能夠更加容易的把動態效果引入Web
頁面，雖然現在IE4
的模型只有微軟自己支持，但它卻已被清楚的寫入了W3C
的DHTML
標準；而NE4
的樣式單並不能通過腳本調用對象的屬性，說的不好聽一點，它的樣式單只是徒有其表罷了。（Netscape
公司自己開發了一種樣式單稱作JSSS
，它利用Javascript
來定義樣式，但是並沒有得到W3C
的承認。）
二、進一步瞭解樣式單
Cascading Style Sheet
中的Cascading
是"
層疊"
的意思，也就是說在同一個Web
文檔中可以有多個樣式單存在，這些樣式單根據所在的位置，擁有不同的優先級，優先級越高，就會被最後在顯示時採用。從樣式單插入的形式來看可以分爲三種：
-
內聯式樣式單 ：它利於現有的HTML 標記，把特殊的樣式加入到那些由標記控制的信息中，比如剛纔的例子。
-
嵌入式樣式單 ：它和Javascript 一樣可以嵌入到HTML 文件的頭部中去（<html> 和<body> 標記之間），使用<Style> 和</Style> 容器裝載，例如："<style> p {color : red ; font-weight : bold} </style>" ，這樣會對頁面中所有<p> 標記都起作用。
-
外部式樣式單 ：是一種保存在外部的樣式單文件，外部文件以.CSS 爲擴展名，例如"<link rel=stylesheet href="main-sheet.css" type="text/css">" 。
在應用時可以根據需要隨意運用以上三種方式，但在實際中內聯式樣式單和嵌入式樣式單使用得更多一些。
三、樣式單的語法特徵
樣式單有自己獨特的書寫方法，掌握了它的語法特徵，再瞭解它的各種屬性，那麼你會發現在Web
頁面中運用樣式單會是多麼輕鬆。例如有一個最簡單的HTML
文檔：
<html>
<body>
<p>Text goes here …<p>
</body>
</html>
我們可以用嵌入式樣式單規定樣式。
<html>
<style>
<!--
p {color:red; font-weight : bold}
- ->
</style>
<body>
<p> 這裏顯示紅色字</p>
</bdoy>
</html>
可以看到，在這個文檔裏，多了"Style" 標記，之間用<!-- ……… - -> 註釋，以防止不能識別樣式單的低版本瀏覽器把樣式單當作內容顯示出來，然後是關鍵的一句：
p {color:red ；font-weight : bold }
這整行稱爲一個聲明（Statement ），在樣式單中，聲明分爲兩種，一種是象這樣的，叫做"rule set" ，另一種則稱爲"at-rule" 。
At-rule 以"@" 作爲關鍵字，放在元素的最前面，at-rule 通常用來對媒體（Media ）的聲明，並且如果對同一個at-rule 進行聲明，那麼只有位置靠前的會起到作用，如：
@import "subs.css"
H1
@import "list.css"
後一個At-Rule
無效。
而rule set
就象我們前面看到的樣子了，它由幾個部分組成，其中包括選擇器、屬性和屬性值。一般的書寫是這樣的：
Selector1 {property1:value1; property2:value2; ……}
Selector2 { ……}
其中剛纔例子中的"P" 代表段落標記元素，爲選擇器，"{}" 爲一個塊（Block ），表示對標記屬性的聲明（Declaration ），有多個屬性的時候使用";" 隔開，屬性在樣式單中的一般表示方法是前面是一類屬性的名稱，後面是具體屬性的名稱，中間用"-" 隔開，而在腳本中使用屬性的時候，則把"-" 去掉，並把第二部分的開頭字母大寫。屬性值的表示可以使用10 進制，16 進制數值（如#FFFFFF ），百分數（如100% ），字符串，URL （如url(http://www.mysite.com ) ）和RGB （如rgb(255,255,255) ）等多種方式表示。下面我將對其中的重點部分進行更詳細的解釋。
1
、選擇器（Selector
）
選擇器不只是文檔中的元素標記，它還可以是類（Class ，這不同於Java 或C ＋＋中的類）、ID （給予元素特殊的名稱，也便於在腳本中使用）或是元素的某種狀態（如：a:link ）。如：
<html>
<style>
<!--
p {color:red ；font-weight : bold }
.bigFont
#blueBack
-->
</style>
<body>
<p> 利用<span class="bigFont">Class</span> 和<span id="blueBack">ID</span> 顯示內容。</p>
</body>
</html>
其中.someclass 代表類，#someID 代表ID 。類和ID 也可以和元素標記合用，比如：
p.bigFont { ……}
則表示必須在某個爲bigFont
類的P
標記（<p class="bigFont">
）才執行樣式單，同樣的也適合於ID
。
爲了簡化聲明某些重複屬性的標記，可以用","
把不同的選擇器隔開，表示它們都表示成相同的屬性，如：
H1,H2
Div, p.mytext { ……}
有時我們還希望能夠在特定的範圍內使樣式單生效：
p em
元素標記間又空格隔開，表示在<p> 和</p> 間的<em> 、<em> 用紅色表示。另外還可以利用"~" 表示一個選擇器後面緊跟另一個選擇器，並且兩邊以"/" 圍住：
/ Selector1 ~ Selector2/ { ……}
表示如果Selector2
緊跟着Selector1
則使用該樣式單。
2
、屬性值的單位
在樣式單中，屬性的單位多爲長度單位，包括px （象素）、pt （磅）、em （一種排版中的單位，1em ＝12pt ）、mm （毫米）、cm （釐米）、pc （1pc ＝12pt ）、in （英寸），這些單位可以使用整數（如px ）表示，也可以使用實數（如em ）表示，並且元素中對數值還有繼承（inherit ）的關係比如：
body
H1
那麼在顯示中H1 的text-indent 屬性就不是36pt 而是45pt 。
有的屬性的單位甚至可以是負值，如margin
，可以達到一些特殊的效果，如元素之間的重疊。另外還有一些其他的單位如角度，它的單位有deg
（度）、grad
（梯度）和rad
（弧度）；頻率的單位，Hz
和kHz
，這些都是我們非常熟悉的。
3
、註釋及空格
樣式單也有註釋語句：可以用"/* ……*/" 作爲註釋標記，在瀏覽器中有一個對樣式單的分析器，它負責對樣式單的檢查，分析器將忽略註釋標記之間的內容。空格在樣式單中是有效的，如果字符之間有超過一個空格存在，它將省略其餘空格，而只保留一個，特別是在聲明某些字體的時候，空格一定不能省略。
2 要注意的方面
首先，樣式單是區分大小寫的，所以要注意拼寫；其次對於CSS2 未聲明的屬性和方法，樣式單的分析器會忽略它的存在，如：
H1 ,H2
H3 ,H4 & H5
P {color:blue ;font-variant:small-caps}
其中"&" 是樣式單中沒有的標號，第二行整個被分析器略過，第三行中的font-variant 不是一個合法屬性，也被略過（"color:blue" 有效）。
瞭解了以上規則，你就已經對樣式單入門了，下面將詳細介紹樣式單的各種屬性及屬性值。
CSS
屬性：
1
、媒體（Media
）類型
樣式單的一個最重要的特點就是它可以作用於多種媒體，比如頁面、屏幕、電子合成器等等。特定的屬性只能作用於特定的媒體，如"font-size"
屬性只對可捲動的媒體類型有效（屏幕）。
聲明一個媒體屬性可以用@import 或@media 引入：
@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
也可以在文檔標記中引入媒體：
<LINK rel="stylesheet" type="text/css" media="print" href="foo.css">
可以看出，@import 和@media 的區別在於，前者引入外部的樣式單用於媒體類型，後者直接引入媒體屬性。@import 的使用方法是@import 加樣式單文件的URL 地址再加媒體類型，可以多個媒體共用一個樣式單，媒體類型之間用" ，" 分割符分開。@media 用法則是把媒體類型放在前面，其他規則和rule-set 基本一樣。下面列出各種媒體類型：
SCREEN
：指計算機屏幕。
PRINT
：指用於打印機的不透明介質。
PROJECTION
：指用於顯示的項目。
BRAILLE
：盲文系統，指有觸覺效果的印刷品。
AURAL
：指語音電子合成器。
TV
：指電視類型的媒體。
HANDHELD
：指手持式顯示設備（小屏幕，單色）
ALL
：適合於所有媒體。
CSS 屬性：
2
、BOX
模型（BOX Model
）屬性
什麼是BOX
？CSS
把HTML
中以<somesign>
……</somesign>
的部分稱爲BOX
（容器），BOX
有三類屬性：padding
、margin
和border
。
Margin 屬性：
Margin 屬性分爲margin-top 、margin-right 、margin-bottom 、margin-left 和margin 五個屬性，分別表示BOX 裏內容離邊框的距離，它的屬性值是數值單位，可以是長度、百分比或auto ，margin 甚至可以設爲負值，造成BOX 與BOX 之間的重疊顯示，關於margin 的屬性詳見下表：
屬性名稱: 'margin-top'
、'margin-right'
、'margin-bottom'
、'margin-left'
屬性值: <margin-width>
初始值: 0
適合對象:
所有元素
是否繼承: no
百分比備註:
相對於BOX
的寬度
例如：
H1 { margin-top: 2em }
H2 { margin-right: 12.3% }
Margin 還有一個快捷的書寫方法，就是直接用margin 屬性，例如：
BODY { margin: 1em 2em 3em 2em}
等同於：
BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}
margin 屬性後面可以有四個值，中間用空格隔開（記住不是逗號），順序是" 上右下左" ，當然margin 後面可以不足四個值，例如：
BODY { margin: 2em } /* 所有的margin 都設爲2em */
BODY { margin: 1em 2em } /* 上下margin 爲1em ，右左margin 爲2em */
BODY { margin: 1em 2em 3em } /* 上margin 爲1em ，右左margin 爲2em ，下margin 爲3em*/
Padding 屬性：
Padding 屬性用來描述BOX 的邊框和內容之間插入多少空間，和margin 屬性類似，它也分爲上右下左和一個快捷方式padding ，關於padding 的屬性詳見下表：
屬性名稱: 'padding-top'
、'padding-right'
、'padding-bottom'
、'padding-left'
、'padding'
屬性值: <padding-width>
初始值: 0
適合對象:
所有元素
是否繼承: no
百分比備註:
相對於BOX
的寬度
例如：
BLOCKQUOTE { padding-top: 0.3em }
padding 屬性和margin 類似此處略去。
Border 屬性：
平時我們在查看HTML 文檔時，看到一段文字，並不會把它當作一個BOX ，實際上BOX 是有邊框的，只是平時不顯示出來罷了，而border 屬性就是用來描述BOX 邊框的。Border 屬性分爲border-width 、border-color 和border-style ，而這些屬性下面又有分支。
border-width 屬性：
border-width 屬性又分爲：border-top-width 、border-right-width 、border-bottom-width 、border-left-width 和border-width 屬性，border-width 用長度表示爲"thin/medium/thick" 或長度單位表示，下面是border-width 屬性的詳細列表：
屬性名稱: 'border-top-width'
、'border-right-width'
、'border-bottom-width'
、'border-left-width'
、'border-width'
屬性值: <border-width>
初始值: medium
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
border-width
爲快捷方式，順序爲上右下左，值之間用空格隔開。
border-color
屬性：
border-color
屬性用來顯示BOX
邊框顏色，分爲border-top-color
、border-right-color
、border-bottom-color
、border-right-color
和border-color
屬性，屬性值爲顏色，可以用十六進制表示，也可用rgb()
表示，屬性見下：
屬性名稱: 'border-top-color'
、'border-right-color'
、'border-bottom-color'
、'border-left-color'
、
'border-color'
屬性值: <color>
初始值:
元素顏色的初始值
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
border-color
爲快捷方式，順序爲上右下左，值之間用空格隔開。
border-style
屬性：
border-style 屬性用來設置BOX 對象邊框的樣式，它的屬性值爲CSS 規定的關鍵字，平常看不到border 是因爲，初始值是none 的緣故。屬性見下：
屬性名稱: 'border-top-style'
、'border-right-style'
、'border-bottom-style'
、'border-left-style'
、'border-style'
屬性值: <border-style>
初始值: none
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
border-color 爲快捷方式，順序爲上右下左，值之間用空格隔開。
屬性值的名稱和代表意義如下：
none
：無邊框。
dotted
：邊框爲點線。
dashed
：邊框爲長短線。
solid
：邊框爲實線。
double
：邊框爲雙線。
groove
、ridge
、inset
和outset
：顯示不同效果的3D
邊框（根據color
屬性）。
border 屬性：
border 屬性爲Border 的快捷方式，屬性值間用空格隔開，順序是" 邊框寬度 邊框樣式 邊框顏色" ，例如：
<h1 style="border:.5em outset red">hello!</h1>
還可以用border-top 、border-right 、border-bottom 、border-left 分別作爲上右下左的快捷方式，屬性值順序同border 屬性。
CSS 屬性：
3
、佈局（Layout
）屬性：
在以前的HTML
裏，元素的位置只能靠元素的依次排列覺得，而在CSS
裏你可以更精確的定位元素。Netscape
曾提出過Layer
標記，它對於精確佈局很有好處，但是並沒有被W3C
承認，W3C
在CSS
提出了類似於Layer
標記的功能。
position 屬性：
position 屬性用來決定元素的位置類型，詳見屬性：
屬性名稱: 'position'
屬性值: absolute | relative | static
初始值: static
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
其屬性值分別代表：
absolute
：屏幕上的絕對位置。
relative
：屏幕上的相對位置。
static
：固有位置。
direction
屬性：
direction 屬性決定BOX 的排列方向，詳見屬性：
屬性名稱: 'direction'
屬性值: ltr| rtl
初始值: ltr
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
float
和clear
屬性：
在HTML 中圖片可以選擇飄浮的位置，現在BOX 對象通過CSS 對於也可以選擇飄浮的位置。改變BOX 的float 屬性，BOX 將飄浮在其他元素的左或右方：
屬性名稱: 'float'
屬性值: left| right|none
初始值: none
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
例如：
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>
相反的，使用clear 屬性將禁止元素在BOX 的左方或右方飄浮：
屬性名稱: 'clear'
屬性值: left| right|both|none
初始值: none
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
絕對位置屬性：
絕對位置屬性有四個屬性：top 、right 、bottom 和left ，屬性值爲長度單位或百分數：
屬性名稱: 'top'
、'right'
、'bottom'
、'left'
屬性值: <length>|<percentage>|auto
初始值: none
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
利用以上屬性，用戶就可以精確定義元素的位置，如：
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>
z-index 屬性：
在CSS 中允許元素的重疊顯示，這樣就有一個顯示順序的問題，z-index 屬性描述了元素的前後位置，如果把電腦屏幕看作X-Y 平面的話，那麼Z 軸就是垂直於屏幕的，z-index 使用整數表示元素的前後位置，數值越大，就會顯示在相對靠前的位置，並且CSS 同意在z-index 中使用負數。
屬性名稱: 'z-index'
屬性值: auto|<integer>
初始值: auto
適合對象:
使用position
屬性的元素
是否繼承: no
百分比備註:
被禁止
width
屬性：
規定BOX 的width 屬性，可以使BOX 的寬度不依靠它所包含的內容的多少：
屬性名稱: 'width'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對象:
塊元素
是否繼承: no
百分比備註:
根據父元素的width
而定
在CSS 中還提供了min-width 和max-width 屬性，使得BOX 的寬度在最小寬度和最大寬度之間。
屬性名稱: 'min-width'
屬性值: <length> | <percentage>
初始值: 0
適合對象: all
是否繼承: no
百分比備註:
根據父元素的width
而定
屬性名稱: 'max-width'
屬性值: <length> | <percentage>
初始值: 100%
適合對象: all
是否繼承: no
百分比備註:
根據父元素的width
而定
height
屬性：
相同的BOX 還有height 屬性來控制本身的高度：
屬性名稱: 'height'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對象:
塊元素
是否繼承: no
百分比備註:
根據父元素的height
而定
在CSS 中還提供了min-height 和max-height 屬性，使得BOX 的高度在最小高度和最大高度之間。
屬性名稱: 'min-height'
屬性值: <length> | <percentage>
初始值: 0
適合對象: all
是否繼承: no
百分比備註:
根據父元素的height
而定
屬性名稱: 'max-height'
屬性值: <length> | <percentage>
初始值: 100%
適合對象: all
是否繼承: no
百分比備註:
根據父元素的height
而定
overflow
屬性：
在規定元素的寬度和高度時，如果元素的面積不足以顯示全部內容的話就要用到overflow 屬性：
屬性名稱: 'overflow'
屬性值: visible | hidden | scroll | auto
初始值: visible
適合對象:
元素的position
屬性
是否繼承: no
百分比備註:
被禁止
屬性值含義如下：
visible
：擴大面積以顯示所有內容。
hidden
：隱藏超出範圍的內容。
scroll
：在元素的右邊顯示一個滾動條。
auto
：當內容超出元素面積時，顯示滾動條。
clip
屬性：
CSS 還提供了一種clip 屬性，可以把元素區域剪切成各種形狀，但目前提供的只有方形一種：
屬性名稱: 'clip'
屬性值: <shape> | auto
初始值: auto
適合元素:
元素的position
屬性被設爲absolute
是否繼承: no
百分比備註:
被禁止
<shape>
值爲rect(top right bottom left)
。
line-height
和vertical-align
屬性：
line-height 屬性可以規定元素內部的行間距，使用長度單位或百分數：
屬性名稱: 'line-height'
屬性值: normal | <number> | <length> | <percentage>
初始值: normal
適合對象:
所有元素
是否繼承: yes
百分比備註:
根據元素的字體大小而定
例如下面的例子，雖然表達方式不同，但結果一樣：
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
vertical-align 屬性決定元素在垂直位置的顯示：
屬性名稱: 'vertical-align'
屬性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
初始值: baseline
適合對象: inline elements
適合繼承: no
百分比備註:
根據元素的line-height
屬性而定
屬性值含義如下：
baseline
：與元素的基線對齊。
middle
：與元素中部對齊。
sub
：字下沉。
super
：字上升。
text-top
：文本頂部對齊。
text-bottom
：文本底部對齊。
Top
：和本行位置最高元素對齊。
Bottom
：和本行位置最低元素對齊。
Visibility
屬性:
該屬性用於控制元素的顯示或隱藏：
屬性名稱: 'visibility'
屬性值: inherit | visible | hidden
初始值: inherit
適合對象:
所有元素
是否繼承:
如果該值爲inherit
，則繼承父元素屬性
百分比備註:
被禁止
CSS 屬性：
4 、顏色和背景（Color and Background ）屬性：
這裏介紹有關CSS 中前景色和背景顏色、圖片的設定方法。
color 屬性：
color 屬性用於設定元素的前景色：
屬性名稱: 'color'
屬性值: <color>
初始值:
根據用戶的初始值而定
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
color 屬性的值可以是十六進制數值、rgb() 函數或CSS 承認的顏色名稱。如：
EM { color: red }
EM { color: rgb(255,0,0) }
背景屬性：
background-color
屬性用於設定背景色，初始值爲透明：
屬性名稱: 'background-color'
屬性值: <color> | transparent
初始值: transparent
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
backgroud-image
屬性用於設定背景的圖片：
屬性名稱: 'background-image'
屬性值: <url> | none
初始值: none
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
其中url 可以爲絕對地址，也可以是相對地址，例如：
BODY { background-image: url(marble.gif) }
P { background-image: none }
以上兩個屬性利用普通的HTML
屬性也可以實現，下面的屬性是CSS
對原有HTML
的擴展。
background-repeat
屬性用來描述背景圖片的重複排列方式：
屬性名稱: 'background-repeat'
屬性值: repeat | repeat-x | repeat-y | no-repeat
初始值: repeat
適合對象:
所有元素
是否繼承: no
百分比備註:
被禁止
其中屬性值的含義爲：
repeat
：沿X
軸和Y
軸兩個方向重複顯示圖片。
repeat-x
：沿X
軸方向重複圖片。
repeat-y
：沿Y
軸方向重複圖片。
none
：不重複圖片。
例如：
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/* 表示沿Y 軸重複圖片"pendant.gif" ，其餘部分以紅色爲背景色*/
background-attachment
屬性表示在滾動整個文檔時，背景圖片的顯示方式。它的屬性值有兩種：fixed
和scroll
，fixed
相當於IE4
裏的水印效果，也就是說在拖動文檔時，背景相對是靜止的，scroll
則和文檔一起滾動。
background-position
屬性用來指定背景圖片顯示的位置：
屬性名稱: 'background-position'
屬性值: [<percentage> | <length> ] | [top | center | bottom] || [left | center | right]
初始值: 0% 0%
適合對象:
容器元素
是否繼承: no
百分比備註
: refer to the size of the element itself
其中屬性值含義爲：
"top left"
和"left top"
表示"0% 0%"
。
"top"
、"top center"
和"center top"
表示"50% 0%"
。
"right top"
和"top right"
都表示"100% 0%"
。
"left"
、"left center"
和"center left"
表示"0% 50%"
。
"center"
和"center center"
表示"50% 50%"
。
"right"
、"right center"
和"center right"
都表示"100% 50%"
。
"bottom left"
和"left bottom"
表示"0% 100%"
。
"bottom"
、"bottom center"
和"center bottom"
都表示"50% 100%"
"bottom right"
和"right bottom"
表示"100% 100%"
。
例如：
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
background 屬性是以上背景屬性的快捷方式，屬性和順序如下：
屬性名稱: 'background'
屬性值:
<'background-color'> || <'background-image'> ||
<'background-repeat'> || <'background-attachment'> ||
<'background-position'>
適合對象:
所有元素
是否繼承: no
百分比備註:
只在background-position
中容許使用
CSS 屬性：
5 、字體（Font ）屬性：
這裏定義了關於字體的各種屬性。
font-family 屬性定義字體的名稱，可以是一個字體的名稱，也可以是一類字體的名稱，字體的名稱一定要和計算機系統裏的完全一樣：
屬性名稱: 'font-family'
屬性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
初始值:
根據用戶定義而定
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
有些計算機系統裏如果沒有樣式單要求的字體，可以再設一個次字體以備萬一。例如：
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name 是指確定的某字體，如Heisi Mincho W3 ，generic-family 指某一類字體，如serif 。
font-style 屬性描述字體的傾斜程度：
屬性名稱: 'font-style'
屬性值: normal | italic | oblique
初始值: normal
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
font-variant
屬性：
屬性名稱: 'font-variant'
屬性值: normal | small-caps
初始值: normal
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
一個使用了small-caps
屬性的元素中的小寫字母看起來要比正常的大寫字母小一些。
font-weight
屬性用來描述字重。
屬性名稱: 'font-weight'
屬性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
100 到900 代表9 種不同的字重，400 代表normal ，700 代表bold ，900 是最重的字體，bolder 或lighter 表示字體的字重比父元素高或低一級，比如父元素字重爲400 ，則bolder 代表字重500 ，如果父元素本身字重爲900 ，那麼bolder 後，字重還是900 ，同樣的lighter 也一樣。有些字體並沒有100 到900 那麼全的字重，也許是從300 到700 ，那麼字重的最小和最大值也爲300 到700 。例如：
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
font-size 屬性描述字體的大小：
屬性名稱: 'font-size'
屬性值: <absolute-size> | <relative-size> | <length> | <percentage>
初始值: medium
適合對象:
所有元素
是否繼承: yes
百分比備註: relative to parent element's font size
該屬性可以使用絕對大小，也可以使用相對大小，其中絕對大小可以使用，如下關鍵字表示：
xx-small | x-small | small | medium | large | x-large | xx-large 分別代表最小、較小、小、中等、大、較大和最大。相對大小可以使用：larger 或smaller 描述。例如：
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Font 屬性是以上屬性的快捷方式，屬性如下：
屬性名稱: 'font'
屬性值:
[ [ <'font-style'> || <'font-variant'> ||
<'font-weight'> ]? <'font-size'> [ / <'line-height'>
]? <'font-family'> ]
適合對象:
所有元素
是否繼承: yes
百分比備註:
只在font-size
使用
例如：
P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
CSS 屬性：
6 、文本（Text ）屬性：
這裏的屬性將影響WEB 文檔中的文本顯示情況。
text-indent 屬性描述文本的縮進程度：
屬性名稱: 'text-indent'
屬性值: <length> | <percentage>
初始值: 0
適合對象:
容器元素
是否繼承: yes
百分比備註:
根據父元素的寬度而定
下面的例子表明段落的縮進值爲3em ：
P { text-indent: 3em }
Alignment 屬性表明文本的對齊方式：
屬性名稱: 'alignment'
屬性值: left | right | center | justify
初始值:
依照用戶定義
適合對象: block-level elements
是否繼承: yes
百分比備註:
被禁止
text-decoration
屬性描述對文本的修飾方法：
屬性名稱: 'text-decoration'
屬性值: none | [ underline || overline || line-through || blink ]
初始值: none
適合對象:
所有元素
是否繼承: no (see clarification below)
百分比備註:
被禁止
屬性值含義分別爲：
underline
：下劃線。
overline
：上劃線。
line-through
：刪除線。
blink
：閃爍（如同Navigator
中的blink
標記的功能）
text-shadow
屬性可以爲文本加入陰影的特效：
屬性名稱: 'text-shadow'
屬性值: none | <color> [, <color> ]*
初始值: none
適合對象: all
是否繼承: No
百分比備註:
只在描述透明度時有效
例如：
P { text-shadow: black }
上例將在文本的右下方顯示黑色陰影，另外陰影將增大BOX
的面積。
letter-spacing
屬性表明文本的字間距：屬性名稱: 'letter-spacing'
屬性值: normal | <length> | auto
初始值: normal
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
例如：
BLOCKQUOTE { letter-spacing: 0.1em }
word-spacing 屬性表明文本中單詞間距：
屬性名稱: 'word-spacing'
屬性值: normal | <length>
初始值: normal
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
例如：
H1 { word-spacing: 1em }
text-transform 屬性可以將BOX 內的文本按指定的大寫或小寫形式顯示：
屬性名稱: 'text-transform'
屬性值: capitalize | uppercase | lowercase | none
初始值: none
適合對象:
所有元素
是否繼承: yes
百分比備註:
被禁止
屬性值含義爲：
capitalize
：把BOX
中的每句句首字母變成大寫。
uppercase
：把BOX
中所有的字母變成大寫。
lowercase
：把BOX
中所有的字母變成小寫。
White-space
屬性描述如何顯示文本中的空格
，在HTML
中，空格是被省略的，也就是說你在一個段落標記的開頭無論輸入多少個空格都是無效的，要輸入空格有兩個方法，一是直接輸入空格的代碼" "
，或者使用<pre>
標記，CSS
中也制定了類似於pre
的屬性：
屬性名稱: 'white-space'
屬性值: normal | pre | nowrap
初始值: normal
適合對象:
容器元素
是否繼承: yes
百分比備註:
被禁止