Sealyu

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 }

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中，空格是被省略的，也就是說你在一個段落標記的開頭無論輸入多少個空格都是無效的，要輸入空格有兩個方法，一是直接輸入空格的代碼"&nbsp;"，或者使用<pre>標記，CSS中也制定了類似于pre的屬性：

屬性名稱: 'white-space'
屬性值: normal | pre | nowrap
初始值: normal
適合對象: 容器元素
是否繼承: yes
百分比備注: 被禁止

例如：

UL { list-style: upper-roman inside } /* 對任何UL有效*/
UL ~ UL { list-style: circle outside } /* 對任何UL內部的UL標記有效*

7、列表屬性：

這里的屬性用來描述列表（list）的一系列屬性。

list-style-type屬性描述用于列表每一項前使用的符號：

屬性名稱: 'list-style-type'
屬性值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值: disc
適合對象: 列表元素
是否繼承: yes
百分比備注: 被禁止

屬性值含義為：
disc：圓餅形。
circle：空心圓形。
square：方形。
decimal：十進制數值。
lower-roman：小寫羅馬數字。
upper-roman：大寫羅馬數字。
lower-alpha：小寫希臘字母。
upper-alpha：大寫希臘字母。

例如：

<STYLE>
OL { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>

還可以利用list-style-image把列表前面的符號換為圖形：

屬性名稱: 'list-style-image'
屬性值: <url> | none
初始值: none
適合對象: 列表元素
是否繼承: yes
百分比備注: 被禁止

<url>可以是絕對地址，也可以是相對地址。

list-style-position屬性用于描述列表的位置顯示：

屬性名稱: 'list-style-position'
屬性值: inside | outside
初始值: outside
適合對象: 列表元素
是否繼承: yes
百分比備注: 被禁止

屬性值outside和inside分別表示在BOX外部顯示或內部顯示，例如：

<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside } </STYLE> <UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class=compact>
<LI>first list item comes first
<LI>second list item comes second
</UL>

list-style屬性為以上屬性的快捷方式：

屬性名稱: 'list-style'
屬性值: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
初始值: no
適合對象: 列表元素
是否繼承: yes
百分比備注: 被禁止

例如：

UL { list-style: upper-roman inside } /* 對任何UL有效*/
UL ~ UL { list-style: circle outside } /* 對任何UL內部的UL標記有效*/

PRE { white-space: pre }
P { white-space: normal

8、表格屬性：

由于表格中的大部分屬性已經在以上的各類屬性中探討過了，所以這里只有兩個屬性介紹：

row-span屬性描述表格跨越的行的數目：

屬性名稱: 'row-span'
屬性值: <integer>
初始值: 1
適合對象: 表格元素
是否繼承: no
百分比備注: 被禁止

column-span屬性描述表格跨越的列的數目：

屬性名稱: 'column-span'
屬性值: <integer>
初始值: 1
適合對象: 表格元素
是否繼承: no
百分比備注: 被禁止

9、用戶界面屬性：

cursor屬性，用戶可以指定在某個元素上要使用的光標形狀：

屬性名稱: 'cursor'
屬性值: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | <url>
初始值: auto
適合對象: 所有元素
是否繼承: yes
百分比備注: 被禁止

屬性值分別代表鼠標指針在windows操作里的各種形狀，另外還可以指定指針圖標的url地址，不過CSS還暫時不支持ani動畫光標。

結束語：

到此，所有關于CSS現有的屬性都介紹完了（還有一些關于聽覺方面的樣式單，就不再作介紹），本文也該結束了，雖然現在支持樣式單的瀏覽器種類還不多，但也占到了大半，樣式單遲早會成為瀏覽器的統一標準，原因有兩個：一、樣式單是W3C唯一接受的樣式標準，而且沒有任何跡象表明W3C會把Javascript樣式單作為樣式單標準；二則是CSS有效的解決了把事件引入元素的問題，配合腳本程序，是動態HTML不可缺少的一部分，嘗試著用樣式單建立Web頁，你會發現它真的很方便。希望我的這些努力能為你熟練掌握樣式單盡一點力。