107dreamweaver8中文版應(yīng)用教程書代號

Dreamweaver

8中文版應(yīng)用教程第11章

層疊樣式表重點(diǎn)內(nèi)容：CSS樣式的創(chuàng)建、編輯與導(dǎo)出應(yīng)用類樣式設(shè)置CSS樣式屬性CSS樣式的優(yōu)先順序一、層疊樣式表概述1.什么是CSSCSS英文全稱CascadingStyleSheets，中文全稱為層疊樣式表，更多的人把它稱之為樣式表，以下簡稱為CSS樣式。2.CSS的作用?兼容性極好，幾乎所有的瀏覽器上都可以使用。?以前一些必須通過圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn)。?使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。?可以輕松地控制頁面的布局，實(shí)現(xiàn)網(wǎng)頁中的各種元素的準(zhǔn)確定位。?可以將許多網(wǎng)頁的風(fēng)格格式同時(shí)更新，不用再一頁一頁地更新了。?使用CSS樣式可以控制許多使用HTML無法控制的屬性。?除了設(shè)置文本格式外，還可以控制網(wǎng)頁中塊級別元素的格式和定位。例如，可以設(shè)置邊距、邊框及其他文本周圍的浮動文本等。一、層疊樣式表概述3.CSS的特點(diǎn)?減少圖形文件的使用?集中管理樣式信息?共享樣式設(shè)置?將樣式分類使用4.CSS的語法規(guī)則在Dreamweaver中查看CSS的語法，單擊Document工具欄中的Code按鈕，切換到代碼視圖模式。在代碼視圖模式中辨別CSS語法，最簡單的方法就是從head中尋找

style標(biāo)識符，凡是包含在<style></style>標(biāo)識符之間的部分，就是定義的CSS樣式。二、CSS樣式的創(chuàng)建、編輯與導(dǎo)出1.認(rèn)識“CSS樣式”面板默認(rèn)狀態(tài)下選擇的是“正在”模式，在該模式下，“CSS樣式”面板顯示3個(gè)窗格。如果單擊“CSS樣式”面板中的“全部”模式，則會在列表框中顯示出當(dāng)前文檔中所包含的CSS樣式。二、CSS樣式的創(chuàng)建、編輯與導(dǎo)出2.創(chuàng)建CSS樣式Dreamweaver雖然可以根據(jù)用戶的一系列操作，自動生成CSS樣式，但是生成的樣式不及用戶根據(jù)自己的要求定義的CSS樣式符合需要。如果要自定義CSS樣式，單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。在打開的“設(shè)置CSS規(guī)則”對話框中設(shè)置CSS樣式的類型、名稱和使用范

圍，設(shè)置完畢后單擊“確定”按鈕，可打開“保存樣式表文件為”對話框。將樣式以文件的形式保存到站點(diǎn)中后，單擊“保存”按鈕，會打開“.unnamed1的CSS樣式定義（在X.css中）”對話框（.unnamed1為樣式名稱，X.css為樣式文件名稱且其擴(kuò)展名為css），在該對話框中可設(shè)置樣式的各種屬性，設(shè)置完畢后單擊“確定”按鈕。二、CSS樣式的創(chuàng)建、編輯與導(dǎo)出3.管理CSS樣式通過使用“CSS樣式”面板，可以管理Dreamweaver中的樣式，如鏈接或?qū)С鐾獠繕邮奖?、新建CSS樣式、編輯CSS樣式，或者對所選

CSS樣式進(jìn)行重命名、復(fù)制或刪除等。在“CSS樣式”面板的“全部”模式下右擊“所有規(guī)則”窗格中的任意一個(gè)樣式，彈出如圖所示的快捷菜單，應(yīng)用該菜單中的命令可以對Dreamwe－aver中的樣式進(jìn)行管理。4.編輯CSS規(guī)則選擇“窗口”|“CSS樣式”命令，打開“CSS樣式”面板，選擇“正在”模式，將插入點(diǎn)置于要編輯CSS規(guī)則的文本中，使用“CSS樣式”面板中的“屬性”窗格編輯規(guī)則。二、CSS樣式的創(chuàng)建、編輯與導(dǎo)出5.編輯CSS樣式表若要編輯CSS樣式表，應(yīng)選擇

“CSS樣式”面板中的“所有”模式，雙擊“所有規(guī)則”窗格中要編輯的樣式表的名稱，在文檔中打開CSS文

件，根據(jù)需要更改CSS樣式規(guī)則編

