基礎CSS 2.1標籤語法

長度單位

CSS 裡會使用到單位的語法相當多，像是字體大小 (font-size)，邊緣間距 (margin)，邊框尺寸 (border-width)...等，無論是什麼尺寸，都不出以下兩類：相對單位 (relative length units) 與絕對單位 (relative length units)。以下所列單位均能使用正負值：

類別	單位	意義
相對單位	em	目前大寫 "M" 的高度
	ex	目前小寫 "x" 的高度
	px	pixel, 相對畫素、解析度
	%	相對於目前設定的百分比（可超過100%）
絕對單位	cm	公分 (centimeters)；1cm = 10mm
	mm	公釐 (millimeters)
	in	英吋 (inchs)；1in = 2.54cm
	pt	點 (poits)；1pt = 1/72in
	pc	大點；picas；1pc = 12pt = 4.23mm

色彩單位

色彩單位除了以顏色名稱指定外，可以數值表現 R, G, B 三色光原色之值，有以下四種指定方式：

範例	說明	範圍
#ff23c7	長十六進位：R=ff, G=23, B=c7	#000000~#ffffff
#f30	短十六進位：R=f, G=3, B=0，相當於長十六進位的 #ff3300	#000~#fff
rgb(24,138,244)	十進位，R=24, G=138, B=244	rgb(0,0,0) ~ rgb(255,255,255)
rgb(42%,50%,16%)	百分比，R=42%, G=50%, B=16%	rgb(0%,0%,0%) ~ rgb(100%,100%,100%)

四方簡稱

要設定 padding, border-width, margin...等值時，我們常用四個方位的簡稱來取代四個值，其意義如下：

值	範例	套用範圍
1	margin: 50px	所有邊均為50px
2	margin: 10px 5em	[上、下邊 10px] [左、右邊 5em]
3	padding: 3px 5em 10px	[上邊 3px] [左、右邊 5em] [下邊 10px]
4	border-width: 2px 3px 5px 4px	[上邊 2px] [右邊 3px] [下邊 5px] [左邊 4px] 順時鐘方向

字型設定語法

標籤語法	允許值	初始值	適用元素
font-family 字型	字型名稱 \| 系列名稱	依瀏覽器設定	all
font-weight 粗細	normal \| bold \| bolder \| light \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \|	normal (500)	all
font-style 式樣	normal \| italic \| oblique	normal	all
font-size 尺寸大小	xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large \| smaller \| larger \| 長度 \| 百分比	medium	all
font-variant 變形	small-caps \| normal	normal	all
font 字型綜合設定	font-style \|\| font-weight \|\| font-variant \|\| font-size \|\| font-family	c	all

文字排版語法

標籤語法	允許值	初始值	適用元素
text-decoration 文字裝飾	none \| underline, overline, line-through, blink \|	none	all
text-indent 首行縮排	em	0em	all
letter-spacing 字 (母) 距	normal \| 長度	normal	all
word-spacing 單字距	normal \| 長度	normal	all
line-height 行高	normal \| 長度 \| 百分比 \| 數字	normal	all
text-align 文字水平對齊	left \| right \| center \| justify (justify: 兩端對齊)	left	all
vertical-align 垂直對齊	baseline \| top \| middle \| bottom \| text-top \| text-bottom \| super \| sub \| 百分比 \| 數字	left	all
text-transform 大小寫切換	none \| uppercase \| lowercase \| capitalize	none	all

項目列表語法

標籤語法	允許值	初始值	適用元素
list-style-type 一般型態的項目符號	disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none	disc \| decimal	列表元素
list-style-image 圖片項目符號	url \| none	無定義	列表元素
list-style-position 列表位置	inside \| outside	outside	列表元素
list-style 列表綜合應用	list-style-type \|\| list-style-image \|\| list-style-position	參照上述，並依序宣告	列表元素

背景顏色語法

標籤語法	允許值	初始值	適用元素
color 顏色（字，或前景色）	顏色值	依瀏覽器設定	all
background-color 背景顏色	顏色值 \| transparent	transparent	all
background-image 背景圖片	<url> \| none	none	all
background-repeat 重覆背景圖片排列	repeat \| repeat-x \| repeat-y \| no-repeat	no-repeat	all
background-position 背景圖片位置	百分比 \| 長度 \| top, center, bottom \| left, center, right	0%, 0%	all
background-attachment 銷定背景圖片位置	scroll \| fixed scroll: 滾度 fixed: 固定	scroll	all
background 背景綜合應用	background-color \|\| background-image \|\| background-repeat \|\| background-attachment \|\| background-position	參照上述，並依序宣告	all

區塊模組

標籤語法	允許值	初始值	適用元素
width, height	長度 \| 百分比 \| auto	auto	區塊元素
margin 外邊界	上右下左 (1 or 4) （長度 \| 百分比 \| auto）	0	區塊元素
margin-left, margin-right, margin-top, margin-bottom	分別指定四個外邊界長度 \| 百分比 \| auto	0	all
padding 內邊界	上右下左 (1 or 4) （長度 \| 百分比 \| auto）	0	all
padding-left, padding-right, padding-top, padding-bottom	分別指定四個內邊界長度 \| 百分比 \| auto	0	all
border-width 邊框寬度	上右下左 (1 or 4) （長度 \| thin, medium, thick）	未定義	all
border-top-width, border-right-width, border-bottom-width, border-left-width	分別指定四個邊框寬度長度 \| 百分比 \| auto	未定義	all
border-style 邊框式樣	none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset	none	all
border-top-style, border-right-style, border-bottom-style, border-left-style	none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset	none	all
border-color 邊框顏色	顏色值	none	all
border-top-color, border-right-color, border-bottom-color, border-left-color,	顏色值	none	all
border 邊框綜合應用	border-width \|\| border-style \|\| border-color	參照上述，並依序宣告	all
max-width, max-height 最大寬度、最大高度	inherit \| none \| 長度 \| 百分比	none	all
min-width, min-height 最小寬度、最小高度	inherit \| none \| 長度 \| 百分比	none	all

圖層

標籤語法	允許值	初始值	適用元素
position 定位	static \| relative \| absolute \| fixed \| inherit	static	all
top, right, bottom, left 邊偏移量	長度 \| 百分比 \| static-position \| auto \| inherit	auto	定位元素
overflow 內容溢出量	visible \| hidden \| scroll \| auto \| inherit	visible	塊狀與替換元素
clip 剪裁	rect (上、右、下、左) \| auto \| inherit	auto	塊狀與替換元素
clear 清除	left \| right \| both \| none	none	all
float 浮動	left \| right \| none	none	all
visibility 可見度	visible \| hidden \| inherit	inherit	all
z-index Z軸索引值	integar \| auto	auto	定位元素

偽類標籤

標籤語法	允許值	初始值	適用元素
a:active 連結時式樣	文字、排版、顏色等語法均可使用	依瀏覽器定義	偽元素
a:hover 滑鼠移過時之式樣	文字、排版、顏色等語法均可使用	依瀏覽器定義	偽元素
a:link 鏈結在一般狀態之式樣	文字、排版、顏色等語法均可使用	依瀏覽器定義	偽元素
a:visited 鏈結過之式樣	文字、排版、顏色等語法均可使用	依瀏覽器定義	偽元素