常用 css3 樣式設計語法 - 163.21.31.9163.21.31.9/~liao/computer/web/css3_tags.pdf ·...

© Chin-Hsiang Lin, MCUT-VCD／ 1

常用 CSS3樣式設計語法©2013, 明志科大視傳系／林金祥

CSS (Cascading Style Sheets) 是為 HTML加上樣式的語法。目前最新的版是是 CSS3，大多數的瀏覽器都開始支援，是設計師絕對不能不熟悉的工具。這份講義列出了約 80%的樣式，可以讓初學網頁設計的鄉親們做為學習或查詢的小冊。至於沒有列出來的部份，多數因

為目前還沒有瀏覽器支援，所以就節省篇輻，待未來W3定稿之後再逐一加上。由於 CSS3的規格仍在更新中，是屬於進行式的語法，因此這個小冊也會時常隨著調整，請各位上課的

時候務必做自己的筆記，讓自己對 CSS有最完整、最新的認識。

1. 設定字型／字體語法

樣式性質 (property) 允許值 (value) 初始值適用元

素

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/line-height || font-family

normal all

color 顏色（前景、字）

顏色值依瀏覽器

設定

all

2. 文字排版語法

樣式性質 (property) 允許值 (value) 初始值適用元

素

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

2／網頁設計的基礎

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

text-justify齊行均分方式

auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | trim

auto CSS3

text-overflow溢出文字

clip(剪裁 ) | ellipsis(省略號 ) | text (自訂文字 ) clip CSS3

text-shadow文字陰影

h-shadow | v-shadow | blur | color（長度）（顏色值）

none CSS3

word-break斷字方式

normal | break-all | hyphenate(normal指非 CJK文字的斷字方式 )

normail CSS3

word-wrap斷行方式

normal | break-word normal CSS3

3. 項目清單語法

樣式性質 (property) 允許值 (value) 初始值適用元素

list-style-type 項目符號類別

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georegian | none | inherit

disc | decimal

列表元素

list-style-image 圖像式項目符號

<url> | none none 列表元素

list-style-position 項目符號位置

inside | outside outside 列表元素

list-style 清單列表速記

list-style-type || list-style-image || list-style-position

參照上述，

並依序宣告

列表元素

4. 背景語法 (background)


background-color 背景顏色

顏色值 | transparent transparent all

background-position 背景圖片位置

百分比 | 長度 | top, center, bottom | left, center, right

0%, 0% all

background-size背景圖片尺寸

長度 | cover | contain(長度的順序為 width height)

auto CSS3

background-repeat 重覆背景圖片排列

repeat | repeat-x | repeat-y | no-repeat no-repeat all


background-origin背景圖片原點

padding-box | border-box | content-box padding-box CSS3

background-clip背景圖片區域

border-box | padding-box | content-box border-box CSS3

background-attachment 銷定背景圖片位置

scroll | fixed scroll: 滾度 fixed: 固定

scroll all

background-image 背景圖片

<url> | none none all

background 背景速記

color || position || size || repeat || origin || clip || attachment || image

參照上述，並

依序宣告

all

註：

<url>的寫法： url("filename.jpg")

5. 欄位樣式 (column)


columns分欄設定

width || count CSS3

column-width欄間線寬度

長度 | auto auto CSS3

column-count分欄數量

數值 | auto auto CSS3

column-fill填充方式

balance | auto（目前尚未有 browser支援）

auto CSS3

column-gap欄間距

長度 | normal normal CSS3

column-rule欄間線樣式

width || style || color CSS3

column-rule-width欄間線粗細

長度 | thin, medium, thick medium CSS3

column-rule-style欄間線條樣式

none | hidden | dotted | dashed | solid | double | groove | ridge | inset |outset

none CSS3

column-rule-color欄間線條顏色

顏色值 black CSS3

column-span跨欄數量

數值 1 CSS3


6. 區塊模式 (Box Modle)


width（寬）, height（高）

長度 | 百分比 | auto auto 區塊元素

margin 外邊界

上右下左 (1 - 4) （長度 | 百分比 | auto）

0 區塊元素

