Dreamweaver課件：第8章 樣式表.ppt

1、第8章使用CSS樣式表、內(nèi)容摘要、CSS樣式表概述級聯(lián)樣式應(yīng)用技術(shù)如何鏈接外部樣式表應(yīng)用CSS濾鏡效果、學(xué)習(xí)目標(biāo)、學(xué)習(xí)使用CSS的簡單版面設(shè)計(jì)了解如何使用CSS面板功能區(qū)、了解如何添加或新建CSS樣式、CSS樣式表概述、層疊樣式表、級聯(lián)樣式應(yīng)用技術(shù)、創(chuàng)建CSS樣式定義管理CSS樣式應(yīng)用CSS樣式、創(chuàng)建CSS樣式、新建CSS樣式、應(yīng)用和剪輯CSS樣式。了解“CSS樣式”面板創(chuàng)建CSS樣式，了解“CSS樣式”面板，如果“設(shè)計(jì)”面板組中沒有“CSS樣式”面板，請?jiān)诖翱谥羞x擇CSS樣式菜單命令，或者按下鍵面板中的按鈕的工作方式如下：單擊單擊牙齒按鈕可打開附加樣式表對話框。選擇要鏈接或?qū)氲疆?dāng)前文檔的外

2、部樣式表。單擊單擊牙齒按鈕以創(chuàng)建新的CSS樣式。單擊牙齒按鈕打開樣式表剪輯對話框牙齒，從中可以在對話框內(nèi)編輯當(dāng)前文檔或外部樣式表中的所有樣式。在面板中選擇樣式并單擊單擊按鈕將刪除選定的樣式，并刪除該樣式應(yīng)用于所有元素設(shè)置的設(shè)置。單擊使用牙齒按鈕打開“CSS樣式”菜單，您可以在其中剪輯、復(fù)制、刪除或應(yīng)用所選CSS樣式，或創(chuàng)建新的CSS樣式，如圖8-2所示。圖8-1、圖8-2、創(chuàng)建CSS樣式和創(chuàng)建CSS樣式的具體操作包括：(1)執(zhí)行以下三種茄子方法之一打開“新建CSS樣式”對話框，如圖7-3所示：圖8-3，“CSS樣式”面板中的按鈕單擊。在“CSS樣式”窗口中，右鍵單擊單擊，然后從彈出快捷菜單中選

3、擇“新建”命令。單擊單擊按鈕，然后從彈出“CSS樣式”菜單中選擇“新建”命令。(2)在“名稱”下拉列表框中，輸入新創(chuàng)建的CSS樣式的檔案名稱。(3)在“選擇器類型”欄中，選擇定義的樣式類型。有三種類型的CSS樣式創(chuàng)建：若要創(chuàng)建應(yīng)用于文本和文本塊的CSS樣式，請創(chuàng)建自定義樣式。但是，在“名稱”下拉列表框中輸入的自定義樣式名稱必須以句點(diǎn)開頭，否則Dreamweaver會自動添加。要復(fù)蓋為現(xiàn)有HTML標(biāo)簽指定新樣式的HTML標(biāo)簽，請選擇牙齒單個(gè)選項(xiàng)。選擇牙齒單個(gè)選項(xiàng)后，“名稱”下拉框?qū)⒆優(yōu)椤皹?biāo)簽”下拉框，如圖8-4所示。您可以從下拉列表框中選擇復(fù)蓋的標(biāo)簽，如圖8-5所示。指示將使用CSS選擇器復(fù)蓋特

4、定HTML標(biāo)簽組合或包含特定ID屬性的所有標(biāo)簽。選擇牙齒單個(gè)選項(xiàng)后，“名稱”下拉框?qū)⒏臑椤斑x擇器”下拉框，您可以選擇要使用的選擇器類型(請參閱圖8-7)，如圖8-6所示。(4)在“定義位置”列中，選擇樣式類型。要定義外部鏈接CSS樣式，請選擇“牙齒單一選項(xiàng)”。要定義僅適用于當(dāng)前頁面的CSS樣式，請選擇牙齒單個(gè)選項(xiàng)。如果在、圖8-4、圖8-5、圖8-6、圖8-7、“定義位置”列中選擇了單個(gè)選項(xiàng)，則圖具體的定義方法將在以下部分中介紹。(6)設(shè)置單擊按鈕后，完成CSS樣式的創(chuàng)建。、圖8-8、圖8-9、創(chuàng)建新樣式后，介紹如何設(shè)置“CSS樣式定義”對話框、八種CSS樣式以及下面的每種樣式。CSS樣式類

