CSS語法使用一覽

CSS 裡會使用到單位的語法相當多，像是字體大小(font-size)，邊緣間距(margin)，邊框尺寸(border-width)...等，無論是什麼尺寸，都不出以下兩類：相對單位(relative ... 課程首頁 大家的網頁 延伸學習 CSS語法 網頁空間設定 |大家的網頁|課程首頁|Firefox3.5與CSS3| 基礎CSS2.1標籤語法 長度單位 CSS裡會使用到單位的語法相當多，像是字體大小(font-size)，邊緣間距(margin)，邊框尺寸 (border-width)...等，無論是什麼尺寸，都不出以下兩類：相對單位(relativelengthunits)與絕對單位 (relativelengthunits)。

以下所列單位均能使用正負值： 類別 單位 意義 相對單位 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:10px5em [上、下邊10px][左、右邊5em] 3 padding:3px5em10px [上邊3px][左、右邊5em][下邊10px] 4 border-width:2px3px5px4px [上邊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背景圖片 |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 外邊界 上右下左(1or4) （長度|百分比|auto） 0 區塊元素 margin-left,margin-right,margin-top,margin-bottom 分別指定四個外邊界 長度|百分比|auto 0 all padding 內邊界 上右下左(1or4) （長度|百分比|auto） 0 all padding-left,padding-right,padding-top,padding-bottom 分別指定四個內邊界 長度|百分比|auto 0 all border-width 邊框寬度 上右下左(1or4) （長度|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鏈結過之式樣 文字、排版、顏色等語法均可使用 依瀏覽器定義 偽元素 ©2009,Allrightsreserved.Chin-HsiangLin,MingChiUniversityofTechnology 歡迎來信研究HTML/CSS，一起把網頁學好喔！