第二節 CSS樣式

一、“類”樣式的定義與使用

Dreamweaver制作網頁給定字號并不像Word那么簡單，需要先定義一個樣式，然后應用這個樣式才能給定文字的大小。先到設計窗口（圖2-14），打開CSS樣式窗口（圖2-15），點擊右下角“”出現新建CSS規則窗口，如圖2-16所示。

在“選擇器類型”中選擇“類”，自己起一個選擇器名稱，如“.zw”，其實就是樣式名稱，注意前面一定要加一個點“.”。規則定義里選“僅限該文檔”，如圖2-16所示。

下面可以給“.zw”這個類定義字體、字體大小和顏色，如圖2-17所示。

全部樣式設計完成后，找到下方的“類”選擇你定義的類，字體和字體的大小就變了，如圖2-18所示。

這時候你可以回來看一下代碼區，如圖2-19所示。

在<p>標簽中，加了一個class="zw"，這個就是你所引用的zw這個類的樣式。

<p class="zw">第一個網頁</p>
而在頭部分多了一個樣式表：
<style type="text/css">
.zw {
    font-size: 16px;
}
</style>

這個樣式表括在<style type="text/css">、</style>之間。

“.zw{……}”定義了“.zw”這類標簽的樣式。

前面的“.”代表“類”，除了類還有一種選擇器叫“id”，用“#”表示。

大括號之間的{……}是類的定義。

font-family: "宋體";

font-size: 16px;

color: #F00;

這三句話定義的是這類的標簽版式：字體為“宋體”、字大小為16px、字的顏色是#F00（紅色）。

你也可以直接在HTML代碼的狀態直接修改HTML代碼來修改你所定義的樣式。