Zona_writing

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可用捲軸列設定值

名稱

說明

可能值

範例

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

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

auto

由使用者瀏覽器預設的滑鼠箭頭。

crosshair

十字交叉的滑鼠箭頭。

default

由使用者作業系統所決定的滑鼠指標。

hand

手指頭指向的滑鼠指標。

move

十字指向四方的指標箭頭。

e-resize

指向右方的箭頭滑鼠指標。

ne-resize

指向右上方的箭頭滑鼠指標。

nw-resize

指向左上方的箭頭滑鼠指標。

n-resize

指向上方的箭頭滑鼠指標。

se-resize

指向右下方的箭頭滑鼠指標。

sw-resize

指向左下方的箭頭滑鼠指標。

s-resize

指向下方的箭頭滑鼠指標。

w-resize

指向左方的箭頭滑鼠指標。

text

代表可編輯文字的Ｉ字滑鼠指標。

wait

表示等待作業或忙碌中的滑鼠指標。

help

箭頭再加上問號的滑鼠指標。