CSS样式-静宜大学资讯学院.PPT

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