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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
