CSS樣式 靜宜大學 資管系 楊子青.

Presentation on theme: "CSS樣式 靜宜大學 資管系 楊子青."— Presentation transcript:

1 CSS樣式 靜宜大學 資管系 楊子青

2 大綱 字型 文字段落 文字效果 背景

3 1. 字型 color (字體顏色) font-family (指定字型樣式) 可用顏色名稱、16進位碼、RGB碼，例如：
body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} font-family (指定字型樣式) 依序指定字型名稱，以逗號分開，例如： p{font-family:"Times New Roman", "標楷體";}

4 font-style: italic (斜體) font-weight: bold (粗體)
字型 font-size (字體大小) 數值+百分比(%) 數值+單位 px：以螢幕的像素(pixel)為單位 pt：以點數(point)為單位，如Word的大小 em：以目前字型大小為單位 假設目前字型10pt，則2em=20pt font-style: italic (斜體) font-weight: bold (粗體)

5 2. 文字段落 屬性 屬性名稱 設定值 text-align 設定文字水平對齊 Left center right justify
text-indent 首行縮排 數值＋百分比(%) 數值＋單位 letter-spacing 設定字元間距 normal 數值+單位 (pt , px , em) line-height 設定行高

6 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不支援) 增加陰影效果

7 線上網站：文字效果CSS csstypeset 網址：

8 4. 背景 設定背景顏色 設定背景圖案 background-color:顏色值
background-image: url (圖檔相對路徑) background-repeat 設定背景圖案是否重複顯示 background-attachment 設定背景圖案是否跟捲軸一起捲動 background-position 設定背景圖案位置 background-size 設定背景尺寸 linear-gradient (漸層方向, 色彩1, 位置1,色彩2,位置2...)

9 Ultimate CSS Gradient Generator
網址：

10 參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。
Chap 13: CSS基本語法 網路資源