CHAPTER 18 CSS樣式表的動態效果.

Presentation on theme: "CHAPTER 18 CSS樣式表的動態效果."— Presentation transcript:

1 CHAPTER 18 CSS樣式表的動態效果

2 認識CSS 1. 如何定義CSS樣式表

3 2. CSS的色彩定義方式

4 圖 CSS檔案

5 18-2 如何在網頁上使用CSS 1. 透過<STYLE>標籤來設定樣式 2. 透過外部樣式表來定義

6 定義專屬的CSS樣式 1. 透過類別來定義樣式 2. 透過ID來定義樣式

7 18-4 文字的設定 1. 基本的文字設定 text-align：設定文字的水平位置 vertical-align：設定文字的垂直位置
文字的設定 1. 基本的文字設定 text-align：設定文字的水平位置 vertical-align：設定文字的垂直位置 letter-spacing：文字的間隔 word-spacing：字元和字元的間隔 line-height：設定行的高度 width：文字顯示區域的寬度 text-transform：指定大寫或小寫 text-indent：首行文字縮排

8 圖 文字的變化

9 2. 設定文字外框的樣式 NONE：沒有外框 DOTTEE：圓形點線的外框 DATTED：矩形點線的外框 SOLID：實線
DOUBLE：雙重線 GROOVE：下陷的立體外框 RIDGE：上升的立體外框 INSET：內框下陷的立體外框 OUTSET：內框上升的立體外框

10 圖 設定文字外框的樣式

11 3. 設定文字外框的框線色彩

12 4. 統一設定文字外框的粗細、色彩和樣式

13 18-5 背景圖片的設定 BACKGROUND-COLOR：設定背景的顏色 BACKGROUND-IMAGE：設定背景圖片的位址
背景圖片的設定 BACKGROUND-COLOR：設定背景的顏色 BACKGROUND-IMAGE：設定背景圖片的位址 BACKGROUND-ATTACHMENT：設定背景圖片是否隨著網頁捲動 BACKGROUND-REPEAT：設定背景圖片的排列方式。 BACKGROUND-POSITION：設定圖片顯示的位置 BACKGROUND：統一設定背景的屬性

14 18-6 滑鼠移動的樣式 可以設定的狀態： a{屬性設定}：這是超聯結的原始狀態。 a:visited：已經點選過的超聯結狀態。
滑鼠移動的樣式 可以設定的狀態： a{屬性設定}：這是超聯結的原始狀態。 a:visited：已經點選過的超聯結狀態。 a:hover：滑鼠游標經過超聯結的狀態。 a:active：滑鼠游標點選超聯結的狀態。