CSS 屬性表簡表

CSS 屬性表簡表，列出了一些我們常用的CSS的屬性。

屬性名稱 屬性含義 屬性值

­

字型屬性（Font）

font-family 使用什麼字型 所有的字型

font-style 字型是否斜體 Normal、italic、oblique

font-variant 是否用小體大寫 Normal、small-caps

font-weight 字型的粗細 Normal、bold、bolder、lithter等

font-size 字型的大小 Absolute-size、relative-size、length、percentage等

顔色和背景屬性

Color 定義前景色 顔色

Background-color 定義背景色 顔色

Background-image 定義背景圖案 路徑

Background-repeat 重複方式 Repeat-x、repeat-y、no-repeat

Background-attachment 設定滾動 Scroll、Fixed

Background-position 初始位置 Percentage、length、top、left、right、bottom等

文本屬性

Word-spacing 單詞之間的間距 Normal <length>

Letter-spacing 字母之間的間距 Normal <length>

Text-decoration 文字的裝飾樣式 None|underline|overline|line-through|blink

Vertical-align 垂直方向的位置 Baseline|sub|super|top|text-top|middle|bottom|text-bottom

Text-transform 文本轉換 Capitalize|uppercase|lowercase|none

Text-align 對齊方式 Left|right|center|justify

Text-indent 首行的縮進方式 <length>|<percentage>

Line-height 文本的行高 Normal|<number>|<length>|<percentage>

邊距屬性

Margin-top 頂端邊距 Length|percentage|auto

Margin-right 右側邊距 Length|percentage|auto

Margin-bottom 底端邊距 Length|percentage|auto

Margin-left 左側邊距 Length|percentage|auto

填充距屬性

Padding-top 頂端填充距 Length|percentage

Padding-right 右側填充距 Length|percentage

Padding-bottom 底端填充距 Length|percentage

Padding-left 左側填充距 Length|percentage

邊框屬性

Border-top-width 頂端邊框寬度 Thin|medium|thick|length

Border-right-width 右側邊框寬度 Thin|medium|thick|length

Border-bottom-width 底端邊框寬度 Thin|medium|thick|length

Border-left-width 左側邊框寬度 Thin|medium|thick|length

Border-width 一次定義寬度 Thin|medium|thick|length

Border-color 設定邊框顔色 Color

Border-style 設定邊框樣式 None|dotted|dash|solid等

Border-top 一次定義頂端 Border-top-width|color等

Border-right 一次定義右側 Border-top-width|color等

Border-bottom 一次定義底端 Border-top-width|color等

Border-left 一次定義左側 Border-top-width|color等

Width 定義寬度屬性 Length|percentage|auto

Height 定義高度屬性 Length|auto

Float 文字環繞 Left|right|none

Clear 哪一邊環繞 Left|right|none|both

分級屬性

Display 定義是否顯示 Block、inline、list-item、none

White-space 怎樣處理空白 Normal、pre、nowrap

List-style-type 加項目編号 Disc、circle、square等

List-style-image 加圖案 <url>|none

List-style-position 第二行起始位置 Inside、outside

List-style 一次定義清單 <keyword>|<position>|<url>

滑鼠 ( Cursor ) 屬性

Auto 自動

Crosshair 定位“十”字

Default 預設指針

Hand 手形

Move 移動

e-resize 箭頭朝右方

Ne-resize 箭頭朝右上方

Nw-resize 箭頭朝左上方

n-resize 箭頭朝上方

Se-resize 箭頭朝右下方

Sw-resize 箭頭朝左下方

s-resize 箭頭朝下方

w-resize 箭頭朝左方

Text 文本“I”形

Wait 等待

Help 幫助