第8章使用樣式-ppt課件

1、第第8 8章章 運用款式運用款式 1 什么是什么是 CSS 款式款式 CSSCascading Style Sheet，層疊款式表，層疊款式表技術(shù)是一種格式化網(wǎng)頁的規(guī)范方式，它擴展技術(shù)是一種格式化網(wǎng)頁的規(guī)范方式，它擴展了了 HTML 的功能，使網(wǎng)頁設(shè)計者可以以更有效的功能，使網(wǎng)頁設(shè)計者可以以更有效的方式設(shè)置網(wǎng)頁格式。的方式設(shè)置網(wǎng)頁格式。CSS 款式表中的層疊是款式表中的層疊是指多個指多個 CSS 款式表可以同時運用于同一個頁面款式表可以同時運用于同一個頁面或網(wǎng)頁中的同一元素，閱讀器根據(jù)或網(wǎng)頁中的同一元素，閱讀器根據(jù) CSS 規(guī)范中規(guī)范中定義的層疊規(guī)那么來決議哪一種款式優(yōu)先，優(yōu)定義的層疊規(guī)那么來

2、決議哪一種款式優(yōu)先，優(yōu)先的款式將覆蓋其他款式。先的款式將覆蓋其他款式。 一、一、 CSS 款式概述款式概述 CSS 款式表是由一系列款式選擇器和款式表是由一系列款式選擇器和 CSS 屬性組成，屬性組成，它支持字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩?、它支持字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩浴⒘斜韺傩砸约皽蚀_定位網(wǎng)頁元素屬性等，從而大大加強了列表屬性以及準確定位網(wǎng)頁元素屬性等，從而大大加強了網(wǎng)頁的格式化才干。網(wǎng)頁的格式化才干。 除了功能強大這個優(yōu)點外，運用除了功能強大這個優(yōu)點外，運用 CSS 款式的另一款式的另一優(yōu)點是可以運用同一個款式表對整個站點的具有一樣性質(zhì)優(yōu)點是可以運用同一個

3、款式表對整個站點的具有一樣性質(zhì)的網(wǎng)頁進展格式修飾，當需求更改這些頁面的款式設(shè)置時，的網(wǎng)頁進展格式修飾，當需求更改這些頁面的款式設(shè)置時，只需在這個款式表中修正，而不用對每個頁面逐個進展修只需在這個款式表中修正，而不用對每個頁面逐個進展修正，從而大簡化了格式化的任務(wù)。正，從而大簡化了格式化的任務(wù)。在在 Dreamweaver 中中 CSS 款式的類型包括以下幾種：款式的類型包括以下幾種： 類款式它在網(wǎng)頁中定義了一個類款式它在網(wǎng)頁中定義了一個 CSS 款式屬性集，款式屬性集，當頁面中的對象援用該款式后，所定義的當頁面中的對象援用該款式后，所定義的 CSS 屬性運用到頁屬性運用到頁面中的文本范圍或文本

4、塊。此類款式是運用最為廣泛的一種面中的文本范圍或文本塊。此類款式是運用最為廣泛的一種款式類型。因可自在定義所需的款式款式類型。因可自在定義所需的款式 重新定義重新定義 HTML 標簽款式該類款式只能對標簽款式該類款式只能對 HTML 標簽標簽重新定義，款式的名字只能選擇，不能修正，不能輸入新的名字重新定義，款式的名字只能選擇，不能修正，不能輸入新的名字，否那么無效。例如，創(chuàng)建或更改，否那么無效。例如，創(chuàng)建或更改 H1 標簽對應(yīng)于段落格式中標簽對應(yīng)于段落格式中的的“標題標題 1的的 CSS 款式時，網(wǎng)頁中的一切運用款式時，網(wǎng)頁中的一切運用 H1 標簽設(shè)置標簽設(shè)置了該格式的文本都能立刻被更新。了該

5、格式的文本都能立刻被更新。 高級高級CSS 選擇器，該類款式可以定義網(wǎng)頁中的超鏈接選擇器，該類款式可以定義網(wǎng)頁中的超鏈接效果，同樣款式的名字也只能選擇，不能修正。效果，同樣款式的名字也只能選擇，不能修正。其中：其中：a:link設(shè)定未點擊鏈接時的外觀設(shè)定未點擊鏈接時的外觀; a:visited設(shè)定點擊鏈接后設(shè)定點擊鏈接后的外觀的外觀; a:hover設(shè)定鼠標挪動到鏈接上時的外觀設(shè)定鼠標挪動到鏈接上時的外觀; a:active設(shè)定鏈設(shè)定鏈接獲得焦點時的外觀。例如，可以使超鏈接文字在各種形狀下均接獲得焦點時的外觀。例如，可以使超鏈接文字在各種形狀下均無下劃線，并且當鼠標懸停時文字顏色由藍色變?yōu)榧t色

