1、第8章 使用CSS樣式表,教學(xué)提示和教學(xué)目標(biāo) 8.1 CSS樣式表 8.2 定義樣式表屬性,教學(xué)提示和教學(xué)目標(biāo),教學(xué)提示：CSS在當(dāng)前的網(wǎng)頁(yè)設(shè)計(jì)中已經(jīng)成為不可缺少的技術(shù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說CSS是一個(gè)非常靈活的工具，通過CCS無(wú)需把繁雜的樣式定義編寫在文檔結(jié)構(gòu)中。CSS樣式表的主要優(yōu)點(diǎn)是提供方便的更新功能，在更新CSS樣式時(shí)，使用該樣式的網(wǎng)站所有網(wǎng)頁(yè)內(nèi)容都自動(dòng)更新應(yīng)用新樣式。 教學(xué)目標(biāo)： 掌握創(chuàng)建CSS樣式 掌握使用CSS編輯器設(shè)置CSS屬性 掌握自定義CSS樣式 掌握鏈接外部現(xiàn)有CSS樣式文件,8.1 CSS樣式表,CSS層疊樣式表是一系列格式設(shè)置規(guī)則，它控制網(wǎng)頁(yè)內(nèi)容的外觀，使用CSS設(shè)置頁(yè)

2、面格式時(shí)，將內(nèi)容與表現(xiàn)形式分開，頁(yè)面內(nèi)容(即HTML代碼)駐留在HTML文件自身中，而用于定義內(nèi)容表現(xiàn)形式的CSS規(guī)則駐留在另一個(gè)文件(外部樣式表)或HTML文檔的另一部分(通常為文件頭部分)中，使用CSS可以靈活地控制具體的頁(yè)面外觀，從精確的布局定位到特定的字體樣式。 8.1.1 關(guān)于CSS樣式表 8.1.2 使用【CSS樣式】面板 8.1.3 創(chuàng)建新的CSS樣式 8.1.4 應(yīng)用自定義CSS樣式 8.1.5 創(chuàng)建和鏈接到外部CSS樣式表,8.1.1 關(guān)于CSS樣式表,CSS允許控制HTML無(wú)法獨(dú)自控制的許多屬性，如可以為選定的文本指定不同的字體、大小和單位(像素、磅值等)，通過使用CSS以

3、像素為單位設(shè)置字體大小，還可以確保在多個(gè)瀏覽器中以更一致的方式顯示頁(yè)面外觀。 除設(shè)置文本格式外，還可以使用CSS控制Web頁(yè)面中塊級(jí)別元素的格式和定位。如設(shè)置塊級(jí)元素的邊距、邊框以及其他文本周圍的浮動(dòng)文本等。 1. CSS規(guī)則 2. Dreamweaver中CSS樣式的類型 3. CSS的插入位置,8.1.2 使用【CSS樣式】面板,在Dreamweaver中，選擇【窗口】|【CSS樣式】命令，打開【CSS樣式】面板，或按ShiftF11組合鍵，打開【CSS樣式】面板，如圖8.1所示。 在【CSS樣式】面板的底部排列有幾個(gè)按鈕，分別如下。 【附加樣式表】：在HTML文檔中鏈接一個(gè)外部CSS文件

4、。 【新建CSS樣式】：創(chuàng)建新的CSS樣式文件。 【編輯樣式表】：編輯原有的CSS規(guī)則。 【刪除CSS樣式】：刪除選中已有的CSS規(guī)則,8.1.3 創(chuàng)建新的CSS樣式,在Dreamweaver中，可以創(chuàng)建自己的CSS樣式來(lái)自動(dòng)格式化HTML標(biāo)簽和網(wǎng)頁(yè)文字。 在【新建CSS規(guī)則】對(duì)話框中可以進(jìn)行如下設(shè)置。 【名稱】：設(shè)置新建的樣式表的名稱。 【選擇器類型】：定義樣式類型，并將其運(yùn)用到特定的部分。選擇【類】，要在【名稱】的下拉列表框中輸入自定義樣式的名稱，其名稱可以是字母和數(shù)字的組合，如果沒有輸入符號(hào)“.”，Dreamweaver 8會(huì)自動(dòng)輸入。選擇【標(biāo)簽】，需要在【標(biāo)簽】后的下拉列表框中選擇一個(gè)

5、HTML標(biāo)簽，也可以直接在【標(biāo)簽】后的下拉列表框中輸入這個(gè)標(biāo)簽。選擇【高級(jí)】，需要在【選擇器】后的下拉列表中選擇一個(gè)選擇器的類型，也可以在【選擇器】后的下拉列表框中輸入一個(gè)選擇器類型。 【定義在】：用來(lái)設(shè)置新建的CSS語(yǔ)句的位置。CSS樣式按照使用方法可以分為內(nèi)部樣式和外部樣式，如果想把CSS規(guī)則反應(yīng)用于當(dāng)前網(wǎng)頁(yè)內(nèi)部，勾選【僅對(duì)該文檔】單選按鈕。,8.1.4 應(yīng)用自定義CSS樣式,應(yīng)用自定義CSS樣式的具體操作步驟如下。 (1) 打開網(wǎng)頁(yè)文檔。 (2) 選擇【窗口】|【CSS樣式】命令，打開【CSS樣式】面板。 (3) 在【CSS樣式】面板中單擊鼠標(biāo)的右鍵，在彈出的菜單中選擇【新建】選項(xiàng)。 (

6、4) 彈出【新建CSS規(guī)則】對(duì)話框，在對(duì)話框中【選擇器類型】設(shè)置為【類】，【名稱】文本框中輸入.zt，【定義在】設(shè)置為【僅對(duì)該文檔】。 (5) 單擊【確定】按鈕，彈出【.zt的CSS規(guī)則定義】對(duì)話框，在對(duì)話框中將【字體】設(shè)置為【宋體】，【大小】設(shè)置為12像素，【樣式】設(shè)置為【正?！浚绢伾吭O(shè)置為000000。 (6) 單擊【確定】按鈕，在【CSS樣式】面板中可以看到新建的樣式。 (7) 選中需要套用樣式的文字，然后在樣式面板的新建CCS規(guī)則名上單擊鼠標(biāo)的右鍵，在彈出的菜單中選擇【套用】命令。 (8) 選擇命令后，文字自動(dòng)套用樣式，如圖8.13所示。 (9) 保存文檔，按F12鍵在瀏覽器中預(yù)覽

7、效果，如圖8.14所示。,圖8.13 套用樣式 圖8.14 預(yù)覽效果,8.1.5 創(chuàng)建和鏈接到外部CSS樣式表,1. 創(chuàng)建外部CCS樣式表 (1) 選擇【窗口】|【CSS樣式】命令，打開【CSS樣式】面板。 (2) 在【CSS樣式】面板中單擊【新建CSS規(guī)則】按鈕，彈出【新建CSS規(guī)則】對(duì)話框，在對(duì)話框中【選擇器類型】設(shè)置為【類】，【名稱】文本框中輸入.ws，【定義在】設(shè)置為【新建樣式表文件】。 (3) 單擊【確定】按鈕，彈出【保存樣式表文件為】對(duì)話框，在【文件名】文本框中輸入樣式表文件的名稱，并在【相對(duì)于】下拉表框中選擇【文檔】選項(xiàng)。 (4) 單擊【保存】按鈕，彈出對(duì)話框，在對(duì)話框中進(jìn)行相應(yīng)

8、的格式設(shè)置。 (5) 單擊【確定】按鈕，在【CSS樣式】面板中可以看到新建的樣式。 2. 鏈接外部樣式表 外部樣式表是包含了樣式格式信息的一個(gè)單獨(dú)的文件，編輯外部CSS樣式表時(shí)，鏈接到該CSS樣式表的所有文檔會(huì)全部更新以反映所做的樣式編輯，鏈接外部樣式表的具體操作步驟如下。 (1) 在【CSS樣式】面板中單擊【附加樣式表】按鈕，彈出【鏈接外部樣式表】對(duì)話框。 (2) 單擊對(duì)話框中的【文件URL】文本框后面的【瀏覽】按鈕，彈出【選擇樣式表文件】對(duì)話框，在對(duì)話框中選擇要鏈接的CSS樣式文件，勾選【鏈接】單選按鈕后，單擊【確定】按鈕即可。,控制網(wǎng)頁(yè)元素外觀的CSS樣式用來(lái)定義字體、顏色、邊距和字間距

9、等屬性，在Dreamweaver 8中可以對(duì)所有的CSS屬性進(jìn)行設(shè)置。CSS屬性被分為八大類，分別是：類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展，下面分別進(jìn)行介紹。 8.2.1 設(shè)置CSS樣式的類型 8.2.2 設(shè)置CSS樣式的背景 8.2.3 設(shè)置CSS樣式的區(qū)塊 8.2.4 設(shè)置CSS樣式的方框 8.2.5 設(shè)置CSS樣式的邊框 8.2.6 設(shè)置CSS樣式的列表 8.2.7 設(shè)置CSS樣式的定位 8.2.8 設(shè)置CSS樣式的擴(kuò)展,8.2 定義樣式表屬性,8.2.1 設(shè)置CSS樣式的類型,使用【CSS樣式定義】對(duì)話框中的【類型】選項(xiàng)可以定義CSS樣式的基本字體。 在CSS【類型】選項(xiàng)中可

10、以進(jìn)行如下設(shè)置。 【字體】：為樣式設(shè)置字體。 【大小】：定義文本大小?？梢酝ㄟ^選擇數(shù)字和度量單位選擇特定的大小。 【樣式】：將【正?！俊ⅰ拘斌w】或【偏斜體】指定為字體樣式，默認(rèn)設(shè)置是【正?！?。 【行高】：設(shè)置文本所在行的高度，該設(shè)置傳統(tǒng)上稱為“前導(dǎo)”，輸入一個(gè)確切的值并選擇一種度量單位即可。 【修飾】：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。正常文本的默認(rèn)修飾設(shè)置是【無(wú)】，鏈接的默認(rèn)設(shè)置是【下劃線】，將鏈接設(shè)置設(shè)為【無(wú)】時(shí)，可以通過定義一個(gè)特殊的類來(lái)刪除鏈接中的下劃線。 【粗細(xì)】：對(duì)字體應(yīng)用特定或相對(duì)的粗體量，【正?！康扔?00；【粗體】等于700。 【變體】：設(shè)置文本為正常或者為小

11、型大寫字母，Dreamweaver 8不在文檔窗口中顯示該屬性。 【大小寫】：將選定內(nèi)容中的每個(gè)單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫。 【顏色】：設(shè)置文本顏色。,8.2.2 設(shè)置CSS樣式的背景,在【分類】列表框中選擇【背景】選項(xiàng)，背景屬性的功能主要是在網(wǎng)頁(yè)的元素后面加入固定的背景顏色或圖像。 在CSS【背景】選項(xiàng)中可以進(jìn)行如下設(shè)置。 【背景顏色】：設(shè)置元素的背景顏色。 【背景圖像】：設(shè)置元素的背景圖像。 【重復(fù)】：確定是否以及如何重復(fù)背景圖像，包含四個(gè)選項(xiàng)?！静恢貜?fù)】表示在元素開始處顯示一次圖像；【重復(fù)】表示在元素的后面水平和垂直平鋪圖像；【橫向重復(fù)】和【縱向重復(fù)】分別表示顯示圖像的

