Cascading Style Sheets (CSS)
Download
Report
Transcript Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
鄧姚文
http://www.ywdeng.idv.tw
大綱
簡介
樣式表
類別選擇器
ID 選擇器
前後文選擇器
2
段落屬性
背景屬性
邊框屬性
區塊屬性
連結屬性
定位屬性
文字屬性
CSS 簡介
Separation of style from structure
將樣式（裝飾）和文章結構分開
HTML 標籤只用來標示文章結構
CSS 負責裝飾
CSS 和 JavaScript 搭配使用，可以動態改變網頁的呈現
效果
3
CSS 基本語法
CSS 的修飾對象可以是任何 HTML Tag
多個 HTML Tag 之間以逗點（,）分隔
屬性定義以大括弧（{ }）括住
屬性定義的寫法是 屬性名稱:屬性值
多個屬性定義之間以分號（;）分隔
<style type="text/css">
h1, h2 { color:red; font-weight:bold }
</style>
4
CSS 的種類
Inline (同列) : 使用HTML標記的STYLE屬性，只於定義
的區段有效。
<p style="background-color:#0000FF">
Embedding (內嵌) : 使用 <style>...</style>標記，置於
body本文區之前，供整個網頁使用。可使用多個
<style>...</style>標記
5
<HTML> 文件開始
<STYLE TYPE=text/css> 排版樣式區開始
<！-- 排版樣式區內容 -->
</STYLE> 排版樣式區結束
<BODY> 本文區開始
本文區內容
</BODY> 本文區結束
</HTML> 文件結束
CSS 的種類（續）
Linking (連結) : 使用 <link>標記 ( 用於HEAD區 )。
將排版樣式分開處理，以 . CSS 為副檔名儲存成一個獨立的
文字檔，再連結使用。
可使用多個<link>標記。
<HTML> 文件開始
<HEAD> 標頭區開始
<LINK TYPE=text/css REL=stylesheet HREF=s1.css> 連結CSS檔
</HEAD> 標頭區結束
<BODY> 本文區開始
本文區內容
</BODY> 本文區結束
</HTML> 文件結束
6
CSS 相關的 HTML 標記、屬性
CSS 相關的 HTML 標記 :
<STYLE>...</STYLE> 設定 Style Sheet 格式
<LINK> 連結指令
<DIV>...</DIV> 分離區段 ( 允許重疊顯示 )
<SPAN>...</SPAN> 小區段範圍
CSS 相關的 HTML 標記屬性 :
7
STYLE = cssl-properties 樣式
ID = value 代號
CLASS = classname 種類
Style Sheet 樣式表
樣式宣告的格式: 選擇器{樣式規則;}
8
選擇器(Selector)：樣式要套用的對象
樣式規則(Rule)：樣式設定的內容
每個樣式後要加 ;
Style Sheet 樣式表（續）
集中宣告格式：同時宣告數個樣式
body {
background:green;
color:blue;
font:12;
font-family:新細明體;
}
9
Style Sheet 樣式表（續）
分開寫也OK
body {
background:green ;
color:blue ;
}
body {
font:12 ;
font-family:新細明體
}
10
;
Style Sheet 樣式表（續）
一次指定多個選擇器
p, h1, h2 {
color:red
}
11
將樣式表用到網頁上
inline
使用於HTML標籤中的STYLE指令
12
在每個HTML標籤中，都可用STYLE參數，將CSS設定於後，
CSS字串要用引號括住
<div style="position:absolute; width:20px;
height:20px">
將樣式表用到網頁上（續）
embedding
在<HEAD>與</HEAD>之間宣告
整個文件的 <h1> 全部都套用此樣式
<HTML>
<HEAD>
<style type="text/css">--------指明為CSS樣式
<!-h1 { color:blue; }
其他樣式
-->
</STYLE>
</HEAD>
13
將樣式表用到網頁上（續）
class selector
寫在<STYLE>標籤中，但是並不套用於任何標籤。
先給它一個名字，將設定寫好，需要時再利用class參數指
定
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!-.mainUser {color:#0000AA; font-size:20px}
-->
</STYLE>
</HEAD>
<BODY>
<div class="mainUser">...</div>
</BODY>
</HTML>
14
將樣式表用到網頁上（續）
class selector
限定樣式類別可套用的對象
span.mainWin {color:#0000AA; font-size:20px}
<span CLASS=mainWin>
只有SPAN標籤可用CLASS參數套用此設定，其它不行
15
將樣式表用到網頁上（續）
id selector
依據HTML中各標籤的ID值自動的套用樣式
#std {color:#FF0000; font-size:20px}
<div id="std">
只有 ID 相符的 <span> 標籤套用樣式：
span#std {color:#0000AA; font-size:20px}
<span ID="std">
16
將樣式表用到網頁上（續）
先建立好樣式檔,再連結
先將樣式內容打好存成*.CSS檔
然後以連結方式加入
<Link REL=stylesheet TYPE="text/css" HREF="檔名.css">
17
就可以將寫好的*.css設定檔引入網頁中
此指令只能用在<HEAD>標籤中。
將樣式表用到網頁上（續）
匯入檔
18
先建好CSS樣式檔
在HTML檔中<STYLE>與</STYLE>之間加入
@import URL("樣式檔位址") ;
此指令只能用在<STYLE>標籤中。
Context Selector 前後文選擇器
依特定狀況而定的樣式
例如
19
H1 EM { COLOR:RED }
<H1> 這是特別 <EM> 重要的字 </EM> </H1>
重要的字會以EM的樣式設定來呈現（紅色）
H1與EM間需以空格隔開,非逗號,樣式後面無分號;
段落屬性的設定
letter-spacing
20
功能 :設定文字間隙 ( 可設單位屬性 : 點 pt、英寸 in、公分
cm、像素 px )
語法 : { letter-spacing : normal︱( length ) }
範例 : {letter-spacing:10pt}
此性質可設定字距，也就是字與字的間隔，只需指定一個
長度單位給它，如cm、mm、in、pt、px、em、ex等等，或
用normal特徵字設為預設值。
如 letter-spacing=3px，則設定字距為 3px。
段落屬性的設定（續）
line-height
21
功能 : 設定文字行列高度 ( 可設單位屬性 : 點 pt、英寸 in、
公分 cm、像素 px、百分比 % )
語法 : { line-height : normal︱( number )︱( length )︱
( percentage ) }
範例 : {line-height:10pt}
此性質可設定列高，可指定特徵字normal設為預設值，或
指定含單位的長度值，或百分比（參照於父元件）均可。
如line-height:3px，則設定列高為3px。
段落屬性的設定（續）
text-align
22
功能 :設定調整文字 ( 可設左邊、右邊、置中、整齊 )
語法 : { text-align : left︱right︱center︱justify }
範例 : {text-align:center}
這個性質可決定文句在區塊內的水平對齊方式，可用值有
left、right、center、justify。
如 text-align:center，則文字水平置中。
段落屬性的設定（續）
text-decoration
功能 : 設定文字裝飾
語法 : { text-decoration : none︱underline︱line-through︱
overline }
範例 : {text-decoration:underline}
設定此區塊內的字句要不要加裝飾線，可用值有
23
none（不加）、
underline（加底線）、
overline（加頂線）、
line-through（加刪除線）、
blink（大致同none）。
如text-decoration:under-line，則文字加底線。
段落屬性的設定（續）
text-indent
24
功能 : 設定文字縮排 ( 可設單位屬性 : 點pt、英寸in、公分
cm、像素px、百分比% )
語法 : { text-indent : ( length )︱( percentage ) }
範例 : {text-indent:1cm}
這個性質可設定段落的首行縮排（就像作文時一樣，首行
要縮排），可指定含單位的長度值，或是百分比值（參照
於父元件）。
如text-indent:24px，則縮排24px。
段落屬性的設定（續）
text-transform
功能 : 設定文字改變
語法 : { text-transform : none︱capitalize︱uppercase︱
lowercase }
範例 : {text-transform:capitalize}
設定英文字母大小寫顯示法。可用值有
25
none（不自動轉換）、
capitalize（第一個字母自動轉為大寫）、
uppercase（全部自動轉換為大寫）、
lowercase（全部自動轉換為小寫）。
如text-transform:lowercase，則全部英文字都會自動轉為小
寫。
段落屬性的設定（續）
text-autospace
這是用來調整字距的性質，用來設定是否於特定位置加大
空白間距，以增加美觀。可用特徵字有
26
none（不使用）、
ideograph-alpha（於遠東語系與拼音語系間加大空白）、
ideograph- numeric（於遠東語系與數字間加大空白）、
ideograph-parenthesis（於遠東語系與括號間加大空白）、
ideograph- space（遠東語系之兩旁加大空白）。
一般很少有人用這個性值，通常是text-autospace:none。
段落屬性的設定（續）
text-justify
設定段落中各句如何調整，使段落左右之邊界對齊。可用
值有
27
inter-word（利用調整字距）、
newspaper（利用調整字距或字母間距）、
distribute（與newspaper很像，但最適用於東亞）、
distribute-all-lines（連最後一行也調整至同寬）、
inter-ideograph（利用增加或減少字距來調整）、
auto（由瀏覽器語系決定）。
這個性質要 ie5.0 以上才能使用，一般都用 text-justify:auto。
段落屬性的設定（續）
word-break
設定一行結束時的斷字法，可用值有
28
normal（允許斷字）、
break-all（允許斷字，適用於大量中文夾雜少量英文）、
keep-all（只允許於英文斷字，適用於大量英文夾雜少量中文）。
一般用 word-break:break-all 較適於中文字。
背景屬性設定
背景性質設定可說是css最強悍的地方，有了這些css，
我們甚至可以在一段文字，或一格表格中，套用不同
的背景。
29
背景屬性設定（續）
<html>
<head>
<style>
span {position:absolute;border:solid 1px black;width:300px;height:100px}
span.front {position:absolute;background:url(../graph/001.jpg) repeat}
span.back {position:absolute;background:url(../graph/002.jpg) repeat}
span span {position:absolute;width:200;font:bold 50px arial;border:none}
</style>
</head>
<body>
<span class=back style="top:20px;left:20px"></span>
<span class=front style="top:0px;left:0px">
<font style="color:gray;top:25px;left:57px">scjh</font>
<font style="color:blue;top:18px;left:50px">scjh</font>
</span>
</body>
</html>
30
背景屬性設定（續）
Background
功能 : 設定背景圖片、顏色、混合、透空、捲動、位置、
重複
語法 :
{ background : transparent︱( scroll )︱( color )︱url ( url )︱
( position )︱( repeat ) }
background-attachment
31
功能 :設定背景圖片是否捲動 ( 分為 : 捲動、固定 )
語法 : { background-attachment : scroll︱fixed }
背景屬性設定（續）
background-color
功能 :設定背景顏色、透空
語法 : { background-color : transparent︱( color ) }
( color ) 可為顏色名稱 ( 16種 ) 或16進制表示法 - #rrggbb
( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度
範例 : {background-color:#ff0000}
background-image
32
功能 : 設定背景圖片
語法 : { background-image : none︱url ( url ) }
範例 : {background-image:url(1.jpg)}
背景屬性設定（續）
background-position
功能 :設定背景位置 ( 可設單位屬性 : 點pt、英寸in、公分
cm、像素px、百分比% )
語法 :
{ background-position : top︱middle︱bottom︱left︱center︱
right︱( length )︱( position ) }
background-repeat
33
功能 :設定背景重複填滿方式
語法 : { background-repeat : repeat︱repeat-x︱repeat-y︱norepeat }
邊框屬性設定
在CSS中，幾乎所有的元件都可以使用框線設定，不
像HTML般，只有表格才可使用框線。
不但可任意控制框線粗細、顏色，就連框線的形式都
可以設定
34
邊框屬性設定（續）
border
35
功能 :設定邊框
語法 : { border : ( border-width )︱( border-style )︱( color ) }
( border-width ) - 可設薄、普通、厚、長度-單位屬性 : 點pt、
英寸in、公分cm、像素px
( border-style ) - 可設無、實線、雙線、溝線、脊線、嵌入
線、浮出線
( color ) - 可設為顏色名稱 ( 16種 ) 或16進制表示法 #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度
範例 : {border:thick double red}。
邊框屬性設定（續）
border-bottom
功能 : 設定下邊框
語法 : { border-bottom : ( border-bottom-width )︱( borderstyle )︱( color ) }
範例 : {border-bottom:groove #00ff00}
border-bottom-color
36
功能 : 設定下邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制
表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍
強度
語法 : { border-bottom-color : ( color ) }
範例 : {border-bottom-color:blue}
邊框屬性設定（續）
border-bottom-style
功能 : 設定下邊框樣式 ( 可設無、實線、雙線、溝線、脊線、
嵌入線、浮出線 )
語法 : { border-bottom-style : none︱solid︱double︱
groove︱ridge︱inset︱outset }
範例 : {border-bottom-style:inset}
border-bottom-width
37
功能 : 設定下邊框寬度 ( 可設薄、普通、厚、長度-單位屬
性 : 點pt、英寸in、公分cm、像素px )
語法 : { border-bottom-width : thin︱medium︱thick︱
( length ) }
範例 : {border-bottom-width:1cm}
邊框屬性設定（續）
border-color
功能 : 設定邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表
示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強
度
語法 : { border-color : ( color ) }
範例 : {border-color:#ffff00}
border-left
38
功能 : 設定左邊框
語法 : { border-left : ( border-left-width )︱( border-style )︱
( color ) }
範例 : {border-left:thin outset}
邊框屬性設定（續）
border-left-color
功能 : 設定左邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制
表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍
強度
語法 : { border-left-color : ( color ) }
範例 : {border-left-color:#00ff00}
border-left-style
39
功能 : 設定左邊框樣式 ( 可設無、實線、雙線、溝線、脊線、
嵌入線、浮出線 )
語法 : { border-left-style : none︱solid︱double︱groove︱
ridge︱inset︱outset }
範例 : {border-left-style:ridge}
邊框屬性設定（續）
border-left-width
功能 : 設定左邊框寬度 ( 可設薄、普通、厚、長度-單位屬
性 : 點pt、英寸in、公分cm、像素px )
語法 : { border-left-width : thin︱medium︱thick︱( length ) }
範例 : {border-left-width:thick}
border-right
40
功能 : 設定右邊框
語法 : { border-right : ( border-right-width )︱( borderstyle )︱( color ) }
範例 : {border-right:10pt #00a}
邊框屬性設定（續）
border-right-color
功能 : 設定右邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制
表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍
強度
語法 : { border-right-color : ( color ) }
範例 : {border-right-color:#00f}
border-right-style
41
功能 : 設定右邊框樣式 ( 可設無、實線、雙線、溝線、脊線、
嵌入線、浮出線 )
語法 :
{ border-right-style : none︱solid︱double︱groove︱ridge︱
inset︱outset }
範例 : {border-right-style:groove}
邊框屬性設定（續）
border-right-width
功能 : 設定右邊框寬度 ( 可設薄、普通、厚、長度-單位屬
性 : 點pt、英寸in、公分cm、像素px )
語法 : { border-right-width : thin︱medium︱thick︱( length ) }
範例 : {border-right-width:10px}
border-style
42
功能 : 設定邊框樣式 ( 可設無、實線、雙線、溝線、脊線、
嵌入線、浮出線 )
語法 : { border-style : none︱solid︱double︱groove︱ridge︱
inset︱outset }
範例 : {border-style:double}
邊框屬性設定（續）
border-top
功能 : 設定上邊框
語法 : { border-top : ( border-top-width )︱( border-style )︱
( color ) }
範例 : {border-top:1in yellow}
border-top-color
43
功能 : 設定上邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制
表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍
強度
語法 : { border-top-color : ( color ) }
範例 : {border-top-color:red}
邊框屬性設定（續）
border-top-style
功能 : 設定上邊框樣式 ( 可設無、實線、雙線、溝線、脊線、
嵌入線、浮出線 )
語法 : { border-top-style : none︱solid︱double︱groove︱
ridge︱inset︱outset }
範例 : {border-top-style:solid}
border-top-width
44
功能 : 設定上邊框寬度 ( 可設薄、普通、厚、長度-單位屬
性 : 點pt、英寸in、公分cm、像素px )
語法 : { border-top-width : thin︱medium︱thick︱( length ) }
範例 : {border-top-width:thin}
邊框屬性設定（續）
border-width
45
功能 : 設定邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 :
點pt、英寸in、公分cm、像素px )
語法 : { border-width : thin︱medium︱thick︱( length ) }
範例 : {border-width:10pt}
邊框屬性設定（續）
<script language="JavaScript" type="text/javascript">
function change(index){
index.style.borderstyle="inset";
index.style.color="blue";
}
function rechange(index){
index.style.borderstyle="outset";
index.style.color="black";
}
46
邊框屬性設定（續）
<style type="text/css">
span {
position:absolute;
border:outset 3px;
width:80px;
height:22px;
cursor:hand;
text-align:center;
font-size:18px;
color:black;
font-family:arial;
background:url(../graph/001.jpg);
}
</style>
47
邊框屬性設定（續）
<body>
<span style="top:5px;left:5px" onMouseOver="change(this)"
onMouseOut="rechange(this)">html</span>
<span style="top:35px;left:5px" onMouseOver="change(this)"
onMouseOut="rechange(this)">css</span>
<span style="top:65px;left:5px" onMouseOver="change(this)"
onMouseOut="rechange(this)">jscript</span>
<span style="top:95px;left:5px" onMouseOver="change(this)"
onMouseOut="rechange(this)">JAVA</span>
<span style="top:125px;left:5px"
onMouseOver="change(this)"
onMouseOut="rechange(this)">cgi</span>
<span style="top:155px;left:5px"
onMouseOver="change(this)"
onMouseOut="rechange(this)">asp</span>
</body>
48
區塊屬性設定
區塊是：
用<div>、<span>等標籤所建立出的邏輯區域
圖形
表格
在DHTML中，使用區塊是非常頻繁的，所以區塊設定
就顯得非常有用。
49
區塊屬性設定（續）
Clear
50
能 :設定浮動元件位置 ( 可設無、左邊、右邊、兩邊 )
語法 : { clear : none︱left︱right︱both }
範例 : {clear:left}
區塊屬性設定（續）
Clip
51
功能 :剪輯可見部份
語法 : { clip : auto︱( shape ) }
( shape ) - rect ( top ) ( right ) ( bottom ) ( left )
這個性質可決定區塊的哪些範圍是可視的，而元件在此設
定範圍外是不可視的。
必需指定一個矩形區域，依序為上、右、下、左座標，座
標原點是此元件的左上角。
例如：
clip:rect(0,100,100,0)，則從(0,0)至(100,100)間都是可視的，
此元件在這範圍外就看不到了。
區塊屬性設定（續）
Cursor
52
功能 :設定滑鼠游標 ( 可設自動、十字、箭頭、手形、移動、
改變 - 雙箭頭、文字、等待、求助 )
語法 :
{ cursor : auto︱crosshair︱default︱hand︱move︱e-resize︱
ne-resize︱nw-resize︱n-resize︱se-resize︱sw-resize︱sresize︱w-resize︱text︱wait︱help }
區塊屬性設定（續）
display
功能 :設定是否顯示
語法 : { display : none }
這個性質可設定整個元件要不要顯示，以及顯示的方式。
53
none代表不顯示，且此元件不占任何空間。
block代表顯示，並視為區塊，前後緊臨的元件將換行顯示。
inline代表顯示，但前後緊臨的元件會排在其左右，並不會換行。
list-item代表顯示，與block大致相同。
table-header-group只能用在<thead>，表格在多頁時（如列印），
此區之表格將會自動加在有此表格之頁面的第一列。
table-header-group與table-footer-group相似，但用於<tfoot>
ie4.0不支援block、inline、 list-item這三種設定。
區塊屬性設定（續）
Float
功能 :設定浮動元件接續位置
語法 : { float : none︱left︱right }
Height
54
功能 : 設定元件高度 ( 可設單位屬性 : 點pt、英寸in、公分
cm、像素px、百分比% )
語法 : { height : auto︱( length )︱( percentage ) }
範例 : {height:10pt}
區塊屬性設定（續）
@import
left
功能 : 設定輸入排版樣式
語法 : @import url ( url )
功能 : 設定元件左邊位置 ( 可設單位屬性 : 點pt、英寸in、
公分cm、像素px、百分比% )
語法 : { left : auto︱( length )︱( percentage ) }
list-style
55
功能 : 設定條列項目符號
語法 : { list-style : keyword︱position︱url ( url ) }
區塊屬性設定（續）
list-style-image
list-style-position
功能 : 設定圖片為條列項目符號
語法 : { list-style-image : none︱url ( url ) }
功能 : 設定條列項目符號位置 ( 可設內部、外部 )
語法 : { list-style-position : inside︱outside }
list-style-type
56
功能 : 設定條列項目符號形狀 ( 可設無、圓形、圓圈、正方
形、小數點、羅馬符號、希臘符號 )
語法 :
{ list-style-type : none︱disk︱circle︱square︱decimal︱
lower-roman︱upper-roman︱lower-alpha︱upper-alpha }
區塊屬性設定（續）
Margin
功能 : 設定文字和邊緣距離 ( 可設單位屬性 : 點pt、英寸in、
公分cm、像素px、百分比% )
語法 : { margin : auto︱( length )︱( percentage ) }
這個性質一次設定上、下、左、右邊界與區塊外之元件間
格距離。使用時應依序指定上、右、下、左，如margin:3px
2px 5px 1px。亦可一次指定四邊，如margin:2px，則全部均
設2px。
margin-bottom
57
功能 :設定文字和下邊緣距離 ( 可設單位屬性 : 點pt、英寸in、
公分cm、像素px、百分比% )
語法 : { margin-bottom : auto︱( length )︱( percentage ) }
區塊屬性設定（續）
margin-left
margin-right
功能 : 設定文字和左邊緣距離 ( 可設單位屬性 : 點pt、英寸
in、公分cm、像素px、百分比% )
語法 : { margin-left : auto︱( length )︱( percentage ) }
功能 : 設定文字和右邊緣距離 ( 可設單位屬性 : 點pt、英寸
in、公分cm、像素px、百分比% )
語法 : { margin-right : auto︱( length )︱( percentage ) }
margin-top
58
功能 : 設定文字和上邊緣距離 ( 可設單位屬性 : 點pt、英寸
in、公分cm、像素px、百分比% )
語法 : { margin-top : auto︱( length )︱( percentage ) }
區塊屬性設定（續）
Overflow
功能 : 設定容器元件顯示方法
語法 : { overflow : none︱clip︱scroll }
這個性質是設定當區塊內包含的元件大於區塊之寬或高時，
顯示的方法。可用值有
59
auto（自動設定，當需要時出現捲軸）、
scroll（強迫顯示捲軸，即使內部元件並無超過區塊邊界）、
hidden（超出區塊的部份不顯示）、
visible（全部顯示，無視區塊大小）。
最常用的是overflow:auto讓瀏覽器自動判斷
區塊屬性設定（續）
Padding
60
功能 : 設定元件和邊緣距離 ( 可設單位屬性 : 點pt、英寸in、
公分cm、像素px、百分比% )
語法 : { padding : ( length )︱( percentage ) }
這個性質一次設定上、下、左、右邊界的間格距離。使用
時應依序指定上、右、下、左，如padding:3px 2px 5px 1px。
亦可一次指定四邊，如padding:2px，則全部均設2px。
區塊屬性設定（續）
padding-bottom
padding-left
功能 : 設定元件和下邊緣距離 ( 可設單位屬性 : 點pt、英寸
in、公分cm、像素px、百分比% )
語法 : { padding-bottom : ( length )︱( percentage ) }
功能 : 設定元件和左邊緣距離 ( 可設單位屬性 : 點pt、英寸
in、公分cm、像素px、百分比% )
語法 : { padding-left : ( length )︱( percentage ) }
padding-right
61
功能 : 設定元件和右邊緣距離 ( 可設單位屬性 : 點pt、英寸
in、公分cm、像素px、百分比% )
語法 : { padding-right : ( length )︱( percentage ) }
區塊屬性設定（續）
padding-top
page-break-after
功能 : 設定元件和上邊緣距離 ( 可設單位屬性 : 點pt、英寸
in、公分cm、像素px、百分比% )
語法 : { padding-top : ( length )︱( percentage ) }
功能 : 設定元件後加分頁符號
語法 : { page-break-after : auto︱left︱right︱always }
page-break-before
62
功能 : 設定元件前加分頁符號
語法 : { page-break-before : auto︱left︱right︱always }
區塊屬性設定（續）
position
top
功能 : 設定元件位置 ( 可設絕對、相對、靜態 )
語法 : { position : absolute︱relative︱static }
功能 : 設定元件上方位置 ( 可設單位屬性 : 點pt、英寸in、
公分cm、像素px、百分比% )
語法 : { top : auto︱( length )︱( percentage ) }
vertical-align
63
功能 : 元件垂直調整
語法 : { vertical-align : baseline︱middle︱sub︱super︱texttop︱text-bottom︱top︱bottom }
區塊屬性設定（續）
Visibility
功能 : 設定是否可見( 可設可見、隱藏、繼承 )
語法 : { visibility : visible︱hidden︱inherit }
設定此元件要不要顯示，這個性質與display有相似之處，但
不相同。可用值有
64
visible（顯示）、
inherit（貼附，如此元件所在之父元件可見，則此元件為可見，
反之亦然）、
hidden（隱藏，但仍占有空間，此與display:none不同）。
用法如visibility:hidden則可隱藏此元件。
區塊屬性設定（續）
width
65
功能 : 設定元件寬度 ( 可設單位屬性 : 點pt、英寸in、公分
cm、像素px、百分比% )
語法 : { width : auto︱( length )︱( percentage ) }
此性質可設定區塊的寬度，可用單位或百分比法來指定其
值，或是用特徵字auto。如width:30px或width:50%均是可行
的方法，而width:auto代表讓瀏覽器幫你決定。至於百分比
法是依據其父元件的大小來決定的。
區塊屬性設定（續）
z-index
66
功能 : 設定z軸參數 ( 正數為上方，負數為下方 )
語法 : { z-index : number }
所謂css之2.5d擺設就靠這個性質，當有很多元件重疊時
（如position:absolute就會發生），擁有較大z-index值的元
件會擺在上面，此值可正可負。
如z-index:3會擺在z-index:2的元件之上。
Anchor Pseudo Classes--連結屬性設定
a:link 連結點
範例 :
a:visited {font:italic 細明體 12pt red}
a:hover 移至連結點
範例 :
範例 :
a:link {font:italic 細明體 12pt red}
a:visited 瀏覽過連結點
a:hover {font:italic 細明體 12pt red}
a:active 選取連結點
範例 :
67
a:active {font:italic 細明體 12pt red}
定位設定
position性質
這個性質是設定元件的擺放方式，我們可依據需要來設定適當的
值。可用的屬性值有︰
68
absolute（絕對定位）、
relative（相對定位）、
static（靜態定位）。
所謂position:absolute就是指元件定位法是以父元件（通常就是此
網頁）的絕對座標來定位（原點為父元件左上角）。
position:relative是指讓此元件以一般網頁排列方式決定位置後，
再以此點為相對座標定位。
position:static是如同舊式瀏覽器般，以一般網頁排列方式決定位
置，並且不能再加以定位。這個屬性設定將會影響座標系統的原
點。
absolute原點為父元件左上角、 relative原點為應有之自然位置、
static不可用座標系統。通常用了這個屬性後，要配合top、left屬
性來決定元件位置。
定位設定（續）
top性質
69
經由position性質設定後，會決定出一個座標系統，再由top
性質來決定此元件有要擺放的垂直位置。屬性值為一測量
長度，可用如in、cm、mm、pt、pc、em、en、ex、px等單
位，但建議用px（因為螢幕一格就是1px）。
如top=20px，則會依座標系統將此元件擺放在原點下方
+20px的位置
position:relative與position:absolute所得的結果會不同。
可以指定負值！
定位設定（續）
left性質
70
這個性質決定元件的水平位置，當然座標系統還是依
position之設定而變。
例如left:30px，則將此元件擺放到座標原點左方+30px的地
方。
定位設定（續）
<html>
<head>
<style>
span {position:absolute;font-size:50px;fontfamily:arial;font-weight:700}
span.small {font-size:40px;color:red}
</style>
</head>
<body>
<span style="top:5px;left:5px;color:gray">scjh</span>
<span style="top:0px;left:0px;color:blue">scjh</span>
<span class=small
style="top:24px;left:100px">css</span>
</body>
</html>
71
文字屬性的設定
文字設定可設定文字的顏色、大小、字型、粗細等
72
<html>
<head>
<style>
span {position:relative;font-size:50px;font-family:arial;font-weight:700}
span.c1 {color:red}
span.c2 {color:blue}
span.c3 {color:green}
span.c4 {color:pink}
span.c5 {color:gold}
</style>
</head>
<body>
<span class=c1>s</span>
<span class=c2>c</span>
<span class=c3>j</span>
<span class=c4>h</span>
<span class=c5>!!!</span>
</body>
</html>
73
文字屬性的設定（續）
Color
功能 :設定文字顏色
語法 : { color : ( color ) }
( color ) 可為顏色名稱 ( 16種 ) 或16進制表示法
#RRGGBB ( 00暗~FF亮 )
#RGB ( 0暗~F亮 ) 表紅綠藍強度
範例 :
74
p {color:red}
p {color:#FF0000}
p {color:#F00}
文字屬性的設定（續）
font
功能 :設定字體樣式、大小寫變化、粗細、大小、文字行列
高度、字型
語法 :
{ font : ( font-style )︱( font-variant )︱( font-weight )︱( fontsize )︱( font-family )︱/ ( line-height ) }
範例 : h1 {font:italic bold 細明體 12pt/18pt}
@font-face
75
功能 :下載字型
語法 : @font-face { font-family : ( font-family ) ; src : url ( url ) }
文字屬性的設定（續）
font-family
功能 :‧設定字型組 ( 字型名稱若為兩個英文單字以上需加
引號 " " ) - 常用字型組 ( arial、arial black、comic sans ms、
times new roman )
語法 : { font-family : ( font-name )︱( generic-family ) }
範例 :
76
{font-family:arial,bedrock}
{font-family:"arial black"}
文字屬性的設定（續）
font-size
功能 :設定字體大小 ( 可設單位屬性 : 點pt、英寸in、公分
cm、像素px、百分比% )
語法 : { font-size : large︱medium︱smaller︱( length )︱
( percentage ) }
範例 :
77
{font-size:large}
{font-size:10pt}
{font-size:50%}
文字屬性的設定（續）
font-style
font-variant
功能 :設定字體樣式 ( 分為 : 正常、斜體 )
語法 : { font-style : normal︱italic }
範例 : {font-style:italic}
功能 :設定字體變化 ( 分為 : 正常、小字體 )
語法 : { font-variant : normal︱small-caps }
範例 : {font-variant:small-caps}
font-weight
78
功能 :設定字體粗細 ( 分為 : 正常、粗字體 )
語法 : { font-weight : normal︱bold }
範例 : {font-weight:bold}