CSS樣式 靜宜大學 資管系 楊子青
大綱 字型 文字段落 文字效果 背景
1. 字型 color (字體顏色) font-family (指定字型樣式) 可用顏色名稱、16進位碼、RGB碼，例如： body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} http://www.w3schools.com/css/tryit.asp?filename=trycss_color font-family (指定字型樣式) 依序指定字型名稱，以逗號分開，例如： p{font-family:"Times New Roman", "標楷體";} http://www.w3schools.com/css/tryit.asp?filename=trycss_font-family
font-style: italic (斜體) font-weight: bold (粗體) 字型 font-size (字體大小) 數值+百分比(%) 數值+單位 px：以螢幕的像素(pixel)為單位 pt：以點數(point)為單位，如Word的大小 em：以目前字型大小為單位 假設目前字型10pt，則2em=20pt http://www.w3schools.com/css/tryit.asp?filename=trycss_font-size_percent_em font-style: italic (斜體) font-weight: bold (粗體)
2. 文字段落 屬性 屬性名稱 設定值 text-align 設定文字水平對齊 Left center right justify text-indent 首行縮排 數值＋百分比(%) 數值＋單位 letter-spacing 設定字元間距 normal 數值+單位 (pt , px , em) line-height 設定行高
3. 文字效果 屬性 屬性名稱 設定值 vertical-align 垂直對齊 baseline (一般位置) super(上標字) sub(下標字) top(對齊頂端) middle(垂直置中) bottom(對齊底部) text-decoration 增加裝飾樣式 none underline(文字下方線) line-through(刪除線) overline(文字上方線) text-transform 轉換字母大小寫 none (不做改變) lowercase (全部小寫) uppercase (全部大寫) capitalize (首字大寫) text-shadow (IE不支援) 增加陰影效果
線上網站：文字效果CSS csstypeset 網址：http://csstypeset.com/
4. 背景 設定背景顏色 設定背景圖案 background-color:顏色值 background-image: url (圖檔相對路徑) background-repeat 設定背景圖案是否重複顯示 background-attachment 設定背景圖案是否跟捲軸一起捲動 background-position 設定背景圖案位置 background-size 設定背景尺寸 linear-gradient (漸層方向, 色彩1, 位置1,色彩2,位置2...)
Ultimate CSS Gradient Generator 網址：http://www.colorzilla.com/gradient-editor/
參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 13: CSS基本語法 網路資源 http://www.w3schools.com/css/