【長度單位】












































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 底部軌道顏色

狼翔月影 發表在 痞客邦 PIXNET 留言(0) 人氣()


留言列表 (0)

發表留言

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼

【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消