12、水平帶區(qū)和垂直帶區(qū)，圖像被剪輯以適合元素的邊界。 【附件】：設(shè)置背景圖像是固定在它的原始位置還是隨內(nèi)容一起滾動(dòng)。 【水平位置】和【垂直位置】：指定背景圖像相對(duì)于元素的初始位置，這可以用于將背景圖像與頁(yè)面中心垂直和水平對(duì)齊，如果附件屬性為【固定】，則位置相對(duì)于【文檔】窗口而不是元素。,8.2.3 設(shè)置CSS樣式的區(qū)塊,在【分類】列表框中選擇【區(qū)塊】選項(xiàng)，區(qū)塊屬性可以定義區(qū)塊內(nèi)字體的間距和對(duì)齊設(shè)置。 在CSS【區(qū)塊】選項(xiàng)中可以進(jìn)行如下設(shè)置。 【單詞間距】：設(shè)置單詞的間距，若要設(shè)置特定的值，在下拉列表框中選擇【值】，或輸入一個(gè)數(shù)值，在第二個(gè)下拉列表中，選擇度量單位。 【字母間距】：增加或減小字母或字

13、符的間距，若要減少字符間距，指定一個(gè)負(fù)值。 【垂直對(duì)齊】：指定所選元素的垂直對(duì)齊方式，僅當(dāng)應(yīng)用于標(biāo)簽時(shí)，Dreamweaver 8才在文檔窗口中顯示該屬性。 【文本對(duì)齊】：設(shè)置元素中的文本對(duì)齊方式。 【文本縮進(jìn)】：指定第一行文本縮進(jìn)的程度，可以使用負(fù)值創(chuàng)建凸出，但其縮進(jìn)顯示取決于瀏覽器，僅當(dāng)標(biāo)簽應(yīng)用于塊級(jí)元素時(shí)，Dreamweaver 8才在文檔窗口中顯示該屬性。 【空格】：確定如何處理元素中的空白，從三個(gè)選項(xiàng)中選擇?！菊！勘硎臼湛s空白；【保留】表示元素的處理方式與文本被括在pre標(biāo)簽中一樣(即保留所有空白，包括空格、制表符和回車符)?！静粨Q行】表示僅當(dāng)遇到br標(biāo)簽時(shí)文本才換行，Dreamw

