# 常用CSS樣式屬性

[toc]

### 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:135px |
| height | 高度 | auto(自動決定)、數字+單位 | height:100px |
| z-index | Z軸高度(立體，是否在另一個元件之上) | auto(自動決定)、數字 | z-index:135 |
| position | 定位方式 | absolute(絕對定位-依視窗座標，原點為父視窗左上角)、relative(相對定位-以一般網頁排列[right.center.left]後再根據座標定位，原點為定位後的位置)、static(靜態定位-以一般網頁排列) | position:absolute |
| top(物件的position屬性須為absolute或relative) | 物件的Y座標(原點根據postion屬性有所不同) | 數字+單位 | top:15px |
| left(物件的position屬性須為absolute或relative) | 物件的X座標(原點根據postion屬性有所不同) | 數字+單位 | left:15px |

### 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(不加刪除線)、verline(加頂線)、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 |
| border-(框線位置)-width-padding | 邊框補白(同cellpadding) | 數字 | padding:5 |
| border-collapse | 格子間關係 | separate(分開)、collapse(粘合) | border-collapse:separate; |
| border-spacing | 格子間距(同cellspacing) | 數字 | border-spacing: 2px; |

### 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 |

###### tags: `前端讀書會` `CSS`