---
# System prepended metadata

title: 常用CSS樣式屬性
tags: [CSS, 前端讀書會]

---

# 常用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`