14、eaver不在文檔窗口中顯示該屬性。 【顯示】：指定是否以及如何顯示元素。,8.2.4 設(shè)置CSS樣式的方框,在【分類】列表框中選擇【方框】選項(xiàng)，方框?qū)傩钥蓪?duì)控制元素在頁(yè)面放置方式的標(biāo)簽和屬性進(jìn)行設(shè)置。 在CSS【方框】選項(xiàng)中可以進(jìn)行如下設(shè)置。 【寬和高】：設(shè)置元素的寬度和高度。 【浮動(dòng)】：設(shè)置未選擇的元素在哪個(gè)邊圍繞已選元素浮動(dòng)。 【清除】：定義不允許層的邊。如果清除邊上出現(xiàn)層，則帶清除設(shè)置的元素移到該層的下方。 【填充】：指定元素內(nèi)容與元素邊框(如果沒有邊框，則為邊距)之間的間距，取消選擇【全部相同】選項(xiàng)可設(shè)置元素各個(gè)邊的填充；【全部相同】則將相同的填充屬性設(shè)置應(yīng)用到元素的上、下、左或右側(cè)

15、。 【邊界】：指定一個(gè)元素的邊框(如果沒有邊框，則為填充)與另一個(gè)元素之間的間距。僅當(dāng)應(yīng)用于塊級(jí)元素(段落、標(biāo)題、列表等)時(shí)，Dreamweaver 8才在【文檔】窗口中顯示該屬性，取消選擇【全部相同】可設(shè)置元素各個(gè)邊的邊距；【全部相同】將相同的邊距屬性設(shè)置應(yīng)用到元素的上、下、左或右側(cè)。,8.2.5 設(shè)置CSS樣式的邊框,在【分類】列表框中選擇【邊框】選項(xiàng)，邊框?qū)傩钥梢远x元素周圍邊框的設(shè)置。 在CSS【邊框】選項(xiàng)中可以進(jìn)行如下設(shè)置。 【樣式】：設(shè)置邊框的樣式外觀，樣式的顯示方式取決于瀏覽器，Dreamweaver 8在【文檔】窗口中將所有樣式呈現(xiàn)為實(shí)線，取消選擇【全部相同】可設(shè)置元素各個(gè)邊的