6、等。設(shè)定無下劃線，并且當鼠標懸停時文字顏色由藍色變?yōu)榧t色等。設(shè)定后，本頁面的一切超鏈接均會按所設(shè)定的外觀來顯示。后，本頁面的一切超鏈接均會按所設(shè)定的外觀來顯示。 在網(wǎng)站中運用在網(wǎng)站中運用 CSS 款式的方式與款式的方式與 HTML 款式一樣，需求款式一樣，需求先創(chuàng)建先創(chuàng)建 CSS 款式，然后在運用到網(wǎng)頁或整個網(wǎng)站中?？钍?，然后在運用到網(wǎng)頁或整個網(wǎng)站中。1運用運用“CSS 款式面板款式面板 在網(wǎng)站或網(wǎng)頁中創(chuàng)建和運用在網(wǎng)站或網(wǎng)頁中創(chuàng)建和運用 CSS 款式時，需求運用款式時，需求運用“CSS 款式面板。選擇款式面板。選擇“窗口菜單中的窗口菜單中的“CSS 款式款式命令或按【命令或按【Shift +

7、F11】鍵，可以翻開】鍵，可以翻開“CSS 款式面板?？钍矫姘濉?二、二、 創(chuàng)建和運用創(chuàng)建和運用 CSS CSS 款式款式 在文檔窗口中，在文檔窗口中，class 類款式將出如今類款式將出如今 “CSS 款式面板款式面板中，如圖中，如圖8.5 所示。而對于創(chuàng)建的其他兩種款式，將直接所示。而對于創(chuàng)建的其他兩種款式，將直接包含在網(wǎng)頁代碼或包含在網(wǎng)頁代碼或 CSS 外部款式表中，而不會顯示在外部款式表中，而不會顯示在“CSS 款式面板?？钍矫姘濉D8.5 CSS 款式面板2創(chuàng)建創(chuàng)建 CSS 款式款式 在文檔中要創(chuàng)建在文檔中要創(chuàng)建 CSS 款式，首先將款式，首先將“CSS 款式面板翻款式面板翻開，然后

8、執(zhí)行以下步驟。開，然后執(zhí)行以下步驟。1在在 CSS 款式面板中，單擊款式面板中，單擊“新建新建 CSS 款式按鈕款式按鈕 ，翻開翻開“新建新建 CSS 款式對話框，如圖款式對話框，如圖8.6 所示。所示。圖8.6 “新建CSS 款式對話框2在在“新建新建 CSS 款式對話框中進展如下設(shè)置：假款式對話框中進展如下設(shè)置：假設(shè)選擇設(shè)選擇“創(chuàng)建自定義款式創(chuàng)建自定義款式class款式類型，那么在款式類型，那么在“稱號文本框中輸入款式稱號；假設(shè)選擇稱號文本框中輸入款式稱號；假設(shè)選擇“重定義重定義HTML 標簽或標簽或“運用運用 CSS 選擇器款式類型，那么在選擇器款式類型，那么在“稱號文本框中選擇相應(yīng)的款

9、式稱號。稱號文本框中選擇相應(yīng)的款式稱號。3在在“定義在框中選擇，假設(shè)選擇定義在框中選擇，假設(shè)選擇“新建款式表新建款式表文件選項，假設(shè)曾經(jīng)定義過款式表文件，那么可以文件選項，假設(shè)曾經(jīng)定義過款式表文件，那么可以從列表中選擇一個文件；假設(shè)選擇從列表中選擇一個文件；假設(shè)選擇“僅對該文檔單僅對該文檔單項選擇按鈕，表示款式將直接定義在當前文檔中。項選擇按鈕，表示款式將直接定義在當前文檔中。4單擊單擊“確定按鈕，假設(shè)選擇確定按鈕，假設(shè)選擇“新建款式表文件選新建款式表文件選項，那么翻開項，那么翻開“保管款式表文件對話框，進展保管設(shè)置即保管款式表文件對話框，進展保管設(shè)置即可后彈出可后彈出“款式稱號的款式稱號的C

10、SS 款式定義對話框；那么直接彈款式定義對話框；那么直接彈出出“款式稱號的款式稱號的 CSS 款式定義對話框，如圖款式定義對話框，如圖8.7 所示。所示。圖8.7 “CSS 款式定義對話框5用戶可以在用戶可以在“分類列表框中選擇分類列表框中選擇 8 種種 CSS 款式屬性款式屬性，Dreamweaver 選擇相應(yīng)屬性分類后那么在對話框右部會顯選擇相應(yīng)屬性分類后那么在對話框右部會顯示相應(yīng)的選項，可以根據(jù)需求設(shè)置。示相應(yīng)的選項，可以根據(jù)需求設(shè)置。6最后單擊最后單擊“確定按鈕，那么款式定義終了。確定按鈕，那么款式定義終了。 在文檔窗口，不論是內(nèi)部款式還是外部款式表文件，在文檔窗口，不論是內(nèi)部款式還是

