常用 CSS3 樣式設計語法 2013, 明志科大視傳系 / 林金祥 CSS (Cascading Style Sheets) 是為 HTML 加上樣式的語法目前最新的版是是 CSS3, 大多數的瀏覽器都開始支援, 是設計師絕對不能不熟悉的工具這份講義列出了約 80% 的樣式, 可以讓初學網頁設

Size: px

Start display at page:

Download "常用 CSS3 樣式設計語法 2013, 明志科大視傳系 / 林金祥 CSS (Cascading Style Sheets) 是為 HTML 加上樣式的語法目前最新的版是是 CSS3, 大多數的瀏覽器都開始支援, 是設計師絕對不能不熟悉的工具這份講義列出了約 80% 的樣式, 可以讓初學網頁設"

句圜宰
5 years ago
Views:

1 常用樣式設計語法 2013, 明志科大視傳系 / 林金祥 CSS (Cascading Style Sheets) 是為 HTML 加上樣式的語法目前最新的版是是, 大多數的瀏覽器都開始支援, 是設計師絕對不能不熟悉的工具這份講義列出了約 80% 的樣式, 可以讓初學網頁設計的鄉親們做為學習或查詢的小冊至於沒有列出來的部份, 多數因為目前還沒有瀏覽器支援, 所以就節省篇輻, 待未來 W3 定稿之後再逐一加上由於的規格仍在更新中, 是屬於進行式的語法, 因此這個小冊也會時常隨著調整, 請各位上課的時候務必做自己的筆記, 讓自己對 CSS 有最完整最新的認識 1. 設定字型 / 字體語法樣式性質 (property) 允許值 (value) 初始值 font-family 字型 font-weight 粗細 font-style 樣式 font-size 尺寸大小 font-variant 變形 font 字型速記 color 顏色 ( 前景字 ) 2. 文字排版語法字型名稱系列名稱 normal bold bolder light lighter 依瀏覽器設定 normal (500) normal italic oblique normal xx-sm x-sm sm medium large x-large xx-large smer larger 長度百分比 medium sm-caps normal normal font-style font-weight font-variant font-size/line-height font-family 顏色值 normal 依瀏覽器設定適用元素樣式性質 (property) 允許值 (value) 初始值適用元素 text-decoration none underline, overline, line-through, blink none 文字裝飾 text-indent em 0em 首行縮排 letter-spacing normal 長度 normal 字 ( 母 ) 距 word-spacing normal 長度 normal 單字距 line-height 行高 normal 長度百分比數字 normal Chin-Hsiang Lin, MCUT-VCD / 1

2 text-align 文字水平對齊 vertical-align 垂直對齊 text-transform 大小寫切換 text-justify 齊行均分方式 text-overflow 溢出文字 text-shadow 文字陰影 word-break 斷字方式 word-wrap 斷行方式 left right center justify (justify: 兩端對齊 ) baseline top middle bottom text-top text-bottom super sub 百分比數字 none uppercase lowercase capitalize none left left auto inter-word inter-ideograph intercluster distribute kashida trim auto clip( 剪裁 ) ellipsis( 省略號 ) text ( 自訂文字 ) clip h-shadow v-shadow blur color ( 長度 )( 顏色值 ) none normal break- hyphenate normail (normal 指非 CJK 文字的斷字方式 ) normal break-word normal 3. 項目清單語法 4. 背景語法 (background) 樣式性質 (property) 允許值 (value) 初始值適用元素 list-style-type disc circle square decimal decimeading-zero disc 列表元素項目符號類別 lower-roman upper-roman lower-greek lower-latin upper-latin armenian georegian none inherit decimal list-style-image <url> none none 列表元素圖像式項目符號 list-style-position inside outside outside 列表元素項目符號位置 list-style 清單列表速記 list-style-type list-style-image list-styleposition 參照上述, 並依序宣告列表元素樣式性質 (property) 允許值 (value) 初始值適用元素 background-color 顏色值 transparent transparent 背景顏色 backgroundposition 百分比長度 top, center, bottom left, 0%, 0% 背景圖片位置 center, right background-size 長度 cover contain auto 背景圖片尺寸 ( 長度的順序為 width height) background-repeat 重覆背景圖片排列 repeat repeat-x repeat-y no-repeat no-repeat 2 / 網頁設計的基礎