16、邊框樣式。 【全部相同】：將相同的邊框樣式屬性設(shè)置應(yīng)用到元素的上、下、左或右側(cè)。 【寬度】：設(shè)置元素邊框的粗細(xì)，取消選擇【全部相同】可設(shè)置元素各個(gè)邊的邊框?qū)挾取?【全部相同】：將相同的邊框?qū)挾仍O(shè)置應(yīng)用到元素的上、下、左或右側(cè)。 【顏色】：設(shè)置邊框的顏色，可以分別設(shè)置每個(gè)邊的顏色，取消選擇【全部相同】可設(shè)置元素各個(gè)邊的邊框顏色。 【全部相同】：將相同的邊框顏色設(shè)置應(yīng)用到元素的上、下、左或右側(cè)。,8.2.6 設(shè)置CSS樣式的列表,在【分類】列表框中選擇【列表】選項(xiàng)，列表屬性為列表標(biāo)簽定義列表設(shè)置，如圖8.25所示。 在CSS【列表】中可以進(jìn)行如下設(shè)置。 【類型】：設(shè)置項(xiàng)目符號(hào)或編號(hào)的外觀類型。 【

17、項(xiàng)目符號(hào)圖像】：可以為項(xiàng)目符號(hào)指定自定義圖像。 【位置】：設(shè)置列表項(xiàng)文本是否換行和縮進(jìn)(外部)以及文本是否換行到左邊距(內(nèi)部)。,8.2.7 設(shè)置CSS樣式的定位,在【分類】列表框中選擇【定位】選項(xiàng),在CSS【定位】中可以進(jìn)行如下設(shè)置。 【類型】：確定瀏覽器應(yīng)如何來(lái)定位層，包含如下選項(xiàng)。 【絕對(duì)】：使用【定位】框中輸入的坐標(biāo)(相對(duì)于頁(yè)面左上角)來(lái)定位層。 【相對(duì)】：使用【定位】框中輸入的坐標(biāo)來(lái)定位層。 【靜態(tài)】：將層放在它在文本中的位置。 【顯示】：確定層的初始顯示條件。如果不指定層的可見性屬性，則默認(rèn)情況下大多數(shù)瀏覽器都繼承父級(jí)的值，選擇以下可見性選項(xiàng)之一。 【繼承】：繼承層父級(jí)的可見性屬性

