1. CSS Styles面板
通過前面幾章的學習，相信大家對CSS有了一定的了解，這一章我們來全面講解如何利用Dreamweaver4來創建及操作CSS。首先運行Dreamweaver4，啟動後，選擇菜單下的Windows->CSS Styles（或按Shitf+F11），系統彈出CSS Styles管理面板，如下圖所示：
在CSS Styles面板裡顯示了所有自定義的CSS樣式（也就是上面提到的以點開頭的類選擇符，Dreamweaver4把這樣以點開頭的類選擇符作為自定義樣式來使用），可以利用Apply按鈕這些CSS樣式隨意應用在頁面中的文本或文檔區域。
注意：應用按鈕前面有一個復選框，選中的時候按鈕成灰色不可用，表示自動應用，只要鼠標單擊自定的CSS樣式就會自動應用到頁面中當前元素；如果復選框沒有選中，Apply按鈕為可用，應用時需要點Apply按鈕。當對象應用了自定義樣式時，也就相當於在當前HTML標記後加上class=”...”。另外在樣式前有一個“S”型的符號
，表示內部定義樣式；如果是符號
，表示這個樣式鏈接到外部樣式表文件。
注意：CSS Styles面板只顯示自定義（class）CSS 樣式；重定義的HTML標記和其他CSS選擇符樣式不會出現在CSS Styles面板上，這是因為它們可以自動應用於那些HTML標記控制的區域。（重定義HTML標記是指選擇符為單個HTML標記的CSS樣式，之所以叫重定義是因為重新定義了並改變原來HTML標記的樣式。）
在右下角有4個小按鈕，這是最常用的幾個命令：
Attach Style Sheet：（鏈接到樣式表）點擊後會彈出一個選擇樣式表對話框，選中以前創建好的外部樣式表，點確定就鏈接加入了這個外部樣式表。加入外部樣式表時注意盡量使用相對路徑。
New Style：（新建樣式）一般我們通過這個按鈕來創建CSS樣式表。
Edit Style sheet：（編輯樣式表）點擊後會彈出編輯樣式表對話框，顯示了所有已存在的內部和外部樣式表，可以在這個對話框裡新建、編輯、刪除樣式。
Delete：（刪除樣式）先選中要刪除的自定義CSS樣式，然後點此按鈕，樣式就被刪除了。
點上面的小三角或點擊鼠標右鍵會彈出一個菜單，菜單的功能依次為：
Edit：（編輯）編輯你當前選中的自定義CSS樣式，點擊後就進入了編輯此項CSS類樣式的定義樣式對話框。
Duplicate：（復制）將當前選中的自定義CSS樣式類復制。
Delete：（刪除）刪除當前選中的自定義CSS樣式，和按鈕 的效果相同。
Apply：（應用）是指將選中的CSS類應用在頁面中當前元素。同Apply按鈕。
New Style：（新建樣式）等同於 按鈕。
Edit Style sheet：（編輯樣式表）等同於 按鈕。
Attach Style Sheet：（鏈接到外部樣式表）等同於 按鈕。
Export Style Sheet：（導出樣式表）將此頁面中的內部樣式表導出為一個外部樣式表文件。注意：Dreamweaver4導出樣式表除了用這個方法外，還可以用主菜單下的File->Export->Export CSS Styles導出。
2. 創建樣式表的類型
在創建樣式表之前我們首先介紹一下Dreamweaver4的三種樣式表類型，點擊CSS Styles面板中的 按鈕（或CSS Styles面板菜單New Style），彈出新建樣式對話框，如下圖：
在Define裡可以選擇是外部樣式表，還是內部樣式表：
l 選擇New Style Sheet File（新建樣式表文件），系統會先讓你保存這個樣式表文件，然後定義這個樣式表文件。整個頁面的樣式就會跟隨你建立的這個樣式表文件，然後你可以把這個外部樣式表文件鏈接到別的頁面去，這樣就可以使一個樣式表文件控制多個頁面了。
l 如果你選擇This Document Only（只存在這個文檔），你就建立了一個內部樣式表，Dreamweaver4會自動把你建立的樣式表內容放到<head>區的<style>標記裡。
在Type裡有三種樣式表類型可供選擇：
l Make Custon Style (class) ：（創建自定義樣式）自定義一個樣式，可以作為class屬性應用於頁面中。
l Redefine HTML Tag：（重定義HTML標記）對指定的 HTML 標記的默認格式進行重新定義。
l Use CSS Selector：（使用CSS選擇符）對特定的標簽組合，或者包含有指定ID屬性的所有標簽進行格式定義。
在定義CSS前，我們先要考慮清楚，定義的這個樣式將用在哪裡？要完成哪些效果？是定義在一個頁面裡還是控制多個頁面的風格？然後根據需求來定義合適的樣式表。
3. 創建自定義樣式
在頁面中，我們有時想讓一些重要的文字或內容醒目，我們就需要把這些重要的文字或內容單獨定義一個樣式，來區別一般文字，我們可以通過創建自定義樣式單獨對重要內容定義CSS來完成。假設，我們要求把重要文字和內容的顏色定義成紅色、並加粗來達到醒目的目的。
單擊新建樣式，彈出新建對話框，在新建樣式對話框裡，樣式表類型選Make Custon Style (class)，這裡我們建立內部樣式表，選This Document Only，然後在上面的Name下拉框裡輸入你定義的樣式名稱，我們輸入“.emphases”按OK，如下圖：
注意：自定義樣式的名稱可以自己隨意設定，一般根據其樣式效果命名。在名稱前必須有點號，如果漏寫，系統也會自動幫你補上。
彈出樣式定義對話框，在Category（類別）裡選Type，然後設置顏色為紅色，Weight為bold，按OK，如圖：
然後在CSS Styles面板裡多了一個名為emphases的自定義樣式，這樣一個新的樣式我們就定義好了：
我們來看一下原代碼部分，我們可以看到在<head>區多了下列樣式表代碼：
<style type="text/css">
<!--
.emphases { font-weight: bold; color: #FF0000}
-->
</style>
定義好了樣式，現在我們就可以把這個自定義樣式套用在需要的地方，在網頁中選中文字，然後單擊樣式面板中的emphases樣式。看看，是不是你要的效果。
注意：如果我們選中的內容是一個表格或一個段落，那麼整個表格或段落內的文字被定義了emphases樣式，從原代碼裡我們可以看出是在<TABLE>或<P>標記後面加了class=”emphases”參數，如：
<TABLE class=”emphases”>
……
或
<P class=”emphases”>
……
當我們把樣式加在選中的幾個文字上時，文字本身沒有HTML標記所包圍，就會自動加上<span>標記，例如：
……<span class=”emphases”>重點</span>……
注意：span標記本身沒有任何意義，它專門為樣式表指定選取范圍，為樣式表指定區域的還有div。
4. 創建重定義樣式表
重定義樣式表是對某個HTML標記重新定義格式。例如，我們想重新格式化頁面的段落，每個段落前空兩格，並設定段落文字的大小和行距。
單擊新建樣式，彈出新建對話框，在新建樣式對話框裡，樣式表類型選擇Redefine HTML Tag，我們仍然建立內部樣式表，選This Document Only。當樣式表類型選擇Redefine HTML Tag時，上面下拉框的名字Name變成了Tag，表示輸入的內容是HTML標記，點擊下拉按鈕，我們可以看到所有HTML標記都在Tag下拉框裡，這裡我們選段落標記P：
按OK後，進入樣式定義對話框，在Type裡，我們設定字體大小為12象素，行距為文字尺寸的150%，如下圖：
在Block部分裡，我們設定文本縮進，因為文字尺寸為12象素，所以兩個字的空格就是24象素：
按OK後，這個重定義樣式就完成了。這時頁面裡每個段落的文字大小都是12象素，行距是150%，但是在Dreamweaver編輯器裡我們看不到縮進的效果，不要緊，只要將文件保存，然後用浏覽器打開就可以看到效果了。此時CSS樣式表的原代碼是：
<style type="text/css">
<!--
.emphases { font-weight: bold; color: #FF0000}
p { font-size: 12px; line-height: 150%; text-indent: 24px}
-->
</style>
5. 創建動態鏈接樣式表
下面我們來創建一組鏈接在不同狀態下的樣式。單擊新建樣式，彈出新建對話框，在新建樣式對話框裡，樣式表類型選Use CSS Selector，我們仍然建立內部樣式表，選This Document Only。當樣式表類型選擇Use CSS Selector時，上面下拉框的名字變成了Selector，表示輸入內容為CSS選擇符，單擊下拉按鈕，可以看到動態鏈接的4種狀態：
a:active 選中超級鏈接狀態
a:hover 光標移上超級鏈接狀態
a:link 超級鏈接的正常狀態，沒有任何動作的時候
a:visited 訪問過的超級鏈接狀態
接下來我們對這幾種狀態分別設定，首先，選擇a:link，OK後彈出樣式定義對話框，我們設定無下劃線，顏色為橙色，如下圖：
我們用同樣的方法設定a:visited，設定無下劃線，黃色，如下圖：
接下來設定a:hover，有下劃線和上劃線，顏色為橙色，並在Background設定背景為黃色：
這裡我們不對a:active進行設置，根據層疊規則a:active的樣式會自動依照a:hover。這樣所有動態鏈接的效果我們就設置好了，注意設置時的順序。在浏覽器中就我們就可以看到：此頁面上未訪問的鏈接無下劃線，橙色；訪問後的鏈接無下劃線，黃色；鼠標指向鏈接時有上、下劃線，橙色，並背景為黃色。樣式表原代碼為：
<style type="text/css">
<!--
.emphases { font-weight: bold; color: #FF0000}
p { font-size: 12px; line-height: 150%; text-indent: 24px}
a:link { color: #FF9900; text-decoration: none}
a:visited { color: #FFFF00; text-decoration: none}
a:hover { color: #FF9900; text-decoration: underline overline; background-color: #FFFF00}
-->
</style>
這樣定義動態鏈接時，整個頁面的鏈接效果都會改變，如果我想在一個頁面中定義兩組以上的鏈接效果，該怎麼做呢？在第四章裡我們不是說過的類和偽類的混用可以在同一個頁面中做不同的鏈接效果嗎。點擊新建樣式，在選擇符下拉框裡，我們輸入a.link2:link（當然可以先選擇a:link，然後更改），如下圖：
這樣我們就新建立了一個.link2類，我們為a.link2:link設定樣式，紅色，有下劃線：
根據上面的方法我們繼續定義a.link2:visited和a.link2:hover，我們定義a.link2:visited為紅色有下劃線，a.link2:hover為紅色無下劃線，背景為白色。在CSS Styles面板裡多了一個名稱為link2的自定義樣式。然後將此樣式應用在某個動態鏈接上。保存後，用浏覽器打開，我們可以看到兩個完全不同的鏈接樣式。全部CSS代碼如下：
<style type="text/css">
<!--
.emphases { font-weight: bold; color: #FF0000}
p { font-size: 12px; line-height: 150%; text-indent: 24px}
a:link { color: #FF9900; text-decoration: none}
a:visited { color: #FFFF00; text-decoration: none}
a:hover { color: #FF9900; text-decoration: underline overline; background-color: #FFFF00}
a.link2:link { color: #FF0000; text-decoration: underline}
a.link2:visited { color: #FF0000; text-decoration: underline}
a.link2:hover { color: #FF0000; text-decoration: none; background-color: #FFFFFF}
-->
</style>
6. 其他樣式表的定義
我們還可以在Use CSS Selector裡輸入其他CSS選擇符：
ID選擇符，以“#”號開頭定義一個樣式，例如：“#id-style”，然後建立一個ID為id-style的ID樣式，ID樣式表必須手動在HTML標記後加id=”id-style”屬性。
含HTML標記的類選擇符，例如：“p.red”，表示定義段落為red類的樣式，此樣式只對有class=”red”屬性的段落有效果。
包含選擇符，是指前一個HTML標記裡包含著後一個HTML標記，例如：“div p”，表示定義在DIV裡包含段落的樣式。
7. 編輯、修改、刪除樣式表
點CSS Styles面板中的按鈕
會打開編輯樣式表對話框，如下圖：
按鈕功能介紹：
Link：鏈接外部樣式表，這裡可以選擇鏈入外部樣式表和導入外部樣式表兩種方式。
New：新建樣式。
Edit：選中一個樣式然後點Edit就可以進行編輯。
Duplicate：復制一個樣式，選中一個樣式後點Duplicate按鈕，彈出對話框，為復制的樣式起一個新的名稱，OK。
Remover：移除一個樣式或一個外部樣式表，選中要刪除的樣式點Remove按鈕，此樣式就被刪除了。
在Style definition（樣式定義）欄裡可以看到此樣式的內容。
8. 外部樣式表
建立外部樣式表和建立內部樣式表差不多，只是在新建的時候選擇(New Style Sheet File)，並保存為一個擴展名為.css的樣式表文件。
現在，我們把剛才實例中的樣式表導出，然後再鏈接到其他頁面。點擊CSS Style面板菜單中的Export Style Sheet，系統彈出導出樣式表對話框，我們將樣式表文件保存為mystyle.css。用記事本打開mystyle.css文件可以看到如下樣式表代碼：
.emphases { font-weight: bold; color: #FF0000}
p { font-size: 12px; line-height: 150%; text-indent: 24px}
a:link { color: #FF9900; text-decoration: none}
a:visited { color: #FFFF00; text-decoration: none}
a:hover { color: #FF9900; text-decoration: underline overline; background-color: #FFFF00}
a.link2:link { color: #FF0000; text-decoration: underline}
a.link2:visited { color: #FF0000; text-decoration: underline}
a.link2:hover { color: #FF0000; text-decoration: none; background-color: #FFFFFF}
然後轉到其他頁面中，點CSS Style面板中的鏈入外部樣式表按鈕 ，鏈入剛才導出的樣式表文件mystyle.css，此時這個樣式表已經應用到新的頁面中了。在新頁面的<head>區添加了下列代碼：
<link rel="stylesheet" href="mystyle.css" type="text/css">
此外，還可以導入外部樣式表，導入方法如下：
點擊編輯樣式表按鈕
，打開編輯樣式表對話框，點擊LINK按鈕，這時彈出”Link External Style Sheet”對話框，輸入外部樣式表的路徑，選擇Import（導入），確定。
可以看到在<head>區的代碼為：
<style type="text/css">
<!--
@import "mystyle.css";
-->
</style>
漢網天下：http://www.hanwangtx.com，版權所有，轉載請注明出處。