11、外部款式表文件，對于出如今對于出如今“CSS 款式面板中的自定義款式面板中的自定義 class 類款式，類款式，應(yīng)首先選取要運用款式的文本、段落或其他對象，然后單應(yīng)首先選取要運用款式的文本、段落或其他對象，然后單擊面板中的款式圖標或款式稱號。假設(shè)要取消款式，選取擊面板中的款式圖標或款式稱號。假設(shè)要取消款式，選取對象后，單擊面板中的對象后，單擊面板中的“無無 CSS 款式選項即可?？钍竭x項即可。 對于對于 “運用運用 CSS 選擇器款式，網(wǎng)頁自動運用該款選擇器款式，網(wǎng)頁自動運用該款式而無須用戶指定。式而無須用戶指定。三、運用三、運用CSS款式款式 本實例定義一種網(wǎng)頁中常用的正文款式，效果為本實例

12、定義一種網(wǎng)頁中常用的正文款式，效果為“文字大文字大小小 16 px16 px，行高，行高 120%120%，首行縮進兩個字符，制造步驟如下，首行縮進兩個字符，制造步驟如下。 1 1翻開一個包含段落文本的文檔，確保翻開翻開一個包含段落文本的文檔，確保翻開“CSS CSS 款款式面板，單擊式面板，單擊“新建新建 CSS CSS 款式按鈕款式按鈕 ，翻開，翻開“新建新建CSSCSS款式對話框，在款式對話框，在“稱號文本框中輸入款式稱號稱號文本框中輸入款式稱號“testtest，在，在“類型選項中選擇類型選項中選擇“創(chuàng)建自定義款式創(chuàng)建自定義款式classclassM M單項選擇按鈕，選擇單項選擇按鈕，

13、選擇“僅對該文檔單項選擇按鈕，設(shè)僅對該文檔單項選擇按鈕，設(shè)置完成后單擊置完成后單擊“確定按鈕。確定按鈕。四、自定義四、自定義CSS款式實例款式實例 2在翻開的在翻開的“.test 的的CSS 款式定義對話框參見圖款式定義對話框參見圖8.7中，設(shè)置字體為中，設(shè)置字體為“宋體、大小為宋體、大小為 16 像素像素px、行、行高為高為 120%。 3然后在然后在“分類列表框中選擇分類列表框中選擇“區(qū)塊選項，如圖區(qū)塊選項，如圖8.8 所示，設(shè)置文字縮進為所示，設(shè)置文字縮進為 32 像素相當于兩個字符，單像素相當于兩個字符，單擊擊“確定按鈕，那么新建的確定按鈕，那么新建的“test款式出如今款式出如今“C

14、SS 款款式面板中。式面板中。圖8.8 定義區(qū)塊屬性4在文檔窗口中選擇取要運用款式的文本，然后在單擊在文檔窗口中選擇取要運用款式的文本，然后在單擊“test款式，即可運用該款式?？钍剑纯蛇\用該款式。 本實例定義一種常見的效果，即網(wǎng)頁中的一切超鏈接都沒本實例定義一種常見的效果，即網(wǎng)頁中的一切超鏈接都沒有下劃線，制造步驟如下。有下劃線，制造步驟如下。1翻開一個包含有超鏈接的文檔，確保翻開翻開一個包含有超鏈接的文檔，確保翻開“CSS 款式款式面板，單擊面板，單擊“新建新建 CSS 款式按鈕款式按鈕 ，翻開，翻開“新建新建 CSS 款式對話框，在款式對話框，在“類型框內(nèi)選擇類型框內(nèi)選擇“重新定義重新

15、定義 HTML 標標簽簽R選項，然后在選項，然后在“稱號框內(nèi)選擇稱號框內(nèi)選擇 a 標簽即超鏈標簽即超鏈接標簽，選擇接標簽，選擇“僅對該文檔選項，單擊僅對該文檔選項，單擊“確定按鈕確定按鈕。五、重新定義五、重新定義 HTML 標簽款式實例標簽款式實例2在翻開在翻開“a 的的 CSS 定義對話框中的定義對話框中的“修飾選項修飾選項中選擇中選擇“無，如圖無，如圖8.7所示，單擊所示，單擊“確定按鈕。確定按鈕。3此時款式被自動運用，網(wǎng)頁中的一切超鏈接都沒有此時款式被自動運用，網(wǎng)頁中的一切超鏈接都沒有下劃線。下劃線。 本實例將繼續(xù)上一實例，使得當用戶鼠標指針挪動到本實例將繼續(xù)上一實例，使得當用戶鼠標指針挪動到超鏈接上時，添加下劃線效果，制造步驟如下。超鏈接上時，添加下劃線效果，制造步驟如下。1翻開剛剛制造重新定義翻開剛剛制造重新定義HTML 標簽款式的文檔，單擊標簽款式的文檔，單擊“新建新建 CSS 款式按鈕款式按鈕 ，翻開，翻開“新建新建 CSS 款式對話款式對話框，在框，在“類型框內(nèi)選擇類型框內(nèi)選擇“運用運用 CSS 選擇器選擇器U單項單項選擇按鈕，然后在選擇按鈕，然后在“稱號下接列表中選擇稱號下接列表中選擇“a:hover選選擇器，選擇擇器，