經(jīng)過前面三課的學(xué)習(xí)，我們已經(jīng)在留言板站點創(chuàng)建兩個頁面了，一個是說明頁面（shuoming.htm），一個是主頁面（main.asp）。下面我們首先挑毛病，挑一挑兩個頁面的創(chuàng)建過程和創(chuàng)建結(jié)果的毛病。
1、在瀏覽器中打開這兩個頁面，然后執(zhí)行瀏覽器中的“查看/文字大小/最大”命令。咣當(dāng)！字大了，段落也亂了！怎么這個效果??！
2、在頁面的編輯過程中，每次按Enter（回車）鍵是一個新段落的開始，但段落間的距離怎么那么大??？也找不到控制距離的命令。：（
3、仔細(xì)再看一看頁面效果，怎么超級鏈接的文字下面都有一個下畫線啊？這多不好看啊，能不能去掉呢？
4、我想文字段落前空兩個漢字的位置，每次都要按空格鍵設(shè)置，能不能在新段落前自動前空兩格？
5、我想表格線更細(xì)一些，可在屬性面板里面好象完成不了這個目的？
……………………
我們還可以找到很多毛病和不如意的地方，怎么解決？哈哈，今天就讓一個重量級選手出場吧，它叫CSS層疊式樣式表。它可是設(shè)計網(wǎng)頁的重要技術(shù)，有了它，我們剛才找到的那些問題就馬上可以解決掉。
一、關(guān)于CSS樣式表
層疊樣式表（CSS）是一系列格式規(guī)則，它們控制網(wǎng)頁內(nèi)容的外觀。使用CSS樣式可以非常靈活并更好地控制確切的網(wǎng)頁外觀，從精確的布局定位到特定的字體和樣式。
CSS樣式使您可以控制許多僅使用HTML無法控制的屬性。例如，可以指定自定義列表項目符號并指定不同的字體大小和單位（像素、點數(shù)等等）。通過使用CSS樣式和以像素為單位設(shè)置字體大小，可以確保以更一致的方式在多個瀏覽器中處理頁面布局和外觀。除了設(shè)置文本格式外，還可以控制網(wǎng)頁中塊級別元素的格式和定位。例如，可以設(shè)置邊距、邊框、其他文本周圍的浮動文本等等。
CSS樣式表的主要優(yōu)點是提供便利的更新功能；更新CSS樣式時，使用該樣式的所有文檔的格式都自動更新為新樣式。
在Dreamweaver MX中主要通過“CSS樣式面板”創(chuàng)建CSS樣式、查看CSS樣式的屬性以及將CSS樣式應(yīng)用于文檔中的元素。選擇執(zhí)行“窗口/CSS樣式”命令可以打開“CSS樣式面板”，如圖1所示。
CSS樣式面板中有兩種視圖，一個是應(yīng)用樣式視圖，另一個是編輯樣式試圖，如圖1和圖2所示。
●應(yīng)用樣式視圖：在這個視圖下可以選擇應(yīng)用于文檔元素的類（class）樣式。“應(yīng)用樣式”視圖只顯示自定義（class）樣式。該窗格中不顯示重定義的HTML樣式和選擇器樣式。
●編輯樣式視圖：在這個視圖下可以查看與當(dāng)前文檔關(guān)聯(lián)的樣式定義。“編輯樣式”視圖顯示自定義（class）CSS樣式、重定義的HTML標(biāo)簽和CSS選擇器樣式的樣式定義。
圖1 CSS樣式面板
圖2 CSS樣式面板——編輯樣式面板
二、在網(wǎng)頁文檔內(nèi)部定義和引用CSS樣式
在Dreamweaver MX中打開留言板站點的說明文件（shuoming.htm），我們在這個頁面文檔內(nèi)部定義和引用CSS樣式。
▲重定義html標(biāo)簽body的屬性樣式
1、打開CSS樣式面板，選擇編輯樣式面板視圖。
2、單擊面板右下角的新建CSS樣式按鈕，會彈出一個新建樣式對話框，如圖3所示。請按照圖3所示進(jìn)行設(shè)置。
圖3 新建CSS樣式對話框——重定義body屬性
3、設(shè)置完成以后，單擊確定按鈕，進(jìn)入body標(biāo)簽的屬性設(shè)置對話框中，如圖4所示。
圖4 body屬性樣式設(shè)置——類型屬性
▲重新定義文本超級鏈接屬性樣式
1、打開CSS樣式面板，選擇編輯樣式面板視圖。
2、單擊面板右下角的新建CSS樣式按鈕，會彈出一個新建樣式對話框，如圖5所示。請按照圖5所示進(jìn)行設(shè)置。
圖5 新建CSS樣式——重新定義超級鏈接屬性
3、設(shè)置完成以后，單擊確定按鈕，進(jìn)入a:link的屬性設(shè)置對話框中，如圖6所示。只設(shè)置“修飾”和“顏色”，其它不設(shè)置。
圖6 a:link的類型屬性樣式設(shè)置
4、重復(fù)步驟2、步驟3，分別再重新定義a:visited和a:hover的屬性樣式。和前面重新定義a:link唯一的不同是文字顏色的設(shè)置，分別設(shè)置成灰色和紅色，其他的設(shè)置都一樣。
●a:link 超級鏈接文字的正常外觀屬性。
a:visited 超級鏈接文字訪問過以后的外觀屬性
a:hover 當(dāng)鼠標(biāo)經(jīng)過超級鏈接文字時的外觀屬性
●經(jīng)過前面對body和a標(biāo)簽的屬性重新定義以后，定義的CSS樣式會自動套用到頁面的元素上。這是最終的頁面效果：shuoming_css.htm
三、定義和附加外部樣式表
上面我們是在文檔內(nèi)部重新定義了一些html標(biāo)簽的屬性樣式，定義的CSS樣式只對本文檔起作用，如果換了一個新文檔，又要重復(fù)上面的操作，這樣也太麻煩了！實際上，對于一個站點，站點內(nèi)的頁面大多要求一致的外觀和效果，如果我們針對一個站點定義一次CSS樣式，然后把定義的結(jié)果套用到整個站點的頁面文檔，那么我們設(shè)計網(wǎng)站和管理網(wǎng)站的效率就大大提高了。Dreamweaver MX的外部樣式表就是用來實現(xiàn)這個目的的。
讓我們開始外部樣式表的應(yīng)用吧，先在Dreamweaver MX中打開留言板站點的主頁面文檔（main.htm），我們要以這個文檔為實例完成我們的學(xué)習(xí)。
▲定義外部CSS樣式表文件
1、打開CSS樣式面板，單擊右下角的新建樣式按鈕 ，則彈出新建樣式對話框，如圖7所示。請按照圖7進(jìn)行設(shè)置。
圖7 新建CSS樣式——外部樣式文件
2、完成圖7的設(shè)置后，單擊確定按鈕，則彈出保存外部樣式表對話框，如圖8所示。請按照圖8所示進(jìn)行設(shè)置和操作。
圖8 保存外部樣式表對話框
3、完成圖8的設(shè)置并單擊保存按鈕后，會彈出body的CSS樣式定義對話框，如圖4所示，請按照圖4進(jìn)行設(shè)置。
▲在這個外部CSS樣式表文件中繼續(xù)定義CSS樣式
1、單擊右下角的新建樣式按鈕 ，則彈出新建樣式對話框，如圖9所示。請按照圖9進(jìn)行設(shè)置。
圖9 新建CSS樣式——td的屬性樣式
2、單擊確定按鈕以后，就彈出td的CSS樣式定義對話框，它的設(shè)置和body的設(shè)置一樣。也可參看圖4。
3、重復(fù)步驟1、步驟2，在這個外部CSS樣式表中繼續(xù)定義a:link 、a:visited 、a:hover的屬性樣式。
4、重定義p標(biāo)簽的“盒子”屬性樣式可以設(shè)置段落間距，如圖10所示。
圖10 p標(biāo)簽的盒子屬性樣式
圖11 外部CSS樣式表
△定義的外部CSS樣式表最終結(jié)果如圖11所示。
▲附加外部樣式表
上面我們建立了一個外部CSS樣式表文件（*.css），這個外部CSS樣式文件自動附加到定義它的頁面文檔中了。但站點中的其它頁面文檔如果想使用這個外部CSS樣式表中的樣式，就必須先附加它。具體步驟如下：
1、打開站點中的另一個頁面文檔。
2、打開CSS樣式面板，單擊面板右下角的“附加外部樣式表”按鈕 ，馬上會彈出一個“鏈接外部CSS樣式表”對話框，如圖12所示。
圖12 鏈接外部樣式表
3、在圖12所示的鏈接外部樣式表中瀏覽找到要附加的CSS樣式表文件以后，單擊“確定”按鈕就完成了將一個外部CSS樣式表附加到頁面文檔的操作，我們在CSS樣式表面板的編輯視圖下就可以看到附加的樣式表，如圖11所示。
▲利用CSS樣式表模板創(chuàng)建外部CSS樣式表
除了在CSS樣式面板中創(chuàng)建外部CSS樣式表以外，我們還經(jīng)常利用CSS樣式表模板創(chuàng)建外部CSS樣式表。步驟如下：
1、執(zhí)行“文件/新建”命令，會彈出一個新建頁面文檔對話框，如圖13所示。
圖13 利用CSS模板創(chuàng)建外部CSS樣式表
2、按照圖13所示操作以后，我們就選擇了一個包含body、th、td、h1、h2、h3、h4、h5、h6、a等html標(biāo)簽的屬性樣式的CSS樣式表模板，如圖14是代碼視圖下CSS樣式表模板的部分內(nèi)容。
圖14 代碼視圖下CSS樣式表模板的內(nèi)容
3、我們可以直接在CSS樣式表模板的代碼視圖下直接對它的內(nèi)容進(jìn)行編輯，也可以把它附加到某一個頁面文檔以后再在CSS樣式面板的編輯視圖下對它進(jìn)行編輯。
4、CSS樣式表模板中的h1、h2、……、h6這些屬性樣式對應(yīng)在屬性面板中的格式操作如圖15所示。當(dāng)我們選擇屬性面板格式中的標(biāo)題1、標(biāo)題2、……、標(biāo)題6時，實際上光標(biāo)所在的文檔段落就應(yīng)用了這些屬性樣式了。
圖15 屬性面板中段落格式設(shè)置
四、教程副頁
▲特定CSS樣式設(shè)置信息參考
