CSS可使用長度單位

單位

單位說明

范例

pt

Point，就像是Word里面的Point一樣大小

font-size:10pt

px

Pixels，依您屏幕分辨率而決定大小

font-size:10px

pc

Pica，6個Pica是一英吋

font-size:10pc

mm

公厘，用過尺...這個設定值完全不會因為其它設定而改變

font-size:10mm

cm

公分，不會因為使用者設定而改變

font-size:10cm

%

百分比，大部分是指所在位置寬度或者長度百分比

font-size:10%

CSS可用顏色表示方式

表示方式

表示方式說明

范例

#rrggbb

可以用Windows色彩選擇工具找到

color:#feefc7

rgb(#,#,#)

用數字來表示紅色藍色以及綠色的混合...也可以用Windows色彩選擇工具找

color:rgb(135,255,124)

rgb(%,%,%)

用百分比來代表紅色藍色以及綠色的強度來混合顏色

color:rgb(70%,35%,41%)

顏色名稱

用顏色的名稱來指定顏色

color:brown

CSS可用背景值

名稱

說明

可能值

范例

background

背景

下面的背景設定值皆適用

background:fixed

background-attachment

背景圖性是否固定

fixed,?scroll

background-attachment:fixed

background-color

背景顏色

顏色 transparent(透空)

backgroun-color:yellow

background-image

背景圖片

none(無背景圖) url(****)(圖片位置)

background-image:url(test.jpg)

background-position

背景圖位置

水平?垂直

background-position:135?159

background-repeat

背景是否重復

repeat(重復) repeat-x(水平重復) repeat-y(垂直重復) no-repeat(不重復)

background-repeat:repeat

CSS可用屬性值

名稱

說明

可能值

范例

visibility

顯示或是隱藏

inherit(父組件決定) hidden(隱藏) visible(顯示) 　

visibility:hidden

width

寬度

auto(自動決定) 數字

width:135

height

高度

auto(自動決定) 數字

height:100

z-index

Z軸高度(立體，是否在另一個組件之上)

auto(自動決定) 數字

z-index:135

position

定位方式

absolute (絕對尋址-依窗口坐標，原點為父窗口左上角) relative (相對定位-以一般網頁排列[right.center.left]后再根據坐標定位，原點為定位后的位置) static (靜態定位-以一般網頁排列)

position:absolute

top(對象的position屬性須為absolute或relative)

對象的Y坐標(原點根據postion屬性有所不同)

數字

left(對象的position屬性須為absolute或relative)

對象的X坐標(原點根據postion屬性有所不同)

數字

CSS可用文字設定值

名稱

說明

可能值

范例

font

文字設定

以下所有皆可使用 　

font:arial

font-family

字體

字體名稱

font-family:arial

font-size

字體大小

百分比或是數字(單位)

font-size:12px

font-style

字型樣式

normal(普通) italic(斜體) oblique(斜體)

font-style:italic

font-variant

字型特別樣式

normal(普通) small-caps(大小英文字母)

font-variant:small-caps

font-weight

字型粗細

normal(普通) bold(粗體) bolder(超粗體) lighter(細體) 數字(400=normal?700=bold?)

font-weight:bolder

letter-spacing

字符相距

normal(普通) 數字(預設為0)

letter-spacing:5

text-align

字符對齊

left(左邊) right(右邊) center(中間) justify(左右平分)

text-align:justify

text-decoration

字符樣式

none(普通) underline(加底線) no-underline(不加底線) blink(閃爍) no-blink(不閃爍) line-through(加刪除線) no-line-through(不加刪除線) overline(加頂線) no-overline(不加頂線)

text-decoration:underline

CSS可用表格設定值?框線位置：(上-top.下-bottom.左-left.右-right)

名稱

說明

可能值

范例

border

表格邊框設定

以下所有皆可使用 　

border:green

border-color

border-(框線位置)-color

邊框顏色

任何顏色表示方法

border-color:blue

border-style

border-(框線位置)-style

邊框樣式

none(無邊框) dotted(點線) dashed(虛線) solid(實線) double(雙線) groove(立體凹線) ridge(立體凸線) inset(立體嵌入線) outset(立體隆起線)

border-style:dotted

border-width

border-(框線位置)-width

邊框寬度

數字

border-width:5

padding

邊框補白

數字

padding:5

CSS可用鼠標光標設定值

名稱

說明

可能值

范例

cursor

光標圖標

auto(自動決定) default(默認值) crosshair(十字) hand(手形) move(移動時的光標) help(有問號的游標) text(文字編輯的光標) wait(忙碌中的游標) w-resize(向左箭頭) e-resize(向右箭頭) n-resize(向上箭頭) ne-resize{向右上箭頭) nw-resize(向左上箭頭) s-resize(向下箭頭) se-resize(向右下箭頭) sw-resize(向左下箭頭)?　

cursor:hand

CSS可用滾動條列設定值

名稱

說明

可能值

范例

scrollbar-base-color

滾動條列主色調

顏色

scrollbar-base-color:#aaaaaa

scrollbar-arrow-color

按鈕箭頭的顏色

顏色 　

scrollbar-arrow-color:#000000

scrollbar-face-color

移動棒的顏色

顏色

scrollbar-face-color:#ffee99

scrollbar-highlight-color

按鈕邊框內層左邊與上面的顏色及滾動條底部軌道網狀顏色(與track同時使用網狀會消失)

顏色

scrollbar-highlight-color:?#000000

scrollbar-3dlight-color

按鈕邊框外層左邊與上面的顏色

顏色

scrollbar-3dlight-color:#000000

scrollbar-darkshadow-color

按鈕邊框外層右邊與下面的顏色

顏色

scrollbar-darkshadow-color:#000000

scrollbar-shadow-color

按鈕邊框內層右邊與下面的顏色

顏色

scrollbar-track-color:?#cccccc

scrollbar-track-color

底部軌道顏色

顏色

scrollbar-track-color:?#cccccc