18、，如果層沒有父級(jí)，則它將是可見的。 【可見】：顯示該層的內(nèi)容，而不管父級(jí)的值是什么。 【隱藏】：隱藏這些層的內(nèi)容，而不管父級(jí)的值是什么。 【Z軸】：確定層的堆疊順序，編號(hào)較高的層顯示在編號(hào)較低的層的上面。 【溢出】(僅限于CSS層)：確定在層的內(nèi)容超出它的大小時(shí)將發(fā)生的情況，這些屬性控制如何處理此溢出，如下所示。 【可見】：增加層的大小，使它的所有內(nèi)容均可見，層向右下方擴(kuò)展。 【隱藏】：保持層的大小并剪輯任何溢出的內(nèi)容，不提供任何滾動(dòng)條。 【滾動(dòng)】：在層中添加滾動(dòng)條，不論內(nèi)容是否溢出。專門提供滾動(dòng)條可避免滾動(dòng)條在動(dòng)態(tài)環(huán)境中出現(xiàn)和消失所引起的混亂。 【自動(dòng)】：使?jié)L動(dòng)條僅在層的內(nèi)容溢出它的邊界時(shí)才出現(xiàn)。 【置入】：指定層的位置和大小，如果層的內(nèi)容溢出指定的大小，則大小值被覆蓋。 【裁切】：定義層的可見部分，如果指定了剪輯區(qū)域