margin-left, margin-right, margin-top, margin-bottom

分別指定四個外邊界長度 | 百分比 | auto

0 all

max-height, max-width極大高、極大寬

長度 | 百分比 0 all

min-height, min-width極小高、極小寬

長度 | 百分比 0 all

padding 內邊界

上右下左 (1 - 4) （長度 | 百分比 | auto）

0 all

padding-left, padding-right, padding-top, padding-bottom

分別指定四個內邊界（長度 | 百分比 | auto）

0 all

border-width 邊框寬度

上右下左 (1 - 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-top,border-right,border-bottom,border-left 邊框速記

border-width || border-style || border-color

參照上

述，並依

序宣告

all

box-shadow 方塊陰影

水平位置 || 垂直位置 || 模糊距離 || 模糊範圍 || 顏色 || inset;

none all

註：dotted(點 )、dashed(短線 )、solid(實線 )、double(雙實線 )、groove(3D凹線 )、ridge(3D凸線 )、inset(3D內側 )、outset(3D外側 )


7. 角落樣式


border-radius,border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,圓角速記

水平半徑 xr 垂直半徑 yr（長度）

速記：

tl-xr tr-xr br-xr bl-xr/tl-yr tr-yr br-yr bl-yr

tl tr br tl

none CSS3

8. 以圖片修飾邊框樣式


border-image-source圖片來源

<url> none CSS3

border-image-slice圖片切片

百分比 | 數字 | fill（數字不可加 px為單位）

none CSS3

border-image-width圖片偏移量

上右下左 (1 - 4)（長度 | 百分比 | auto）

none CSS3

border-image-outset四個側邊的超出量

上右下左（1 - 4）（長度）

none CSS3

border-image-repeat圖片重覆

stretch | repeat | space | round none CSS3

border-image圖片邊框速記

source || slice || width || outset || repeat

none CSS3

opacity不透明度

數字

（0.0完全透明 -1.0完全不透明）none CSS3

outline,outline-color,outline-style,outline-widthBOX的外廓

outline-color || outline-style || outline-width

none CSS3

outline-offsetBOX外廓平移

長度 none CSS3

9. 圖層


position 定位

static | relative | absolute | fixed | inherit static all

top, right, bottom, left 邊偏移量

長度 | 百分比 | static-position | auto | inherit auto 定位元素


overflow,overflow-x,overflow-y 內容溢出量

visible | hidden | scroll | auto | inherit（overflow-x與 overflow-y為 x與 y方向的溢出量，這兩個是 CSS3的樣示）

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軸索引值

integer | auto Auto 定位元素

10. 表格


border-collapse 邊框內的距離

collapse | separate separate

border-spacing 邊框與元素的距離

長度

caption-side 表格註解的位置

top | bottom | right | left top

empty-cells 空表格式樣

show | hide show

table-layout 表格呈現的方式

auto | fixed auto

11. 影格動畫 (animation)要使用 CSS3製作動畫，必須瞭解@keyframes規則。CSS3將改變前至改變後的影格樣式寫在@keyframes裡，讓瀏覽器去執行；但目前為止，並非所有的瀏覽器都支援；Firefox需要 -moz-，而 Google Chrome與 Safari需要 -webkit-起始字。樣式性質 (property) 允許值 (value) 初始值適用元素

@keyframes 影格名稱 || 影格選擇器 || CSS樣式（以上變數都是必須填入的）

CSS3

animation影格動畫

name || duration || timing-function || delay || literation-count || direction || play-state

CSS3

animation-name影格名稱

將影格命名（自訂） CSS3

animation-duration動畫執行期間

時間 0 CSS3


animation-timing-function影格計時設定

linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

ease CSS3

animation-delay延遲開始播放時間

時間 0 CSS3

animation-iteration-count執行次數

播放次數 1 CSS3

animation-direction影格播放形式

alternate（播一次之後便反向播放）

normal CSS3

animation-play-state影格播放狀態

paused | running running CSS3

12. 動畫轉換 (transition)


transition轉換動畫

property || duration || timing-function || delay CSS3

transition-property指定屬性

none || all || 屬性名稱 (width, length...) all CSS3

transition-duration執行時間

時間 0 CSS3

transition-timing-function設定細部速度

linear | ease | ease-in | ease-out | ease-in-out|cubic-bezier(n,n,n,n)

ease CSS3

transition-delay延遲時間

時間 0 CSS3

13. 物件旋轉 (transform)


transform設定轉換方式

none | transform-functions(見 13.1)

none CSS3

transform-origin物件的初始位置

x軸 || y軸 || z軸x軸值：left | center | right | 長度 | 百分比y軸值：top | center | bottom | 長度 | 百分比z軸值：長度

50% 50% 0 CSS3

transform-style元素與 3D的關係

flat | preserve-3d flat CSS3

perspective透視距離

數字 | none none CSS3

perspective-origin透視原點

x軸 || y軸(允許負值 )

50% 50% CSS3


backface-visibility背面可見度

visible | hidden visible CSS3

appearance外觀樣式

normal | icon | window | button | menu | field normal CSS3

CSS3

13.1. 轉換方式 transform-functions允許值說明

none 沒有旋轉

matrix(n,n,n,n,n,n) 使用 6個數值的矩陣定義 2D旋轉（水平縮放、水平傾斜、垂直傾斜、垂直縮放、x位移、y位移）

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

使用 16個數值的矩陣定義 3D旋轉（水平縮放、水平傾斜、垂直傾斜、垂直縮放、x位移、y位移）

translate(x,y) 2D位移：與左邊界距離 x，與上邊界距離 ytranslate3d(x,y,z) 3D位移：與左邊界距離 x，與上邊界距離 y，與螢幕距離 ztranslateX(x) 與左邊界距離

translateY(y) 與上邊界距離

translateZ(z) 與螢幕距離

scale(x,y) 2D縮放：水平縮放 x，垂直縮放 yscale3d(x,y,z) 3D縮放：水平縮放 x，垂直縮放 y，3D縮放 zscaleX(x) 水平縮放 xscaleY(y) 垂直縮放 yscaleZ(z) z軸縮放rotate(angle) 2D旋轉，以中心點為圓心旋轉rotate3d(x,y,z,angle) 3D旋轉，以中心點為圓心 (若任兩軸為 0，則為單軸轉）rotateX(angle) x軸旋轉rotateY(angle) y軸旋轉rotateZ(angle) z軸旋轉skew(x-angle,y-angle) 2D傾斜，x為水平傾斜，y為垂直傾斜skewX(angle) 2D水平傾斜skewY(angle) 2D垂直傾斜perspective(n) 定義 3D旋轉物件的透視

14. Display語法特別說明

值功能說明

none 本元素不會被顯示出來

block 元素將會以「區塊」模式顯示

inline 元素將會以「單行」模式顯示（此為預設值）

list-item 元素將以表清單方式顯示

run-in 元素將根據之前的設定以區塊或單行模式顯示

compact 元素將根據之前的設定以區塊或單行模式顯示

marker


table 元素將以區塊表格模式顯示（如 <table>），前後亦將插入換行inline-table 元素將以單行表格模式顯示（如 <table>），前後不插入換行table-row-group 元素將以一或多列的「列群組」模式顯示（如 <tbody>）table-header-group 元素將以一或多列的「列群組」模式顯示表格標題（如 <thead>）table-footer-group 元素將以一或多列的「列群組」模式顯示表格註解（如 <tfoot>）table-row 元素將顯示表格列（如 <tr>）table-column-group 元素將以一或多欄的「欄群組」模式顯示（如 <colgroup>）table-column 元素將顯示表格列（如 <col>）table-cell 元素將顯示表格單元（如 <td> 和 <th>）table-caption 元素將顯示表格名稱（如 <caption>）

15. 偽類標籤


a:link 鏈結在一般狀態之式樣

文字、排版、顏色等語法均可使用依瀏覽器定義偽元素

a:visited 鏈結過之式樣


a:hover 滑鼠移過時之式樣


a:active 連結時式樣


16. @font-face字型設定 (CSS3)語法為：@font-face { font-properties } 可以設定的樣式如下：樣式性質 (property) 允許值 (value) 適用元素

font-family字型名稱（必須）

name 自定的字型名稱

src字型檔來源（必須）

URL 字型檔的位置

font-stretch字型縮放

normal(正常，預設值 )condensed (濃縮 )ultra-condensed (超濃縮 )extra-condensed (高濃縮 )semi-condensed (半濃縮 )expanded (擴大 )semi-expanded (半擴大 )extra-expanded (高擴大 )ultra-expanded (超擴大 )

非必要選項，初始值為 "normal"

font-style字型樣式

normal | italic | oblique非必要選項，初始值為 "normal"

font-weight字型粗細

normal | bold | bolder | light | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |

非必要選項，初始值為 "normal"


unicode-range內碼範圍

unicode-range非必要選項，初始值為 "U+0-10FFFF"

17. 滑鼠游標

樣式性質允許值 (value) 初始值適用元素

cursor 游標

pointer 手 help 帶問號游標

auto All

crosshair 交叉十字 e-resize 向東箭頭

text 本文選擇 ne-resize 向東北箭頭

wait 沙漏狀 n-resize 向北箭頭

default 預設游標 nw-resize 向西北箭頭

w-resize 向西箭頭 se-resize 向東南箭頭

sw-resize 向西南箭頭 url 自定圖形

18. 捲軸設定（僅 IE有效／負面標籤，不建議使用）

樣式性質 (property) 說明允許值 (value)

scrollbar-base-color 捲軸列主色調顏色

scrollbar-arrow-color 按鈕箭頭的顏色

scrollbar-face-color 移動棒的顏色

scrollbar-highlight-color 按鈕邊框內層左邊與上面的顏色及捲軸底部

軌道網狀顏色 (與 track同時使用網狀會消失 )scrollbar-3dlight-color 按鈕邊框外層左邊與上面的顏色

scrollbar-darkshadow-color 按鈕邊框外層右邊與下面的顏色scrollbar-shadow-color 按鈕邊框內層右邊與下面的顏色

scrollbar-track-color 底部軌道顏色

19. 其他重要補充

說明允許值 (value)/* ........ */ 註解

!important 標示為「重要」的樣式

@import 滙入外部 CSS樣式 url("CSS檔名 ")<link /> 連結外部 CSS樣式詳述如下，有關完整的 <link />，請見 HTML<link rel="stylesheet" href="style.css" type="text/css" media="screen" /><link rel="stylesheet" href="clr-8b.css" type="text/css" media="screen, pring" /><link rel="stylesheet" href="aural.css" type="text/css" media="aural" />

rel=關連href=CSS檔案名type=檔案類型media=應用設備／媒體


20. CSS的基本選擇器 (Selectors)

選擇器類別範例說明

A 標籤選擇器

定義 HTML的標籤h1 { color: #f00; font-size: 150%; }p { line-height: 1.5em; text-style: italic;}

#idname ID選擇器（不可重複用）定義 ID屬性

#box { width: 500px; float: left; }tr#zibra { background: #ec4; }

.classname Class選擇器（可重複用）定義 class屬性

.panda { color: #fff; background: #444; }li.photo { float: left; }

A B B為 A的後裔選擇器 #box h1 { font-style: italic; color: #590; }p em { font-weight: 900; font-size: 120%; }

:link:visited:hover:active

偽類（虛擬）選擇器 a:hover { color: #f00; font-size: 150%; }tr:hover { background: #f2a; text-style: italic;}a:linked { color: #f00; }

A, B, C 群組選擇器

定義相同的式樣

h1, #box, .panda { font-size: 90%; color: #fff; background: #444; }body, p { color: #444; }

21. CSS選擇器 (selector)的宣告與使用

選擇器宣告方式典型使用方式

A 標籤選擇器

h1 { color: #f00; font-size: 150%;

}p { line-height: 1.5em;

text-style: italic;}

直接使用 HTML的標籤

#idname #box { width: 500px; float: left;

}

<div id="box"></div>

.classname類別選擇器

.bling { color: #fff; background: #444;

}

<span class="bling"></span><h1 class="bling"></h1>

註釋的寫法 :/* Footer */CSS樣式內容區/* End Footer */


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

值範例數值說明

1 margin: 50px 所有邊均為 50px2 margin: 10px 5em [上、下邊 10px] [左、右邊 5em]3 padding: 3px 5em 10px [上邊 3px] [左、右邊 5em] [下邊 10px]

4border-width: 2px 3px 5px 4px

[上邊 2px] [右邊 3px] [下邊 5px] [左邊 4px] 順時鐘方向

23. 其他單位

類別單位意義

角度

Angles

deg Degrees.圓週 = 360 deggrad Gradians.圓週 = 400 gradrad Radians. 圓週 = 2π radiansturn Turns. 圓週 = 1 turn

時間

Timess Seconds. 秒

ms Milliseconds. 1000ms = 1s頻率

FrequenciesHz Hertz. 每秒鐘發生的次數kHz KiloHertz. 1000Hz = 1kHz.

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

類別單位意義

相對單位

em 所選用字的一倍高。

ex 選用字體的小寫 "x" 高度 (無論有無 x 字 )px pixel, 相對畫素、解析度% 相對於目前設定的百分比（可超過 100%）

絕對單位

(印製用 )

cm 公分 (centimeters)；1cm = 10mmmm 公釐 (millimeters)in 英吋 (inchs)；1in = 2.54cmpt 點 (poits)；1pt = 1/72inpc 大點；picas；1pc = 12pt = 4.23mmpx 像素：1px = 1/96in


25. 色彩單位色彩單位除了以顏色名稱指定外，可以數值表現 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)rgba(24,138,244,0.7)

十進位，R=24, G=138, B=244, A=0.7

rgb(0,0,0) ~ rgb(255,255,255)a=0.0(完全透明 )~1.0(不透明 )

rgb(42%,50%,16%)rgba(42%,50%,16%,0.5)

百分比，R=42%, G=50%, B=16%, A=0.5

rgb(0%,0%,0%) ~ rgb(100%,100%,100%)

hsl(120, 100%, 50%)hsla(120, 100%, 50%,0.5)

hsl(色相，彩度，明度 )a=透明度

色相 (hue) = 0~360Red: 0˚, Green: 120˚, Blue: 240˚彩度 (saturation) = 0~100%明度 (lightness) = 0~100%

色相 (degree) 顏色

0° red60° yellow120° green180° cyan240° blue300° magenta360° red

明度：0%=黑；100%=白彩度：0%=灰階；100%=全彩


26. Box Modle (CSS的「盒子」模式 )CSS裡的 Box Modle算是相當重要的核心觀念，弄通了這個概念，

妳／你在排版與設計上便會無往

不利。右圖是重要的設定語法（請

同時參閱前面 p.3的「區塊模組」語法）：

margin

padding

文字區域

27. 浮動 (float) 的行為原則1. 浮動元素的左（右）外邊緣也許不位於其親元素的左（右）內邊緣。2. 浮動元素的左（右）外邊緣必須在先出現於文檔資源的浮動元素的右（左）外邊緣的右（左）側，除非後一個元素的頂端低於前一個元素的底。

3. 左浮動元素的右外邊緣不能位於其右側的右浮動元素左處邊緣的右側，右浮動元素的左外邊緣不能位於其左側的左漂移元素右外邊緣的左側。

4. 浮動元素的頂端不能高於親元素的內頂端。5. 浮動元素的頂端不能高於先於它出現的浮動元素或段落的頂端。6. 浮動元素的頂端不能高於行框的頂端，如果行框中有先於浮動元素的內容。7. 一個向左（右）浮動的元素，如果其左（右）側仍存在浮動元素，則不能夠使它的右（左）外邊緣處於容納它的右（左）外邊緣的右（左）側。

8. 浮動元素的放置應盡可能高。9. 向左浮動的元素必須盡可能向左放置，向右浮動的元素必須儘量向右放置，較高的位置優先給更偏左或偏右的元素。

值得參考的好文章

1. CSS Float Theory: Things You Should Know2. The Principles Of Cross-Browser CSS Coding3. 10 Principles of the CSS Masters4. CSS Floats 101

border

heig

ht

width 真正的總高

真正的總寬

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

http://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/

http://net.tutsplus.com/tutorials/html-css-techniques/10-principles-of-the-css-masters/

http://www.alistapart.com/articles/css-floats-101/


28. CSS結構示意@charset "utf-8";body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 0.85em; line-height: 1.5em; color: #333; margin: 0; padding: 0;}

h1 { font-size: 1.5em; line-height: 1.5em; color: #36f;}

a { color: rgba(124, 30, 100, 0.5); /* 這是有透明的顏色 */ text-decoration: none; border-bottom: 1px dotted #f60;}

a:hover { color: hsla(140, 80%, 70%, 0.7); /* 色相、彩度、明度、透明度 */ background: #f60;}

.namelist { width: 145px; float: left;}

#wrapper { width: 846px; margin: auto;}

#navi li { margin: 0px; padding: 0px;}


29. CSS命名規則頭：header內容：content/container尾：footer導航：nav側欄：sidebar欄目：column頁面外圍控制整體佈局寬度：

wrapper左右中：left right center登錄條：loginbar標誌：logo廣告：banner頁面主體：main熱點：hot新聞：news下載：download子導航：subnav菜單：menu子菜單：submenu搜索：search友情鏈接：friendlink頁腳：footer版權：copyright滾動：scroll內容：content標籤頁：tab文章列表：list提示信息：msg小技巧：tips欄目標題：title加入：joinus指南：guild服務：service註冊：regsiter狀態：status投票：vote合作夥伴：partner

id的命名 :(1)頁面結構容器 : container頁頭：header內容：content/container頁面主體：main

頁尾：footer導航：nav側欄：sidebar欄目：column頁面外圍控制整體佈局寬度：

wrapper左右中：left right center

(2)導覽列導覽列：nav主導覽列：mainbav子導覽列：subnav頂導覽列：topnav側導覽列：sidebar左導覽列：leftsidebar右導覽列：rightsidebar選單：menu子選單：submenu標題 : title摘要 : summary

(3)功能標誌：logo廣告：banner登陸：login登錄條：loginbar註冊：regsiter搜索：search功能區：shop標題：title加入：joinus狀態：status按鈕：btn滾動：scroll標籤頁：tab文章列表：list提示信息：msg當前的 : current小技巧：tips圖標 : icon註釋：note指南：guild服務：service熱點：hot新聞：news

下載：download投票：vote合作夥伴：partner友情鏈接：link版權：copyright

class的命名 :(1)顏色 :使用顏色的名稱或者 16進制代碼 ,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字體大小 ,直接使用"font+字體大小 "作為名稱 ,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }(3)對齊樣式 ,使用對齊目標的英文名稱 ,如.left { float:left; }.bottom { float:bottom; }(4)標題欄樣式 ,使用 "類別 +功能 "的方式命名 ,如.barnews { }.barproduct { }

注意事項：

1.一律小寫 ;2.一律用英文 ;3.不加中槓和下劃線 ;4.盡量不縮寫，除非一看就明白的單詞

檔名：

主要的 master.css模塊 module.css基本共用 base.css版面 layout.css主題 themes.css欄位 columns.css文字 font.css表單 forms.css補丁 mend.css列印 print.css


30. CSS高手的 10大原則 -Glen Stansberry (Aug, 2008)1. Keep CSS simple – Peter-Paul Koch2. Keep CSS declarations in one line – Jonathan Snook3. Use CSS shorthand – Roger Johansson4. Allow block elements to fill space naturally – Jonathan Snook5. Set a float to clear a float – Trevor Davis6. Use negative margins – Dan Cederholm7. Use CSS to center layouts – Dan Cederholm8. Use the right DOCTYPE – Jeffrey Zeldman9. Center Items with CSS – Wolfgang Bartelme10. Utilize text-transform commands – Trenton Moss

常用 css3 樣式設計語法 - 163.21.31.9163.21.31.9/~liao/computer/web/css3_tags.pdf ·...

Documents