輯規(guī)則后單擊“確定”按鈕。在“文檔”窗口中，根據(jù)需要修改樣式表，然后保存樣式表。6.鏈接到或?qū)胪獠繕邮奖砭庉嬐獠緾SS樣式表時(shí)，鏈接到該CSS樣式表的所有文檔將全部更新，以反映所做的編輯。無論是鏈接還是導(dǎo)入外部樣式表，都需要應(yīng)用“鏈接外部樣式表”對話框。二、CSS樣式的創(chuàng)建、編輯與導(dǎo)出7.設(shè)計(jì)時(shí)間樣式表設(shè)計(jì)時(shí)間樣式表允許用戶在處理Dreamweaver文檔時(shí)可以顯示或隱藏CSS樣式表所應(yīng)用的設(shè)計(jì)。例如，可以使用此選項(xiàng)在設(shè)計(jì)頁面時(shí)包括或排除只限于Macintosh或只限于Windows的樣式表。若要在設(shè)計(jì)時(shí)顯示或隱藏CSS樣式表，應(yīng)打開如圖所示的“設(shè)計(jì)時(shí)間樣式表”對話框。在該對話框中，設(shè)置顯示或隱藏所選樣式表的選項(xiàng)后，單擊“確定”按鈕。三、應(yīng)用類樣式1.應(yīng)用自定義的CSS樣式可以將CSS樣式應(yīng)用于段落、特定文本或標(biāo)簽。?切換至“CSS樣式”面板的“全部”模式，右擊“所有規(guī)則”窗格中要應(yīng)用的樣式，從彈出的快捷菜單中選擇“套用”命令。?單擊“CSS樣式”面板中右上角的圖標(biāo)，然后從彈出的下拉菜單中選擇“套用”命令。?從文本屬性面板“樣式”下拉列表框中選擇要應(yīng)用的類樣式。?在文檔窗口中右擊所選文本，從彈出的快捷菜單的“CSS樣式”級聯(lián)菜單中選擇要應(yīng)用的樣式。?選擇“文本”|“CSS樣式”命令，從級聯(lián)菜單中選擇要應(yīng)用的樣式。2.刪除自定義的CSS樣式從文本屬性面板“樣式”下拉列表框中選擇“無”選項(xiàng)，可刪除使用的CSS樣式四、設(shè)置CSS樣式屬性“類型”選項(xiàng)在“CSS樣式”面板中選擇所需樣式，然后單擊面板右下角的“編輯樣式”按鈕，或者雙擊該樣式，都會打開CSS規(guī)則定義對話框。選擇“分類”列表框中的“類型”選項(xiàng)，在對話框的右側(cè)顯示出“類型”分類中包含的所有選項(xiàng)?！氨尘啊边x項(xiàng)在樣式的CSS樣式定義對話框中選擇“分類”列表框中的“背景”選項(xiàng)，在對話框右側(cè)顯示出“背景”包含的所有選項(xiàng)。四、設(shè)置CSS樣式屬性3.“區(qū)塊”選項(xiàng)在樣式的CSS樣式定義對話框中選擇“分類”列表框中的“區(qū)塊”

選項(xiàng)，在對話框右側(cè)顯示出“區(qū)塊”包含的所有選項(xiàng)。設(shè)置效果如圖。4.“方框”選項(xiàng)在樣式的CSS樣式定義對話框中選擇“分類”列表框中的“方框”選項(xiàng)，在對話框右側(cè)顯示出“方框”包含的所有選項(xiàng)。設(shè)置效果如圖。四、設(shè)置CSS樣式屬性“邊框”選項(xiàng)在樣式的CSS樣式定義對話框中選擇“分類”列表框中的“邊框”選項(xiàng)，在對話框右側(cè)顯示出“邊框”包含的所

有選項(xiàng)?！傲斜怼边x項(xiàng)在樣式的CSS樣式定義對話框中選擇“分類”列表框中的“列表”選項(xiàng)，在對話框右側(cè)顯示出“列表”包含的所

有選項(xiàng)。設(shè)置效果如圖。四、設(shè)置CSS樣式屬性“定位”選項(xiàng)在樣式的CSS樣式定義對話框中選擇“分類”列表框中的“定位”選項(xiàng)，在對話框右側(cè)顯示出“定位”包含的所

有選項(xiàng)?！皵U(kuò)展”選項(xiàng)在樣式的CSS樣式定義對話框中選擇“分類”列表框中的“擴(kuò)展”選項(xiàng)，在對話框右側(cè)顯示出“擴(kuò)展”包含的所有選項(xiàng)。設(shè)置當(dāng)鼠標(biāo)指針至“幫助”字樣上時(shí)，指針變?yōu)閹柼柕男问叫Ч鐖D。五、CSS樣式的優(yōu)先順序當(dāng)將兩個(gè)或更多的樣式應(yīng)用于同一文本時(shí)，這些樣式可能發(fā)生沖突并產(chǎn)生意外的結(jié)果。瀏覽器根據(jù)以下規(guī)則應(yīng)用樣式屬性。如果將兩種樣式應(yīng)用于同一文本，瀏覽器顯示這兩種樣式的所有屬性，除非特定的屬性發(fā)生沖突。例如，一種樣式可能將藍(lán)色指定為文本顏色，而另一種樣式可能指定紅色作為文本顏色。如果應(yīng)用于同一文本的兩種樣式的屬性發(fā)生沖突，則瀏覽器顯示最里面的樣式（離文本本身最近的樣式）的屬性。因此，如果外部樣式表和內(nèi)聯(lián)CSS樣式同時(shí)影響文本元素，則內(nèi)聯(lián)樣式為其中所應(yīng)用的那一個(gè)。如果有直接沖