3 background-origin padding-box border-box content-box padding-box 背景圖片原點 background-clip border-box padding-box content-box border-box 背景圖片區域 backgroundattachment scroll fixed scroll 銷定背景圖片位置 scroll: 滾度 fixed: 固定 background-image <url> none none 背景圖片 background color position size repeat origin 參照上述, 並背景速記 clip attachment image 依序宣告註 : <url> 的寫法 : url("filename.jpg") 5. 欄位樣式 (column) 樣式性質 (property) 允許值 (value) 初始值適用元素 columns 分欄設定 width count column-width 欄間線寬度 column-count 分欄數量 column-fill 填充方式 column-gap 欄間距 column-rule 欄間線樣式 column-rule-width 欄間線粗細 column-rule-style 欄間線條樣式 column-rule-color 欄間線條顏色 column-span 跨欄數量長度 auto auto 數值 auto auto balance auto auto ( 目前尚未有 browser 支援 ) 長度 normal normal width style color 長度 thin, medium, thick medium none hidden dotted dashed solid none double groove ridge inset outset 顏色值 black 數值 1 Chin-Hsiang Lin, MCUT-VCD / 3

4 6. 區塊模式 (Box Modle) 樣式性質 (property) 允許值 (value) 初始值適用元素 width( 寬 ), height( 高 ) margin 外邊界 margin-left, margin-right, margin-top, margin-bottom max-height, max-width 極大高極大寬 min-height, min-width 極小高極小寬 padding 內邊界 padding-left, padding-right, padding-top, paddingbottom border-width 邊框寬度 border-top-width, borderright-width, border-bottomwidth, border-left-width border-style 邊框式樣 border-top-style, borderright-style, border-bottomstyle, border-left-style border-color 邊框顏色 border-top-color, borderright-color, border-bottomcolor, border-left-color, border, border-top, border-right, border-bottom, border-left 邊框速記 box-shadow 方塊陰影長度百分比 auto auto 區塊元素上右下左 (1-4) ( 長度百分比 auto) 0 區塊元素分別指定四個外邊界 0 長度百分比 auto 長度百分比 0 長度百分比 0 上右下左 (1-4) ( 長度百分比 auto) 分別指定四個內邊界 ( 長度百分比 auto) 上右下左 (1-4) ( 長度 thin, medium, thick) 分別指定四個邊框寬度長度百分比 auto none dotted dashed solid double groove ridge inset outset none dotted dashed solid double groove ridge inset outset 0 0 未定義未定義 none none 顏色值 none 顏色值 none border-width border-style border-color 水平位置垂直位置模糊距離模糊範圍顏色 inset; 參照上述, 並依序宣告 none 註 :dotted( 點 ) dashed( 短線 ) solid( 實線 ) double( 雙實線 ) groove(3d 凹線 ) ridge(3d 凸線 ) inset(3d 內側 ) outset(3d 外側 ) 4 / 網頁設計的基礎

5 7. 角落樣式樣式性質 (property) 允許值 (value) 初始值適用元素 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 8. 以圖片修飾邊框樣式樣式性質 (property) 允許值 (value) 初始值適用元素 border-image-source 圖片來源 border-image-slice 圖片切片 border-image-width 圖片偏移量 border-image-outset 四個側邊的超出量 border-image-repeat 圖片重覆 border-image 圖片邊框速記 opacity 不透明度 outline, outline-color, outline-style, outline-width BOX 的外廓 outline-offset BOX 外廓平移 <url> none 百分比數字 fill ( 數字不可加 px 為單位 ) none 上右下左 (1-4) none ( 長度百分比 auto) 上右下左 (1-4) none ( 長度 ) stretch repeat space round none source slice width outset repeat 數字 (0.0 完全透明 -1.0 完全不透明 ) outline-color outline-style outlinewidth none none none 長度 none 9. 圖層樣式性質 (property) 允許值 (value) 初始值適用元素 position 定位 top, right, bottom, left 邊偏移量 static relative absolute fixed inherit static 長度百分比 static-position auto inherit auto 定位元素 Chin-Hsiang Lin, MCUT-VCD / 5