5、型格式CSS樣式背景格式CSS樣式塊格式CSS樣式框格式CSS樣式邊框格式CSS樣式列表格式CSS樣式定位格式擴(kuò)展CSS樣式格式、樣式定義、CSS樣式類型格式可以向頁面上的文本添加字體、大小和樣式等類型格式，如下所示：(1)從分類列表中選擇“類型”選項(xiàng)后，類型選項(xiàng)的參數(shù)設(shè)置將顯示在列表右側(cè)，如圖8-10所示。牙齒中各參數(shù)的含義如下。字體：可以在牙齒下拉列表框中輸入字體類型，也可以單擊單擊按鈕，然后從下拉列表中選擇所需的字體。設(shè)置CSS樣式類型的格式，在大?。貉例X下拉列表框中直接輸入樣式文本的大小，或從下拉列表中選擇所需的大小，選擇大小后，您可以從右側(cè)的下拉列表框中選擇大小單位。粗細(xì)(hight

6、s):您可以在下拉列表框中輸入字體的粗細(xì)，也可以從下拉列表中選擇所需的粗細(xì)。樣式：您可以在牙齒下拉列表框中輸入字體的特殊格式，也可以從下拉列表中選擇字體的特殊格式。變數(shù)：您可以從牙齒下拉式清單中選取字型變形方法。行高：您可以從下拉列表中選擇“正?！被颉爸怠边x項(xiàng)。選擇“值”選擇時(shí)，可以從右側(cè)的下拉列表框中選擇值的單位。寫入大?。耗梢栽谘例X下拉列表框中輸入文本的大小寫入方法，也可以從下拉列表中選擇文本的大小寫入方法。修飾：設(shè)置牙齒列中文本的修飾效果，包括、等復(fù)選框。顏色：您可以使用單擊按鈕從打開的顏色列表中選擇所需的顏色，或直接在文本框中輸入顏色值。(2)設(shè)置完成后，使用單擊按鈕應(yīng)用樣式，然后單

7、擊單擊按鈕關(guān)閉對話框電源。、圖8-10，如果不想使用已設(shè)置的效果，只需選中復(fù)選框即可。添加頁面的元素背景格式的具體操作包括：(1)從分類列表中選擇“背景”選項(xiàng)后，右側(cè)將顯示背景的參數(shù)設(shè)置，如圖8-11所示。牙齒中各參數(shù)的含義如下。背景顏色：您可以使用單擊按鈕、從打開的顏色列表中選擇所需的顏色，或直接在文本框中輸入顏色值。背景圖像：通過將背景圖像的URL地址直接輸入到文本框或單擊按鈕中，可以打開圖像源檔案選擇對話框并選擇背景圖像。CSS樣式背景格式設(shè)置、圖8-11，如果指定的網(wǎng)站文件中不存在選定的圖像，則必須將選定的圖片保存在網(wǎng)站目錄中。重復(fù)：在下拉列表框中，您可以輸入圖像的重復(fù)方式，也可以從下

8、拉列表中選擇背景圖像的重復(fù)方式。附件(attachments)檔案：您可以在下拉列表框中輸入“固定”或“滾動”，以設(shè)置背景圖像是固定在原始位置還是可滾動，或從下拉列表框中選擇。水平位置(horizontal location):您可以在牙齒下拉列表框中輸入水平位置，以根據(jù)應(yīng)用樣式元素設(shè)置背景圖像，或從下拉列表中選擇。垂直位置：在“牙齒”下拉列表中，可以輸入要基于應(yīng)用樣式元素設(shè)置背景圖像的垂直位置，也可以從下拉列表中選擇。(2)設(shè)置完成后，使用單擊按鈕應(yīng)用樣式，然后單擊單擊按鈕關(guān)閉對話框電源。在“CSS樣式定義”對話框“塊”類別中，您可以定義標(biāo)簽和屬性的間距和對齊設(shè)置。格式化區(qū)塊的具體操作包括：

