本 章?。谩。印。印〉摹≈鳌∫∽鳌∮?
本章介紹的是區(qū)塊性質的ＣＳＳ指令以及它 們的應用與特性，可以設定與控制區(qū)塊的位置，大小及邊緣寬度等性質。本章也將分成 兩個部份為您介紹，第一部份要講的是區(qū)塊各部份名稱與概念的介紹，對于區(qū)塊有一點 概念后，第二部份才再進入?yún)^(qū)塊性質的ＣＳＳ指令的介紹。
區(qū) 塊 各 部 份 名 稱 與 概 念
其實我們還可以把所謂的「區(qū)塊」細分成的幾個部份。
由外而內為您作介紹：
MARGIN： 邊緣，雖然是通透的部份，但是可以藉由邊緣寬度的調整來達到內容元素位置調整的目的。
BORDER： 邊框，就是外框的部份，經(jīng)由ＣＳＳ指令您可以控制邊框的寬度、顏色和樣式，不再死板！
PADDING： 補白，也就是內容元素與框架之間的這段距離與空間，也可以利用ＣＳＳ指令去控制大小。
元素： 內容元素，也就是您放置于該區(qū)塊內的內容，或為文字，或為圖形，或為所有其它元素。
附帶一提的是，所謂的區(qū)塊寬度是指整個包含邊緣在內的寬度，而元素寬度指的只 是內容元素的寬度。有了這些對區(qū)塊各部份的基本概念與認識之后，接下來就要來介紹 控制區(qū)塊各部份分別的的ＣＳＳ指令了！
區(qū) 塊 性 質 的?。谩。印。印≈浮×?
margin-top 設定上邊緣寬度 margin-right 設定右邊緣寬度
margin-bottom 設定下邊緣寬度 margin-left 設定左邊緣寬度
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <length> 長度單位，請參考第一章基本單位的相關說明
<percentage> 百分比，相對于元素寬度大小
auto 使用瀏覽器預設值
預設值：0
繼承性：無
一般范例：DIV { margin-top : 20pt }
同軸范例：<DIV style=”margin-top:20pt”>
margin 綜合設定邊緣寬度
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值：依序設定top,right,bottom,left的邊緣寬度 <length> {1,4} 長度單位，請參考第一章基本單位的相關說明
<percentage> {1,4} 百分比，相對于元素寬度大小
auto {1,4} 使用瀏覽器預設值
預設值：無
繼承性：無
一般范例：DIV { margin : 20pt 15pt 10pt 5pt }
同軸范例：<DIV style=”margin:20pt 15pt 10pt 5pt”>
要附帶說明的是，如果指定了四個合法設定值，則會依序套用于四個邊緣；如果只 有指定一個合法設訂值，則會統(tǒng)一套用于四個邊持；若只有指定二或三個合法設定值，則 未指定的邊緣會套用對邊的寬度設定值。
DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt
DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt
DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt
border-top-width 設定上邊框寬度 border-right-width 設定右邊框寬度
border-bottom-width設定下邊框寬度 border-left-width 設定左邊框寬度
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值：thin < medium < thick thin 統(tǒng)一的絕對單位，因瀏覽器而異
medium 統(tǒng)一的絕對單位，因瀏覽器而異
thick 統(tǒng)一的絕對單位，因瀏覽器而異
<length> 長度單位，請參考第一章基本單位的相關說明
預設值：medium
繼承性：無
一般范例：DIV { border-top-width : 2pt }
同軸范例：<DIV style=”border-top-width:2pt”>
border-width 綜合設定邊框寬度
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值：依序設定top,right,bottom,left的邊框寬度 thin {1,4} 統(tǒng)一的絕對單位，因瀏覽器而異
medium {1,4} 統(tǒng)一的絕對單位，因瀏覽器而異
thick {1,4} 統(tǒng)一的絕對單位，因瀏覽器而異
<length> {1,4} 長度單位，請參考第一章基本單位的相關說明
預設值：無
繼承性：無
一般范例：DIV { border-width : 4pt 3pt 2pt 1pt }
同軸范例：<DIV style=”border-width:4pt 3pt 2pt 1pt”>
要附帶說明的是，如果指定了四個合法設定值，則會依序套用于四個邊框；如果只 有指定一個合法設訂值，則會統(tǒng)一套用于四個邊框；若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的寬度設定值。
DIV { border-width: 2pt } →top=2pt;right=2pt;bottom=2pt;left=2pt
DIV { border-width: 2pt 3pt } →top=2pt;right=3pt;bottom=2pt;left=3pt
DIV { border-width: 2pt 3pt 4pt } →top=2pt;right=3pt;bottom=4pt;left=3pt
border-top-color 設定上邊框顏色 border-right-color 設定右邊框顏色
border-bottom-color 設定下邊框顏色 border-left-color 設定左邊框顏色
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <color> 設定顏色，請參考第一章顏色使用的相關說明
預設值：color性質之值
繼承性：無
一般范例：DIV { border-top-color : BLUE }
同軸范例：<DIV style=”border-top-color:BLUE”>
border-color 綜合設定邊框顏色
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值：依序設定top,right,bottom,left的邊框顏色 <color> {1,4} 設定顏色，請參考第一章顏色使用的相關說明
預設值：無
繼承性：無
一般范例：DIV { border-color : RED GREEN BLUE YELLOW }
同軸范例：<DIV style=”border-color:RED GREEN BLUE YELLOW”>
要附帶說明的是，如果指定了四個合法設定值，則會依序套用于四個邊框；如果只 有指定一個合法設訂值，則會統(tǒng)一套用于四個邊框；若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的顏色設定值；若無指定此一性質，則套用color性質之設定值。
DIV{border-color:RED } →top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{border-color: RED GREEN BLUE} →top=RED;right=GREEN;bottom=BLUE;left=GREEN
border-top-style 設定上邊框樣式 border-right-style 設定右邊框樣式
border-bottom-style 設定下邊框樣式 border-left-style 設定左邊框樣式
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： none 不顯示邊框
dotted 虛線（ＩＥ４、ＮＣ４瀏覽器當作實線）
dashed 短直線（ＩＥ４、ＮＣ４瀏覽器當作實線）
solid 實線
double 雙直線
ridge ３Ｄ凸線
groove ３Ｄ凹線
outset ３Ｄ隆起（ＩＥ４不顯示）
inset ３Ｄ嵌入（ＩＥ４不顯示）
預設值：none
繼承性：無
一般范例：DIV { border-top-style : inset }
同軸范例：<DIV style=”border-top-style:inset”>
border-style 綜合設定邊框樣式
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值：依序設定top,right,bottom,left的邊框樣式 none {1,4} 不顯示邊框
dotted {1,4} 虛線（ＩＥ４、ＮＣ４瀏覽器當作實線）
dashed {1,4} 短直線（ＩＥ４、ＮＣ４瀏覽器當作實線）
solid {1,4} 實線
double {1,4} 雙直線
ridge {1,4} ３Ｄ凸線
groove {1,4} ３Ｄ凹線
outset {1,4} ３Ｄ隆起（ＩＥ４不顯示）
inset {1,4} ３Ｄ嵌入（ＩＥ４不顯示）
預設值：無
繼承性：無
一般范例：DIV { border-style : ridge groove outset inset }
同軸范例：<DIV style=”border-style:ridge groove outset inset”>
要附帶說明的是，如果指定了四個合法設定值，則會依序套用于四個邊框；如果只 有指定一個合法設訂值，則會統(tǒng)一套用于四個邊框；若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的樣式設定值。
DIV{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset
DIV{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset
DIV{border-width:outset inset ridge} →top=outset;right=inset;bottom=ridge;left=inset
border-top 綜合設定上邊框性質 border-right 綜合設定右邊框性質
border-bottom 綜合設定下邊框性質 border-left 綜合設定左邊框性質
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <border-width> 設定該邊框寬度，請參考上面的介紹與說明
<border-style> 設定該邊框樣式，請參考上面的介紹與說明
<border-color> 設定該邊框顏色，請參考上面的介紹與說明
預設值：無
繼承性：無
一般范例：DIV { border-top : 2pt solid BLUE }
同軸范例：<DIV style=”border-top:2pt solid BLUE”>
border 綜合設定邊框性質
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <border-width> 設定邊框寬度，請參考上面的介紹與說明
<border-style> 設定邊框樣式，請參考上面的介紹與說明
<border-color> 設定邊框顏色，請參考上面的介紹與說明
預設值：無
繼承性：無
一般范例：DIV { border : 2pt solid BLUE }
同軸范例：<DIV style=”border:2pt solid BLUE”>
要附帶說明的是，這個指令只能指定一組設定值，也就是說，上右下左四個邊框都將套用同一組的設定值，而不能作個別邊框的設定值變化。
padding-top 設定上方補白寬度 padding-right 設定右方補白寬度
padding-bottom 設定下方補白寬度 padding-left 設定左方補白寬度
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <length> 長度單位，請參考第一章基本單位的相關說明
<percentage> 百分比，相對于元素寬度大小
預設值：0
繼承性：無
一般范例：DIV { padding-top : 5pt }
同軸范例：<DIV style=”padding-top:5pt”>
padding 綜合設定補白寬度
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值：依序設定top,right,bottom,left的補白寬度 <length> {1,4} 長度單位，請參考第一章基本單位的相關說明
<percentage> {1,4} 百分比，相對于元素寬度大小
預設值：無
繼承性：無
一般范例：DIV { padding : 2pt 5pt 2pt 5pt }
同軸范例：<DIV style=”padding:2pt 5pt 2pt 5pt”>
要附帶說明的是，如果指定了四個合法設定值，則會依序套用于四個補白；如果只有指定一個合法設訂值，則會統(tǒng)一套用于四個補白；若只有指定二或三個合法設定值，則 未指定的補白會套用對邊的寬度設定值。
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt
DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt
DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt
本 章?。谩。印。印〉摹≈鳌∫∽鳌∮?
在前面的章節(jié)介紹完了聲明與應用的方法及 一些特性之後，從這章開始，便要正式進入ＣＳＳ的指令介紹了！本章有兩個介紹的主 題，第一個部份介紹的是顏色與背景性質的ＣＳＳ，其主要的作用在于設定元素的前景 顏色、背景顏色與背景圖形等樣式設定的性質；而第二部份為您介紹的是用于控制擺放 元素位置的ＣＳＳ的指令。
顏 色 背 景 的 Ｃ?。印。印≈浮×?
color 設定前景顏色
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： <color> 設定顏色，請參考第一章顏色使用的相關說明
預設值：視瀏覽器而定
繼承性：有
一般范例：SPAN { color : BLUE }
同軸范例：<SPAN style=”color:BLUE”>
background-color 設定背景顏色
支 持：ＩＥ４、ＮＣ４
適 用：所有元素
可能值： <color> 設定顏色，請參考第一章顏色使用的相關說明
transparent 將父元素（顏色或圖案）的背景透明化
預設值：transparent
繼承性：無
一般范例：BODY { background-color : BLUE }
同軸范例：<BODY style=”background-color:BLUE”>
background-image 設定背景圖形
支 持：ＩＥ４、ＮＣ４
適 用：所有元素
可能值： <url> 設定圖檔URL，請參考第一章URL表示的相關說明
none 不使用背景圖案
預設值：transparent
繼承性：無
一般范例：
BODY { background-image : URL(“http://yourweb/path/file_name”) }
同軸范例：
<BODY style=”background-image:URL(‘http://yourweb/path/file_name‘)”>
background-repeat 設定背景重復
支 持：ＩＥ４、ＮＣ４
適 用：所有元素
可能值： repeat 重復背景圖形填滿頁面
repeat-x 水平方向重復背景圖形
repeat-y 垂直方向重復背景圖形
no-repeat 不重復顯示背景圖形
預設值：repeat
繼承性：無
一般范例：BODY { background-repeat : repeat-x }
同軸范例：<BODY style=”background-repeat: repeat-x”>
background-attachment 設定背景附著
支 持：ＩＥ４、ＮＣ４
適 用：所有元素
可能值： scroll 背景圖形隨著卷軸卷動
fixed 背景圖形隨著卷軸卷動（浮水?。?
預設值：scrool
繼承性：無
一般范例：BODY { background-attachment : fixed }
同軸范例：<BODY style=”background-attachment:fixed”>
background-position 設定背景位置
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <percent> X% Y% 圖形上X% Y%的點對準元素的X% Y%位置
<length> X Y 將圖形左上角置于元素左上角水平 X垂直 Y之處
center 背景圖形置于中央
left 背景圖形對 左邊
right 背景圖形對 右邊
top 背景圖形對 頂部
bottom 背景圖形對 底部
預設值：0% 0%
繼承性：無
一般范例：BODY { background- position : 100% 50% }
同軸范例：<BODY style=”background- position:100% 50%”>
background 綜合設定背景性質
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： background-color 設定背景顏色
background-image 設定背景圖形
background-repeat 設定背景重復
background-attachment 設定背景附著
background-position 設定背景位置
預設值：無
繼承性：無
一般范例：
BODY { BLUE url(image/gif) repeat-x fixed center }
同軸范例：
<BODY style=”BLUE url(image/gif) repeat-x fixed center”>
位 置 擺 放 的 Ｃ?。印。印≈浮×?
float 設定浮動性質（多用于文繞圖的情形）
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素或圖形
可能值： left 元素*左，文字圍繞其右
right 元素*右，文字圍繞其左
none 以預設的方法顯示
預設值：none
繼承性：無
一般范例：DIV { float : right }
同軸范例：<DIV style=”float:right”>
clear 設定清除性質（設定是否允許浮動元素之存在）
支 持：ＩＥ４
適 用：區(qū)塊元素或圖形
可能值： both 若兩邊有浮動元素，則該元素移至浮動元素下方
left 若左邊有浮動元素，則該元素移至浮動元素下方
right 若右邊有浮動元素，則該元素移至浮動元素下方
none 以預設的方法顯示
預設值：none
繼承性：無
一般范例：DIV { clear : right }
同軸范例：<DIV style=”clear:right”>
width 設定寬度
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素或圖形
可能值： <length> 長度單位，請參考第一章基本單位的相關說明
<percentage> 百分比，以父元素寬度為基準
auto 以固定比例自動變化大小
預設值：auto
繼承性：無
一般范例：DIV { width : 300pt }
同軸范例：<DIV style=”width:300pt”>
height 設定高度
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素或圖形
可能值： <length> 長度單位，請參考第一章基本單位的相關說明
<percentage> 百分比，以父元素寬度為基準
auto 以固定比例自動變化大小
預設值：auto
繼承性：無
一般范例：DIV { height : 300pt }
同軸范例：<DIV style=”height:300pt”>
position 設定位置
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： absolute 以父元素為基準，擺設在特定位置上
relative 以相鄰元素為基準，擺設在特定位置上
static 預設位置，以該元素于原始碼中位置而定
預設值：absolute
繼承性：無
一般范例：DIV { position : static }
同軸范例：<DIV style=”position:static”>
top 設定頂端位置
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <length> 長度單位，請參考第一章基本單位的相關說明
<percentage> 百分比，以父元素寬度為基準
auto 以正常方式顯示
預設值：auto
繼承性：無
一般范例：DIV { top : 30pt }
同軸范例：<DIV style=”top:30pt”>
left 設定左端位置
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <length> 長度單位，請參考第一章基本單位的相關說明
<percentage> 百分比，以父元素寬度為基準
auto 以正常方式顯示
預設值：auto
繼承性：無
一般范例：DIV { left : 30pt }
同軸范例：<DIV style=”left:30pt”>
clip 設定裁剪（設定某區(qū)域形狀及大小，區(qū)域外通透）
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： rect(top,right,bottom,left) 設定矩形之上右下左長度，會自動比對對邊長度
一般 寫法為rect(0,長度,長度,0)
不可以寫為rect(0,0,長度,長度)
四個數(shù)值皆可以”auto”代替
auto 以正常方式顯示
預設值：auto
繼承性：無
一般范例：DIV { clip : rect(0,100px,50px,0) }
同軸范例：<DIV style=”clip:rect(0,100px,50px,0)”>
overflow 設定溢位處理（控制當元素內容超過該元素大小時的顯示方式）
支 持：ＩＥ４
適 用：區(qū)塊元素
可能值： visible 元素將不會依所設訂大小顯示，而能看見所有內容
hidden 超過元素所設訂大小之部份將被隱藏不予顯示
scroll 如有必要出現(xiàn)卷軸可讓使用者看到全部的內容
auto 以預設的方式顯示
預設值：auto
繼承性：無
一般范例：DIV { overflow : scroll }
同軸范例：<DIV style=”overflow:scroll”>
visibility 設定可視度
支 持：ＩＥ４、ＮＣ４
適 用：所有元素
可能值： visible 設定該元素顯示
hidden 設定該元素不顯示，但仍占據(jù)空間
inherit 以父元素可視度決定
預設值：inherit
繼承性：無
一般范例：DIV { visibility : hidden }
同軸范例：<DIV style=”visibility:hidden”>
z-index 設定Ｚ軸參數(shù)（三度空間）
支 持：ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <number> 十進位數(shù)值，數(shù)值大的元素會出現(xiàn)在數(shù)值小的元素的上方
auto 當元素位置重復時，原始碼中寫在後面元素會出現(xiàn)在寫在前面元素的上方
預設值：auto
繼承性：無
一般范例：DIV { z-index : 3 }
同軸范例：<DIV style=”z-index:3″>
本 章?。谩。印。印〉摹≈鳌∫∽鳌∮?
本章要介紹的是文字相關的ＣＳＳ指令。通 常一個網(wǎng)站的內容最多的就是文字了，透過這些文字相關的ＣＳＳ指令，您可以將您的 網(wǎng)頁內容排版得美美的。本章將分兩個部份為您介紹，第一部份是字型性質的ＣＳＳ指 令，用以控制文字字型的各種樣式；第二部份介紹的是文字性質的ＣＳＳ指令，用以控 制文字段落的外觀及擺設方式。
字 型 性 質 的?。谩。印。印≈浮×?
font-family 設定文字字型
支 持：ＩＥ３、ＩＥ４
適 用：所有元素
可能值： <family-name> 字型名稱
預設值：視瀏覽器而定
繼承性：有
一般范例：SPAN { family-name : “標楷體” }
同軸范例：<SPAN style=”family-name:標楷體”>
font-style 設定字體樣式
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： normal 普通字
italic 斜體字
oblique 斜體字
預設值：normal
繼承性：有
一般范例：SPAN { font-style : italic }
同軸范例：<SPAN style=”font-style:italic”>
font-weight 設定字型份量
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： normal 普通字
bold 粗體字
bolder 相對于父元素稍粗
lighter 相對于父元素稍細
100,200,300,
400,500,600,
700,800,900. 數(shù)字由小到大代表筆畫由細到粗
normal=400 bold=700
預設值：normal
繼承性：有
一般范例：SPAN { font-weight : bolder }
同軸范例：<SPAN style=”font-weight:bolder”>
font-size 設定文字大小
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： <absolute-size> 絕對大小，可用的參數(shù)由小到大分別有七項
xx-small, x-small, small, medium, large, x-large, xx-large
<relative-size> 相對大小，可用的參數(shù)為larger, smaller兩項
以父元素字型大小為基準
<lenght> 長度單位，請參考第一章基本單位的相關說明
<percentage> 百分比，以父元素字型大小為基準
預設值：medium
繼承性：有
一般范例：SPAN { font-size : 12pt }
同軸范例：<SPAN style=”font-size:12pt”>
font-variant 設定文字轉換
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： normal 普通字
small-caps 將小寫文字轉換為大寫
預設值：normal
繼承性：有
一般范例：SPAN { font-variant : small-caps }
同軸范例：<SPAN style=”font-variant:small-caps”>
font 綜合設定字型性質
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： <font-style> 設定字體樣式
<font-variant> 設定文字轉換
<font-weight> 設定字型份量
<font-size/line-height> 設定文字大小與列高（請參考設定文字列高部份）
<font-family> 設定文字字型
預設值：無
繼承性：有
一般范例： SPAN { font : bolder small-caps 12pt/120% Arial }
同軸范例：< SPAN style=”font : bolder small-caps 12pt/120% Arial”>
文 字 性 質 的 Ｃ?。印。印≈浮×?
line-height 設定列高
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： normal 普通列高，根據(jù)字體變化合理高度，視瀏覽器而定
<number> 以元素字型大小乘以該數(shù)即為列高
<length> 設定長度，請參考第一章基本單位的相關說明
<percentage> 百分比，相對于元素字型大小為比例
預設值：normal
繼承性：有
一般范例：DIV { line-height : 120% }
同軸范例：<DIV style=”line-height:120%”>
text-align 設定文字對
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： center 對 中央
right 對 右邊
left 對 左邊
justify 左右對
預設值：視瀏覽器而定
繼承性：有
一般范例：DIV { text-align : center }
同軸范例：<DIV style=”text-align:center”>
vertical-align 設定垂直對
支 持：ＩＥ４
適 用：同軸元素
可能值： top 對 同列最高元素頂端
bottom 對 同列最低元素底端
baseline 對 底線
middle 對 中央
sub 將元素置于下標
super 將元素置于上標
text-top 對 文字頂端
text-bottom 對 文字底端
<percentage> 參照元素本身列高，以父元素底線為基準作位移
預設值：baseline
繼承性：有
一般范例：SPAN { vertical-align : sub }
同軸范例：<SPAN style=”vertical-align:sub”>
text-decoration 設定文字裝飾
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： none 普通字
underline 文字加底線
overline 文字加頂線
line-through 文字加刪除線
blink 設定文字閃爍
預設值：none
繼承性：有
一般范例：SPAN { text-decoration : blink }
同軸范例：<SPAN style=”text-decoration:blink”>
text-transform 設定文字轉換
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：所有元素
可能值： none 普通字
capitalize 將英文單字地一個字母轉換為大寫
uppercase 將所有文字轉換為大寫
lowercase 將所有文字轉換為小寫
預設值：none
繼承性：有
一般范例：SPAN { text-transform : uppercase }
同軸范例：<SPAN style=”text-transform:uppercase”>
letter-spacing 設定字母間隔
支 持：ＩＥ４
適 用：所有元素
可能值： normal 不改變字母間隔，使用瀏覽器預設值
<length> 要額外增加的間隔長度，可為負值
預設值：normal
繼承性：有
一般范例：SPAN { letter-spacing : 0.5pt }
同軸范例：<SPAN style=”letter-spacing : 0.5pt”>
text-indent 設定文字縮排
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：區(qū)塊元素
可能值： <length> 長度單位，請參考第一章基本單位的相關說明
<percentage> 以父元素寬度為基準的百分比值
預設值：0
繼承性：有
一般范例：DIV { text-indent : 3pt }
同軸范例：<DIV style=”text-indent:3pt”>
在講挑選者的特性之前，要提一下的是ＣＳＳ繼承的特性。所謂的繼承的特性是指被包在內部的標簽將擁有外部標簽的樣式性質。繼承的特性最典型的應用通常發(fā)揮在預設整份網(wǎng)頁的樣式，而要指定為其它樣式的部份再依要設定在個別元素里即可。這項特性可以提供網(wǎng)頁設計者更理想的發(fā)揮空間。
接下來就要講挑選者特性的應用！其實這部份應該算是聲明的一種方式，但是在您看過第二章的基本的聲明與應用後，到這邊再講挑選者您會比較有概念點。在ＣＳＳ應用或設計的時候，有幾種依據(jù)元素的關系或性質來設定顯示特定性質的方法，就是挑選者特性的應用，能讓您在控制與應用上更加靈活。
一、前後文挑選者：依聲明標簽前後文關系顯示特定性質的方法。
前後文挑選者便是當瀏覽器在顯示HTML原始碼所指定的內容時，會考慮元素標簽的前後關系，而去顯示指定的樣式聲明。也就是說只要HTML原始碼內的標簽排列前後順序符合時，該項聲明便會發(fā)生作用了！
元素A(標簽A) 元素B(標簽B) 元素C(標簽C) … { 樣式規(guī)則}
要注意的是，前後文挑選者的聲明跟集體聲明很像，但是集體聲明的元素標簽間要用逗號隔開，而用前後文挑選者聲明時元素標簽間要用空格隔開；而這兩種聲明方式您可以混合使用。
元素A 元素B, 元素C 元素D 元素E, … { 樣式規(guī)則}
這樣您就可以用集體聲明的方式，聲明數(shù)組前後文挑選者的樣式規(guī)則。
二、類別挑選者：讓單一或數(shù)個標簽使用同組樣式規(guī)則的方法。
類別(class)可以讓不同的元素標簽共同套用同一組樣式性質或相同的元素標簽套 用不同組的樣式性質。首先介紹的是如何讓不同的元素套用同一組樣式性質，如下面范例所寫即可。
<HTML>
<HEAD>
<STYLE>
<–
.blue { color : BLUE }
–>
</STYLE>
</HEAD>
<BODY>
…
<H1 class=”blue”>…</H1>
…
<P class=”blue”>… </P>
…
</BODY>
要注意在聲明時前面的小點，CLASS名稱可任取。而要讓相同的元素標簽套用不同組的樣式性質時，也可以應用類別特性來設定。
<HTML>
<HEAD>
<STYLE>
<–
P.blue { color : BLUE }
P.red { color : RED }
–>
</STYLE>
</HEAD>
<BODY>
…
<P class=”blue”>…</P>
…
<P class=”red”>…</P>
…
</BODY>
要注意同樣是在聲明時的小點，CLASS名稱可任取。靈活運用類別特性，可以讓您的樣式設定更具機動性唷！
三、ＩＤ挑選者：與類別挑選者類似，不同的是在『唯一性』。
ＩＤ特性的使用與類別特性十分雷同，但是，文件里的各個ＩＤ都是唯一的。換句話 說，類別特性可以重復套用在單一或數(shù)個元素標簽之上，但是ＩＤ屬性在一份文件里只能出現(xiàn)一次。如下面范例所寫即可。
<HTML>
<HEAD>
<STYLE>
<–
#blue { color : BLUE }
–>
</STYLE>
</HEAD>
<BODY>
…
<P ID=”blue”>…</P>
…
</BODY>
可以看到，聲明的方式是利用井字號『#』。而ＩＤ的這種『唯一性』正是讓ja;vascript或 VBScript能夠對元素進行控制的關鍵。
透過以上的介紹的挑選者特性的聲明與使用，可以讓您的樣式設定更具機動與變化 。其實您可以先熟悉上一章為您介紹的基本的聲明與應用方法，再應用本章所講的挑選者特性，一步步地去熟悉樣式表的使用。
連 結 擬 似 特 性 的 應 用
還記得在HTML的基本語法，在BODY標簽中可 以用link、alink、vlink屬性去控制可連結或已連結的字體顏色嗎？現(xiàn)在亦可用ＣＳＳ去控制這些性質，稱為『擬似類別』（pseudo class）。您可以將其當作一般類別，聲明其樣式規(guī)則，而實際上，這些擬似類別并不用像上面講的類別挑選者，在HTML原始碼中再 行設定指向的類別（CLASS）。下面介紹擬似類別的聲明與應用。
一般的聲明方式：擬似類別是以冒號來聲明。
只要在<STYLE>…</STYLE>架構中加入下面的聲明後，則頁面中的連結文字就會依您設定的樣式顯式了！
A:link { 樣式 規(guī)則 }
A:active { 樣式規(guī)則 }
A:visited { 樣式規(guī)則 }
A:hover { 樣式規(guī) 則 }
A:link用以設定未參觀連結的樣式規(guī)則。A:active用以設定作用中連結的樣式規(guī)則。A:visited用以設定已參觀連結的樣式規(guī)則。A:hover用以設定滑鼠移到 連結之上時的樣式規(guī)則。而其中hover并不被NC4所支援，其它三個特性兩大瀏覽器都有支持。
如果您用的是IE4以上的瀏覽器，從本站鏈接您就可以知道 hover作用的妙處，以簡單的樣式設定就可以達成以往要寫好長一串設定的相同效果 。這個連結擬似類別也可以與上面說過的類別挑選者特性合并使用。
Ｄ?。伞。帧∨c?。印。小。痢。巍〉摹”取≥^
雖然樣式表可以套用在任何標簽之上，但是 P和ＳＰＡＮ元素的使用更是大大地擴展了HTML的應用層面。P和ＳＰＡＮ這 兩個元素在應用上十分類似，使用時都必加上結尾標簽，也就是< P>…</P>和<SPAN>…</SPAN> 。兩個可以應用的屬性與事件處理也很類似，都可以配合前面提過的挑選者特性來編寫。兩者也都不強加顯示功能于頁面內容之上，可以說是使用上十分廣泛的元素標簽。
而P和ＳＰＡＮ的不同之處在于：P元素定義為區(qū)塊（block），在 <P>…</P>之間是一個很完整的段落區(qū)塊。 而ＳＰＡＮ元素則是定義為同軸（in-line），<SPAN>…< /SPAN>應用于于小范圍內的設定。兩者可以彼此混合，夾雜使用，因為彼此是相互獨立的。也因此，您可以利用這兩個元素，配合其它性質，靈活地調整您的網(wǎng)頁 顯示的內容。
Ｃ?。印。印〉摹÷暋∶鳌》健∈?
這章節(jié)將開始為您介紹ＣＳＳ的應用。當然一開始要介紹的是如何去建立個樣式表 （Style Sheets），包括了聲明的方式和應用在網(wǎng)頁上的方法，最後還會為您概述一下ＣＳＳ的一些特性。概略來說，ＣＳＳ的聲明有三種方式：
一、基本聲明：最典型的ＣＳＳ聲明方式。
element {property: value} 用中文來表示的話，也就是
元件(標簽) {性質(屬性)名稱: 設定值}
例如：
H3 {COLOR: BLUE} 即為一組聲明。
二、集體聲明：同時聲明某個或數(shù)個元件(標簽)（各元件(標 簽)間以逗號分隔）的一組或數(shù)組樣式規(guī)則(性質)（各組規(guī)則間以分號分隔）。
元件(標簽) {
性質(屬性)名稱1: 設定值1;
性質(屬性)名稱2: 設定值2;
… }
或是
元件A(標簽A), 元件B(標簽B), 元件C(標簽C), … {
性質(屬性)名 稱1: 設定值1;
性質(屬性)名稱2: 設定值2;
…}
例如：
TD {
COLOR: BLUE;
font-size: 9pt;
}
或是
TD,P,P {
COLOR: BLUE;
font-size: 9pt;
}
三、分項聲明：將許多樣式規(guī)則分組再分別聲明。
元件A(標簽A) {性質(屬性)名稱1: 設定值1; 性質(屬性)名稱2: 設定值2; }
元件A(標簽A) {性質(屬性)名稱3: 設定值3; 性質(屬性)名稱4: 設定值4; }
例如：
TD { COLOR: BLUE; font-size: 9pt}
TD { font-family: “標楷體”; line-height: 150%}
這樣子的聲明方式并不會互相抵觸，因為所聲明的性質是不同的。如果不小心對同樣一個性質作了重復的聲明，則只有後來聲明的設定值才會發(fā)生作用。
要附帶提一下的是，在您的聲明中，只要您的格式正確就會被接受，而不論是大小寫、空白或換行都不會對顯示的結果 有影響的，您可依自己習慣來編寫。
Ｃ?。印。印〉摹∮谩》健》?
接下來要為您介紹的是將所建立的樣式表應用在網(wǎng)頁上的四種基本方法。
一、使用STYLE屬性： 將STYLE屬性直接加在個別的元件標簽里。
<元件(標簽) STYLE=”性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; …}
例如：
<TD STYLE=”COLOR:BLUE; font-size:9pt; font-family:”標楷體”; line-height:150%>
這種用法的優(yōu)點 是可靈巧應用樣式於各標簽中，但是缺點則是沒有整篇文件的『統(tǒng)一性』。
二、使用STYLE標簽： 將樣式規(guī)則寫在<STYLE>…</STYLE>標簽之中。
<STYLE TYPE=”text/css”>
<!–
樣式規(guī)則表
–>
</STYLE>
例如：
<STYLE TYPE=”text/css”>
<!–
BODY {
color: BLUE;
background: #FFFFCC;
font-size: 9pt}
TD, P {
COLOR: GREEN;
font-size: 9pt}
–>
</STYLE>
通常是將整個的 <STYLE>…</STYLE>結構寫在網(wǎng)頁的<HEAD> </HEAD>部份之中。這種用法的優(yōu)點就是在於整篇文件的統(tǒng)一性，只要是有聲明的的元件即會套用該樣式規(guī)則。缺點就是在個別元件的靈活度不足。
三、使用 LINK標簽： 將樣式規(guī)則寫在.css的樣式檔案中，再以<LINK>標簽引入。
假設我們把樣式規(guī)則存成一個example.css的檔案，我們只要在網(wǎng)頁中加入
<LINK REL=STYLESHEET TYPE=”text/css” HREF=”example.css”>
即可套用該樣式檔案中所制定好的樣式了。 通常是將LINK標簽寫在網(wǎng)頁的<HEAD> </HEAD>部份之中。這種用法的優(yōu)點就是在於可以把要套用相同樣式規(guī)則的數(shù)篇文件都指定到同一個樣式檔案即可。缺點也是在個別文件或元件的靈活度不足。
四、使用@import引入： 跟LINK用法很像，但必 放在<STYLE>…</STYLE> 中。
<STYLE TYPE=”text/css”>
<!–
@import url(引入的樣式表的位址、路徑與檔名);
–>
</STYLE>
例如：
<STYLE TYPE=”text/css”>
<!–
@import url(http://yourweb/ example.css);
–>
</STYLE>
要注意的是，行末的分號是絕對不可少的！切記切記！
很明顯的，不管是LINK還是@import的用法都可能可以 直接套用他人現(xiàn)有的樣式表。不過，基於網(wǎng)路的禮儀，這種事別做的好，至少也應該知會 對方一聲，要先取得人家的同意才行！
而四種應用方法各有其優(yōu)缺點，您可以綜合地使用，并不會相互抵觸。但是如果相同的性質屬性遇上重復的聲明的話，就要考量套用優(yōu)先權的問題了！一般來講，優(yōu)先權的順序有以下的幾點原則：
網(wǎng)頁設計者的樣式設定 ＞ 使用者的樣式設定 ＞ 瀏覽器的樣式設定
STYLE屬性的樣式設定 ＞ STYLE標簽樣式設定 ＞ 鏈結進來的樣式設定
後面聲明的樣式設定 ＞ 前面的樣式設定
所謂『鏈結進來的樣式設定』指的就是用上面提到過的LINK標簽與@import引入這兩種應用方式所鏈結進來的的樣式設定。
以上就是ＣＳＳ最基本的聲明與應用的方法介紹，有了這些基本的認識與方法，您已經(jīng)可以開始建立您的樣式表！除了上面提到的基本的聲明與應用的方法之外，還有其它的聲明與應用的方法，將為您在下一章中再作介紹。
關 於 Ｃ?。印。印〉摹「拧≌?
?。茫樱邮恰篊ascading Style Sheets』的簡稱，中文翻為「串接樣式表」，也有人只翻為「樣式表」。ＣＳＳ用以作為網(wǎng)頁的排版與風格設計，在所謂的「新式網(wǎng)頁」里 ，ＣＳＳ不容置疑是相當重要的一環(huán)。ＣＳＳ是以既有的基礎，用以彌補既存ＨＴＭＬ 規(guī)格里的不足，也讓網(wǎng)頁的設計更為靈活。
這份教學文件就要來為您介紹ＣＳＳ的應用羅！在這邊并不介紹ＣＳＳ的所有規(guī)格 ，僅就您在網(wǎng)頁寫作上較常用到，較可能用到的語法部份及應用的方法來為您作介紹。也 由於現(xiàn)在兩瀏覽器的相容是漸行漸遠，將貼心地為您注明支援該語法的瀏覽器。而ＩＥ從 3.0開始便支援部份語法了，這點也會為為您注明的。
各 章 節(jié) 的 概 略 介 紹
為了您參考與學習上的方便，在這里先為您大略地說明一下這份教學文件各章節(jié)所包含的內容吧！讓您在參考時有個方向與概念。基本上，前兩章著重於概念與基本認知的建立，也就是一些為您做一些札根的工作；第三章則為您補充在應用與設定上的一些其它方式或特性的說明與介紹。而第四章到第六章則著重於語法、參數(shù)與性質的介紹，也 就是真正建立在樣式表里面的東東。
第一章?。茫樱拥幕菊J識：
就是本章啦！就介紹您一些ＣＳＳ基本概念與認識。
第二章 ＣＳＳ的應用方式：
為您介紹ＣＳＳ的基本宣告、應用方法與特性介紹。
第三章?。茫樱拥膽醚a充：
為您介紹ＣＳＳ的其它宣告方式、應用與特性介紹。
第四章 頁面性質的ＣＳＳ：
為您介紹頁面性質的ＣＳＳ相關語法、參數(shù)與性質。
第五章 文字性質的ＣＳＳ：
為您介紹文字性質的ＣＳＳ相關語法、參數(shù)與性質。
第六章 區(qū)塊性質的ＣＳＳ：
為您介紹區(qū)塊性質的ＣＳＳ相關語法、參數(shù)與性質。
應 用 上 的 基 本 認 識
應用ＣＳＳ并不困難，但是請您先參考這里的基本認識，對一些用語有了一點基本概念後，對於您在看後面的教學會有助益，看起來也才不會太吃力！
一、基本用語的認識：
元件(element)：亦即HTML基本語法中的標簽(tag)。
屬性(attribute)：用以描述標簽特性的屬性。
例如：
<HR WIDTH=”90%”>中，HR為標簽，WIDTH為屬性，而80%即為WIDTH屬性的值。
性質(property)：用以描述元件的特性。相當於HTML基本 語法中的屬性。
樣式(style)：擁有一組或數(shù)組的性質，用以描述元件特性。
挑選者(selector)：套用樣式的元件。
例如：
H3{ COLOR : BLUE }中，H3為挑選者，COLOR為性質，BLUE為COLOR性質的值。
二、基本單位的認識：
有相對單位與絕對單位兩種單位 表達方式。
相對單位：
『em』：相對於字母高度的比例因子。
『en』：相對於字型大小的比例因子。
『%』：相對於長度單位（通常是目前字型的大?。┑陌俜直壤?。
絕對單位：
『in』：英寸。
『cm』：公分。
『mm』：公厘。
『px』：像素（系統(tǒng)預設單位）。
『pc』：pica，印刷活字單位。
『pt』：像點。
相對關系：1in= 6pc= 72pt= 2.54cm= 25.4mm
三、顏色使用的認識：
顏色的表示共有五種方式。
『#RRGGBB』：
以三個00到FF的十六進位值分別表示0到255十進位值的紅、綠、藍三原色數(shù)值。
『#RGB』：
簡略表示法，只用三個0到F的十六進位值分別表示紅、綠、藍三原色數(shù)值。而事實上，瀏覽器會自動擴展為六個十六進位的值，如『#ABC』將變?yōu)椤?AABBCC』。但是，顯見這樣的 表示法并不精確。
『rgb(R,G,B)』：
以0到255十進位值的紅、綠、藍三原色數(shù)值來表示顏色。
『rgb(R%,G%,B%)』：
以紅、綠、藍彼此相對的數(shù)值比例來表示顏色，如『rgb(60%,100%,75%)』。
『Color_Name』：
直接以顏色名稱來表示顏色，共有141種標準的顏色名稱。