6 overflow, overflow-x, overflow-y 內容溢出量 clip 剪裁 clear 清除 float 浮動 visibility 可見度 z-index Z 軸索引值 visible hidden scroll auto inherit (overflow-x 與 overflow-y 為 x 與 y 方向的溢出量, 這兩個是的樣示 ) visible 塊狀與替換元素 rect ( 上右下左 ) auto inherit auto 塊狀與替換元素 left right both none none All left right none none All visible hidden inherit inherit All integer auto Auto 定位元素 10. 表格樣式性質 (property) 允許值 (value) 初始值適用元素 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) 要使用製作動畫, 規則將改變前至改變後的影格樣式裡, 讓瀏覽器去執行 ; 但目前為止, 並非所有的瀏覽器都支援 ;Firefox 需要 -moz-, 而 Google Chrome 與 Safari 需要 -webkit- 起始字樣式性質 (property) 允許值 (value) 初始值影格名稱影格選擇器 CSS 樣式 ( 以上變數都是必須填入的 ) animation name duration timing-function delay 影格動畫 literation-count direction play-state animation-name 影格名稱將影格命名 ( 自訂 ) animation-duration 動畫執行期間時間 0 6 / 網頁設計的基礎

7 animation-timingfunction 影格計時設定 animation-delay 延遲開始播放時間 animation-iterationcount 執行次數 animation-direction 影格播放形式 animation-playstate 影格播放狀態 linear ease ease-in ease-out ease-inout cubic-bezier(n,n,n,n) ease 時間 0 播放次數 1 alternate normal ( 播一次之後便反向播放 ) paused running running 12. 動畫轉換 (transition) 樣式性質 (property) 允許值 (value) 初始值適用元素 transition property duration timing-function delay 轉換動畫 transition-property none 屬性名稱 (width, length...) 指定屬性 transition-duration 時間 0 執行時間 transition-timingfunction linear ease ease-in ease-out ease-inout cubic-bezier(n,n,n,n) ease 設定細部速度 transition-delay 延遲時間時間物件旋轉 (transform) 樣式性質 (property) 允許值 (value) 初始值適用元素 transform none transform-functions none 設定轉換方式 ( 見 13.1) transform-origin 物件的初始位置 transform-style 元素與 3D 的關係 perspective 透視距離 perspective-origin 透視原點 x 軸 y 軸 z 軸 x 軸值 :left center right 長度百分比 y 軸值 :top center bottom 長度百分比 z 軸值 : 長度 50% 50% 0 flat preserve-3d flat 數字 none none x 軸 y 軸 ( 允許負值 ) 50% 50% Chin-Hsiang Lin, MCUT-VCD / 7

8 backface-visibility 背面可見度 appearance 外觀樣式 visible hidden visible normal icon window button menu field normal 轉換方式 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) translate(x,y) translate3d(x,y,z) translatex(x) translatey(y) translatez(z) scale(x,y) scale3d(x,y,z) scalex(x) scaley(y) scalez(z) rotate(angle) 8 / 網頁設計的基礎使用 16 個數值的矩陣定義 3D 旋轉 ( 水平縮放水平傾斜垂直傾斜垂直縮放 x 位移 y 位移 ) 2D 位移 : 與左邊界距離 x, 與上邊界距離 y 3D 位移 : 與左邊界距離 x, 與上邊界距離 y, 與螢幕距離 z 與左邊界距離與上邊界距離與螢幕距離 2D 縮放 : 水平縮放 x, 垂直縮放 y 3D 縮放 : 水平縮放 x, 垂直縮放 y,3d 縮放 z 水平縮放 x 垂直縮放 y z 軸縮放 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