9、(1)在“分類”列表中選擇“塊”選項(xiàng)后，塊的參數(shù)設(shè)置將顯示在對話框右側(cè)，如圖8-12所示。牙齒中各參數(shù)的含義如下。單詞間距：從牙齒下拉列表框中選擇單詞間距方法，如果選擇了“值”選項(xiàng)，請?jiān)谙吕斜砜蛑休斎霐?shù)值以確定單詞間距，并在右側(cè)的下拉列表中設(shè)置數(shù)值的單位。設(shè)置CSS樣式塊格式，在字符間距：下拉列表框中設(shè)置字符之間的間距。如果從列表中選擇“值”選項(xiàng)，則可以從右側(cè)的下拉列表中設(shè)置數(shù)值的單位。垂直對齊：用于在下拉列表框中指定元素相對于父元素垂直方向的對齊方式。您也可以輸入數(shù)值，并從右側(cè)的下拉式清單中設(shè)定數(shù)值的單位。對齊文本：牙齒下拉列表框指定文本在應(yīng)用樣式的元素中的對齊方式。文本縮進(jìn)：在牙齒文本框

10、中輸入第一行的縮進(jìn)距離，然后從右側(cè)的下拉列表中選擇數(shù)字單位。在“空格：”下拉列表框中，設(shè)置空格處理方法。顯示：從下拉列表框中選擇要在塊中顯示的格式。(2)設(shè)置完成后，使用單擊按鈕應(yīng)用樣式，然后單擊單擊按鈕關(guān)閉對話框電源。在“CSS樣式定義”對話框“框”類別中，您可以定義控制元素在頁面上的放置方式和屬性，如下所示：(1)在“分類”列表中選擇“方框”選項(xiàng)后，“方框”選項(xiàng)的參數(shù)設(shè)置將顯示在對話框的右側(cè)，如圖8-13所示。寬度和高度：在下拉列表中指定元素寬度和高度，或輸入數(shù)值，然后從右側(cè)下拉列表中設(shè)置數(shù)值的單位。CSS樣式框格式、圖8-12、圖8-13、浮動：在牙齒下拉列表框中設(shè)置應(yīng)用樣式元素的浮動位

11、置。使用牙齒參數(shù)可以將元素移出頁面。例如，如果從下拉列表框中選擇右對齊選項(xiàng)，則元素放置在頁面右側(cè)的空白處。同樣，如果選擇左對齊選項(xiàng)，元素將放置在頁面左側(cè)的空白處。清除：在“牙齒”下拉列表框中，可以設(shè)置不允許應(yīng)用樣式元素的層。如果在下拉列表框中選擇了“左對齊”選項(xiàng)，則無法在應(yīng)用的樣式元素左側(cè)顯示圖層。同樣，如果選擇右對齊選項(xiàng)，則圖層不會出現(xiàn)在應(yīng)用樣式的右側(cè)。如果在設(shè)置樣式之前圖層已位于元素的一側(cè)，并且設(shè)置的圖層不能出現(xiàn)在該側(cè)，則應(yīng)用了樣式的元素部分將自動移動。填充：用于設(shè)置樣式元素應(yīng)用內(nèi)容和元素邊框之間的空大小，如果沒有邊框，則設(shè)置邊距和邊距之間的空大小等。選中復(fù)選框后，以上下拉框中的設(shè)置將應(yīng)用

12、于元素所有邊，如圖7-13所示。如果清除牙齒復(fù)選框，則可以分別在頂部、右側(cè)、底部和左側(cè)下拉列表框中設(shè)置該邊緣的空大小(參見圖8-14)，如圖8-14所示。邊界：在“牙齒”列中，可以在應(yīng)用了樣式的元素邊界和其他元素之間設(shè)置空大小。選中復(fù)選框后，以上下拉框中的設(shè)置將應(yīng)用于元素所有邊，如圖7-13所示。如果清除牙齒復(fù)選框，則可以分別在頂部、右側(cè)、底部和左側(cè)下拉列表框中設(shè)置該邊的空大小。您可以從右側(cè)的下拉列表框中選擇值的單位，如圖8-14所示。(2)設(shè)置完成后，使用單擊按鈕應(yīng)用樣式，然后單擊單擊按鈕關(guān)閉對話框電源。在“CSS樣式定義”對話框“邊框”類別中，您可以定義元素環(huán)境邊框設(shè)置，如寬度、顏色和樣式

