CSS教學(五)如何使用DW4建立CSS-css教學-PHP中文網

首頁

web前端

css教學

CSS教學(五)如何使用DW4建立CSS

巴扎黑

Apr 01, 2017 pm 02:03 PM

css 創建教學

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會自動把你建立的樣式表內容放到區的
在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的自訂樣式，這樣一個新的樣式我們就定義好了：

我們來看看原始程式碼部分，我們可以看到在區多了下列樣式表程式碼：

定義好了樣式，現在我們就可以把這個自訂樣式套用在需要的地方，在網頁中選取文字，然後按一下樣式面板中的emphases樣式。看看，是不是你要的效果。

注意：如果我們選取的內容是一個表格或一個段落，那麼整個表格或段落內的文字被定義了emphases樣式，從原始程式碼裡我們可以看出是在

或< ;P>標記後面加了class=”emphases」參數，如：

…

或

……

#當我們把樣式加在選取的幾個文字上時，文字本身沒有HTML標記所包圍，就會自動加上標記，例如：

……重點……
##注意：span標記本身沒有任何意義，它專門為樣式表指定選取範圍，為樣式表指定區域的還有p。

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樣式表的原始程式碼是：

######5. 建立動態連結樣式表######我們來建立一組連結在不同狀態下的樣式。點選新建樣式，彈出新建對話框，在新建樣式對話框裡，樣式表類型選取Use CSS Selector，我們仍然建立內部樣式表，選取This Document Only。當樣式表類型選擇Use CSS Selector時，上面下拉框的名字變成了Selector，表示輸入內容為CSS選擇符，點擊下拉按鈕，可以看到動態連結的4種狀態：######l a :active 選取超級連結狀態######l a:hover 遊標移上超級連結狀態######l a:link 超級連結的正常狀態，沒有任何動作的時候######l a:visited造訪過的超級連結狀態######接下來我們對這幾種狀態分別設定，首先，選擇a:link，OK後彈出樣式定義對話框，我們設定無底線，顏色為橘色，如下圖：######我們用同樣的方法設定a:visited，設定無底線，黃色，如下圖：######接下來設定a:hover，有下劃線和上劃線，顏色為橙色，並在Background設定背景為黃色：

這裡我們不對a:active進行設置，根據層疊規則a:active的樣式會自動依照a:hover。這樣所有動態連結的效果我們就設定好了，注意設定時的順序。在瀏覽器中就我們就可以看到：此頁面上未訪問的鏈接無下劃線，橙色；訪問後的鏈接無下劃線，黃色；鼠標指向鏈接時有上、下劃線，橙色，並背景為黃色。樣式表原程式碼為：

這樣定義動態連結時，整個頁面的連結效果都會改變，如果我想在一個頁面中定義兩組以上的連結效果，該怎麼做呢？在第四章裡我們不是說過的類和偽類的混用可以在同一個頁面中做不同的連結效果嗎。點選新建樣式，在選擇符下拉框裡，我們輸入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程式碼如下：

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標記，例如：“p p”，表示定義在p裡包含段落的樣式。

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，此時這個樣式表已經應用到新的頁面中了。在新頁面的區域中加入了下列程式碼：

#此外，還可以匯入外部樣式表，匯入方法如下：

點擊編輯樣式表按鈕，開啟編輯樣式表對話框，點擊LINK按鈕，這時彈出」Link External style Sheet」對話框，輸入外部樣式表的路徑，選擇Import（導入），確定。

可以看到在區的程式碼為：