9 table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption 元素將以區塊表格模式顯示 ( 如 <table>), 前後亦將插入換行元素將以單行表格模式顯示 ( 如 <table>), 前後不插入換行元素將以一或多列的列群組模式顯示 ( 如 <tbody>) 元素將以一或多列的列群組模式顯示表格標題 ( 如 <thead>) 元素將以一或多列的列群組模式顯示表格註解 ( 如 <tfoot>) 元素將顯示表格列 ( 如 <tr>) 元素將以一或多欄的欄群組模式顯示 ( 如 <colgroup>) 元素將顯示表格列 ( 如 <col>) 元素將顯示表格單元 ( 如 <td> 和 <th>) 元素將顯示表格名稱 ( 如 <caption>) 15. 偽類標籤樣式性質 (property) 允許值 (value) 初始值適用元素 a:link 鏈結在一般狀態之式樣 a:visited 鏈結過之式樣 a:hover 滑鼠移過時之式樣 a:active 連結時式樣文字排版顏色等語法均可使用依瀏覽器定義偽元素文字排版顏色等語法均可使用依瀏覽器定義偽元素文字排版顏色等語法均可使用依瀏覽器定義偽元素文字排版顏色等語法均可使用依瀏覽器定義偽元素字型設定 () 語法為 :@font-face { font-properties 可以設定的樣式如下 : 樣式性質 (property) 允許值 (value) 適用元素 font-family 字型名稱 ( 必須 ) name 自定的字型名稱 src 字型檔來源 ( 必須 ) URL 字型檔的位置 font-stretch 字型縮放 font-style 字型樣式 font-weight 字型粗細 normal( 正常, 預設值 ) condensed ( 濃縮 ) ultra-condensed ( 超濃縮 ) extra-condensed ( 高濃縮 ) semi-condensed ( 半濃縮 ) expanded ( 擴大 ) semi-expanded ( 半擴大 ) extra-expanded ( 高擴大 ) ultra-expanded ( 超擴大 ) normal italic oblique normal bold bolder light lighter 非必要選項, 初始值為 "normal" 非必要選項, 初始值為 "normal" 非必要選項, 初始值為 "normal" Chin-Hsiang Lin, MCUT-VCD / 9

10 unicode-range 內碼範圍 17. 滑鼠游標 unicode-range 非必要選項, 初始值為 "U+0-10FFFF" 樣式性質允許值 (value) 初始值適用元素 pointer 手 help 帶問號游標 crosshair 交叉十字 e-resize 向東箭頭 text 本文選擇 ne-resize 向東北箭頭 cursor wait 沙漏狀 n-resize 向北箭頭游標 default 預設游標 nw-resize 向西北箭頭 auto All 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 標示為重要滙入外部 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= 應用設備 / 媒體 10 / 網頁設計的基礎

11 20. CSS 的基本選擇器 (Selectors) 選擇器類別範例說明 A 標籤選擇器定義 HTML 的標籤 #idname ID 選擇器 ( 不可重複用 ) 定義 ID 屬性.classname Class 選擇器 ( 可重複用 ) 定義 class 屬性 h1 { color: #f00; font-size: 150%; p { line-height: 1.5em; text-style: italic; #box { width: 500px; float: left; tr#zibra { background: #ec4;.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 群組選擇器定義相同的式樣 21. CSS 選擇器 (selector) 的宣告與使用 h1, #box,.panda { font-size: 90%; color: #fff; background: #444; body, p { color: #444; 選擇器宣告方式典型使用方式 A 標籤選擇器 h1 { color: #f00; font-size: 150%; p { line-height: 1.5em; text-style: italic; 直接使用 HTML 的標籤 #idname.classname 類別選擇器 #box { width: 500px; float: left;.bling { color: #fff; background: #444; <div id="box"> </div> <span class="bling"></span> <h1 class="bling"></h1> 註釋的寫法 : /* Footer */ CSS 樣式內容區 /* End Footer */ Chin-Hsiang Lin, MCUT-VCD / 11

12 22. 四方簡稱要設定 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 23. 其他單位 [ 上邊 2px] [ 右邊 3px] [ 下邊 5px] [ 左邊 4px] 順時鐘方向類別單位意義角度 Angles 時間 Times 頻率 Frequencies 24. 長度單位 deg grad rad turn s ms Hz khz Degrees. 圓週 = 360 deg Gradians. 圓週 = 400 grad Radians. 圓週 = 2π radians Turns. 圓週 = 1 turn Seconds. 秒 Milliseconds. 1000ms = 1s Hertz. 每秒鐘發生的次數 KiloHertz. 1000Hz = 1kHz. CSS 裡會使用到單位的語法相當多, 像是字體大小 (font-size), 邊緣間距 (margin), 邊框尺寸 (border-width)... 等, 無論是什麼尺寸, 都不出以下兩類 : 相對單位 (relative length units) 與絕對單位 (relative length units) 以下所列單位均能使用正負值: 類別單位意義 em 所選用字的一倍高相對單位 ex 選用字體的小寫 "x" 高度 ( 無論有無 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 px 像素 :1px = 1/96in 12 / 網頁設計的基礎

5 hsl( 色相, 彩度, 明度 ) a= 透明度 #000000~#ffffff #000~#fff rgb(0,0,0) ~ rgb(255,255,255) a=0.0( 完全透明 )~1.

13 25. 色彩單位色彩單位除了以顏色名稱指定外, 可以數值表現 R, G, B 三色光原色之值, 有以下四種指定方式 : #ff23c7 #f30 範例說明範圍 rgb(24,138,244) rgba(24,138,244,0.7) rgb(42%,50%,16%) rgba(42%,50%,16%,0.5) hsl(120, 100%, 50%) hsla(120, 100%, 50%,0.5) 長十六進位 :R=ff, G=23, B=c7 短十六進位 :R=f, G=3, B=0, 相當於長十六進位的 #ff3300 十進位,R=24, G=138, B=244, A=0.7 百分比,R=42%, G=50%, B=16%, A=0.5 hsl( 色相, 彩度, 明度 ) a= 透明度 #000000~#ffffff #000~#fff rgb(0,0,0) ~ rgb(255,255,255) a=0.0( 完全透明 )~1.0( 不透明 ) rgb(0%,0%,0%) ~ rgb(100%,100%,100%) 色相 (hue) = 0~360 Red: 0, Green: 120, Blue: 240 彩度 (saturation) = 0~100% 明度 (lightness) = 0~100% 色相 (degree) 顏色 0 red 60 yellow 120 green 180 cyan 240 blue 300 magenta 360 red 明度 :0%= 黑 ;100%= 白彩度 :0%= 灰階 ;100%= 全彩 Chin-Hsiang Lin, MCUT-VCD / 13

14 26. Box Modle (CSS 的盒子模式 ) CSS 裡的 Box Modle 算是相當重要的核心觀念, 弄通了這個概念, 妳 / 你在排版與設計上便會無往不利右圖是重要的設定語法 ( 請同時參閱前面 p.3 的區塊模組語法 ): border margin padding 文字區域 width height 真正的總高真正的總寬 27. 浮動 (float) 的行為原則 1. 浮動元素的左 ( 右 ) 外邊緣也許不位於其親元素的左 ( 右 ) 內邊緣 2. 浮動元素的左 ( 右 ) 外邊緣必須在先出現於文檔資源的浮動元素的右 ( 左 ) 外邊緣的右 ( 左 ) 側, 除非後一個元素的頂端低於前一個元素的底 3. 左浮動元素的右外邊緣不能位於其右側的右浮動元素左處邊緣的右側, 右浮動元素的左外邊緣不能位於其左側的左漂移元素右外邊緣的左側 4. 浮動元素的頂端不能高於親元素的內頂端 5. 浮動元素的頂端不能高於先於它出現的浮動元素或段落的頂端 6. 浮動元素的頂端不能高於行框的頂端, 如果行框中有先於浮動元素的內容 7. 一個向左 ( 右 ) 浮動的元素, 如果其左 ( 右 ) 側仍存在浮動元素, 則不能夠使它的右 ( 左 ) 外邊緣處於容納它的右 ( 左 ) 外邊緣的右 ( 左 ) 側 8. 浮動元素的放置應盡可能高 9. 向左浮動的元素必須盡可能向左放置, 向右浮動的元素必須儘量向右放置, 較高的位置優先給更偏左或偏右的元素值得參考的好文章 1. CSS Float Theory: Things You Should Know 2. The Principles Of Cross-Browser CSS Coding Principles of the CSS Masters 4. CSS Floats / 網頁設計的基礎

15 28. CSS "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 { a { font-size: 1.5em; line-height: 1.5em; color: #36f; 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; Chin-Hsiang Lin, MCUT-VCD / 15

16 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 16 / 網頁設計的基礎

17 30. CSS 高手的 10 大原則 -Glen Stansberry (Aug, 2008) 1. Keep CSS simple Peter-Paul Koch 2. Keep CSS declarations in one line Jonathan Snook 3. Use CSS shorthand Roger Johansson 4. Allow block elements to fill space natury Jonathan Snook 5. Set a float to clear a float Trevor Davis 6. Use negative margins Dan Cederholm 7. Use CSS to center layouts Dan Cederholm 8. Use the right DOCTYPE Jeffrey Zeldman 9. Center Items with CSS Wolfgang Bartelme 10. Utilize text-transform commands Trenton Moss Chin-Hsiang Lin, MCUT-VCD / 17

18 18 / 網頁設計的基礎

19 Chin-Hsiang Lin, MCUT-VCD / 19

20 20 / 網頁設計的基礎

投影片 1

投影片 1 Introduction to CSS Cascading Style Sheets 網頁設計 / 林金祥 Webpage Design/ by Chin-Hsiang Lin 網頁設計概念 java, asp: CSS: 特殊功能式樣設計 HTML: 文字圖像內容 Webpage Design/ by Chin-Hsiang Lin 2 CSS:Fly! My Webpage! CSS: Cascading