第十八節 CSS樣式

css

css即Cascading Stylesheets，是用於彌補編寫網頁的html語言的很多不足，使網頁格式更容易得到控制。幾乎每個網頁都要用到css。 本節主要講css在Dreamweaver中的應用，至於css的細節，請查閱相關的css資料。

點擊Launcher面板左起第四個表徵圖，或點擊功能表列的Window/CSS Style，也可直接使用快速鍵F7，即彈出css樣式面板。

(css樣式面板)
點擊css樣式面板右下方的 表徵圖，也彈出建立樣式對話方塊。

(建立css樣式對話方塊) 從建立樣式對話方塊上可看到，用Dreamweaver在頁面內定義css有三種方式——Make Custom Style (class)、Redefine HTML Tag和Use CSS Selector。
Make Custom Style (class)是將css樣式應用於選定的地區，若要在整個頁面的相關地區應用css樣式，則需選擇Redefine HTML Tag和Use CSS Selector方式。
Make Custom Style (class)比較類似於html樣式的設定，用Make Custom Style定義的css樣式的使用也比較類似於html樣式。
Redefine HTML Tag，是將頁面源檔案中的html標記重定義。用Redefine HTML Tag定義的css樣式設定完畢後，該css樣式馬上生效。
Use CSS Selector，是將此時的css樣式用於特定的html標記組合或ID名。你可從Selector後的下拉選框裡選擇，選框裡有四個選項——a:active、a:hover、a:link和a:visited，分別代表超級連結的啟用狀態、滑鼠移動到超級連結上的狀態、超級連結的連結狀態和超級連結訪問過的狀態。你也可直接在選框裡填入一些html標記組合。例如填入td p，則這個css樣式將用於網頁上所有td標記內p標記的作用範圍。你還可填入以符號#開頭的ID名，例如可填入#abc，則這個css樣式將用於網頁上所有帶有ID=”abc”的html標記的作用範圍。

不管選擇了哪一種，點擊OK按鈕，彈出css樣式設定對話方塊。

(css樣式設定對話方塊)

這個對話方塊分為八種模式。點擊左側可選取。對話方塊上前面有符號 * 的項，表示其效果在Dreamweaver視窗中顯示不出來，要查看效果需用瀏覽器預覽。
Type模式主要是對文字屬性的設定。
Background模式是對背景屬性的設定。
Block模式，即區模式，是對某地區內文本的各種空隙大小的設定。
Box模式是容器設定模式。
Border模式即是設定容器邊框的屬性。Border，或叫邊框，也是容器的一個組成部分。微軟的Internet Explore不支援邊框屬性。
List模式是設定列表的屬性。
Positioning模式Positioning即定位，是利用css將頁面元素精確、方便的放置到網頁頁面中。Extentions模式是css的一些擴充。其中Page Break和頁面列印有關。Cursor是滑鼠移動到定義的頁面元素上時，滑鼠顯示的效果。Filter是css濾鏡效果。

設定完成後，用Redefine HTML Tag和Use CSS Selector方式建立的css樣式馬上生效，用Make Custom Style (class)建立的樣式要添加後才會生效，設定方法類似於html樣式的設定方法。


接下來介紹一下使用外部的css檔案。 外部的css檔案，即是將css樣式定義在一個外部的檔案，而不是定義在分頁檔內，這樣可是很多網頁公用同樣的樣式。建議大家使用css樣式時，最好用連結外部css檔案的方法，這樣能做到網站的風格統一和便於更新。
要製作一個新的外部css檔案，點擊css面板上的表徵圖，彈出編輯css對話方塊。

(css樣式編輯對話方塊)

點擊編輯css對話方塊上的Link按鈕，即彈出引入外部css檔案的對話方塊。選擇一個外部css檔案即可。


最後是一個簡單的例子。這個css設定很常用。我們要達到這樣的效果，使文字大小為9磅，去掉超級連結的底線，當滑鼠移到超級連結時顯示底線。

先通過樣式固定文字為最常用的9磅大小。點擊建立樣式按鈕，在彈出的對話方塊上選擇中間的一項，在下拉選框中選擇p。點擊OK按鈕，彈出css屬性設定對話方塊。 Size是字型大小，在後面選擇9，單位選擇為points，這樣就設定字型為9磅。 設定完成後點擊OK按鈕。 好，現在頁面的文字達到了我們要求的效果。 以上是針對p標記的，然後對td、input、li、select等標記重複以上操作。
接下來將去掉超級連結的底線，並改變其顏色。 點擊建立樣式按鈕，在彈出的對話方塊上選擇中間的一項，在下拉選框中選擇a。點擊OK按鈕，彈出css屬性設定對話方塊。 在decoration後選擇none。 再設定一下顏色。 然後點擊OK按鈕。 這時，頁面上的超級連結變成了我們需要的效果。
最後，可以通過設定，使當滑鼠移過超級連結時，顯示底線。 點擊建立樣式按鈕，在彈出的對話方塊上選擇下面的一項，在下拉選框中選擇a:hover。點擊OK按鈕，彈出css屬性設定對話方塊。 在decoration後選擇under-line。 再設定一下顏色。 然後點擊OK按鈕。 按下F12鍵預覽這個頁面，移動滑鼠到超級連結之上，即顯示出底線。