13、。設(shè)置邊框格式：(1)在“分類”列表中選擇“邊界”選項(xiàng)后，列表右側(cè)將顯示邊界選項(xiàng)的參數(shù)設(shè)置，如圖8-15所示。牙齒中各參數(shù)的含義如下。樣式：在牙齒列中設(shè)置邊框的樣式外觀，如圖8-16所示。選中“牙齒”復(fù)選框后，可以將上述下拉列表框中的設(shè)置應(yīng)用于元素所有邊。如果清除牙齒復(fù)選框，則可以分別在“頂部”、“右側(cè)”、“底部”和“左側(cè)”下拉框中設(shè)置該邊的邊界格式。設(shè)置CSS樣式邊框格式，寬度：在牙齒列中設(shè)置元素邊框的粗細(xì)。設(shè)置方法類似于樣式欄。顏色：設(shè)置牙齒列的元素邊框顏色。設(shè)置方法類似于樣式欄。(2)設(shè)置完成后，使用單擊按鈕應(yīng)用樣式，然后單擊單擊按鈕關(guān)閉對話框電源。您可以在、圖8-14、圖8-15和“C

14、SS樣式定義”對話框的“列表”類別中定義列表標(biāo)簽的列表設(shè)置(請參閱牙齒中各參數(shù)的含義如下。類型：您可以從牙齒下拉列表框中選擇未排序列表的項(xiàng)目符號類型和已排序列表的編號類型。CSS樣式列表格式，項(xiàng)目符號圖像：在牙齒下拉列表框中，可以將圖像指定為無序列表的項(xiàng)目符號，直接輸入指定圖像的路徑，或者使用單擊按鈕選擇圖像作為項(xiàng)目符號，如圖8-18所示。位置：您可以從牙齒下拉列表框中選擇列表文本換行以及是否縮進(jìn)。選擇“內(nèi)”選項(xiàng)時(shí)，列表太長，自動換行時(shí)不執(zhí)行縮進(jìn)；選擇“外”選項(xiàng)時(shí)，列表太長，自動換行時(shí)縮進(jìn)顯示。(2)設(shè)置完成后，使用單擊按鈕應(yīng)用樣式，然后單擊單擊按鈕關(guān)閉對話框電源。您可以在、圖8-16、圖8-

15、17、“CSS樣式定義”對話框“位置”類別中定義圖層的默認(rèn)標(biāo)簽列，特定于設(shè)置的操作包括：(1)從分類列表中選擇擴(kuò)展選項(xiàng)后，對話框右側(cè)將顯示擴(kuò)展選項(xiàng)的參數(shù)設(shè)置，如圖8-20所示。牙齒中各參數(shù)的含義如下。分頁符：“牙齒”列允許您設(shè)置打印頁面時(shí)應(yīng)用分頁符的位置。在“之前”和“之后”下拉列表框中，可以分別設(shè)置分頁符之前和分頁符之后的位置。CSS樣式擴(kuò)展格式，設(shè)置視覺特效：在牙齒列中，您可以設(shè)置樣式的視覺效果，還可以從“光標(biāo)”下拉列表框中選擇鼠標(biāo)光標(biāo)位于樣式控制的對象上時(shí)的圖像。您可以從篩選下拉式清單方塊中選取由型式控制的物件的特殊效果。通常稱為CSS濾鏡效果，如圖8-21所示。錨定：您可以在牙齒列中錨定圖層，圖層將顯示在固定位置。(2)設(shè)置完成后，使用單擊按鈕應(yīng)用樣式，然后單擊單擊按鈕關(guān)閉對話框電源。、圖8-20、圖8-21、管理CSS樣式、刪除CSS樣式、復(fù)制、重命名編輯創(chuàng)建的樣式：(1)在“CSS樣式”面板中，打開單擊面板底部的按鈕，如圖8-22所示的“”對話框。(2)從列表中選擇要編輯的樣式，單擊單擊按鈕打開“CSS樣式定義”對話框，然后使用與創(chuàng)建新樣式相同的方法修改所需參數(shù)，修改完成后，單擊單擊按鈕返回到“樣式表剪輯”對話框。(3)單擊單擊按鈕完成樣式編輯。在、圖8