Dreamweaver CC 2014如何新建CSS規(guī)則

新建CSS規(guī)則

要使用CSS樣式美化頁面，首先應(yīng)建立一個樣式，定義一個樣式之后，就可以在網(wǎng)頁中不同標

簽之間應(yīng)用。新建CSS規(guī)則的步驟如下。

【操作步驟】

第1步，啟動DreamweaverCC，新建文檔，保存為test.html,也可以打開現(xiàn)有網(wǎng)頁文檔。

第2步，把光標置于頁面需要插入結(jié)構(gòu)標簽的位置選擇“插入”丨“結(jié)構(gòu)”命令，從中選擇一個結(jié)構(gòu)標簽，如圖所示。

第3步，打開插入結(jié)構(gòu)標簽對話框，如插入Div標簽，則可以在“插入Div”對話框中設(shè)置<div>標簽插入點位置以及ID值和Class,如圖所示。

第4步，單擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框，如圖所示也可以利用該按鈕新建一個CSS規(guī)則，不僅僅為當(dāng)前插入的結(jié)構(gòu)標簽使用。

(1)“選擇器類型”下拉列表框：為CSS樣式選擇一種類型，主要包括以下選項。

1.類（可應(yīng)用于任何HTML標簽）：選擇該選項將定義一個新的類樣式，類樣式可以供任何 元素引用，也就是說任何標簽都可以應(yīng)用類樣式。類的名稱需要在“選擇器名稱”文本框 中輸入。類樣式必須以點開頭，如果沒有輸入點，則Dreamweaver將自動添加。類樣式是 可以被應(yīng)用于頁面中任何標簽的樣式類型。當(dāng)類樣式設(shè)置完畢后，就可以在“CSS樣式”面板中看到制作完成的樣式。在應(yīng)用時，首先在頁： 面中選中一個標簽，然后在“屬性”面板中通過“類樣式”來選擇要應(yīng)用的類樣式名稱，也可以在標i 簽中通過class屬性直接引用類樣式。

2.標簽（重新定義HTML元素）：選擇該選項可將現(xiàn)有的HTML標簽重新定義顯示樣式，因 此定義完標簽樣式后就不需要在網(wǎng)頁中指定要應(yīng)用樣式的元素對象，網(wǎng)頁中所有該標簽都 將自動顯示這個樣式。

3.ID (僅應(yīng)用于一個HTML元素）：選擇該選項，可以為網(wǎng)頁中特定的標簽定義樣式，即通 過標簽的ID編號來實現(xiàn)。選擇該選項后，在“選擇器名稱”文本框中輸入網(wǎng)頁中一個標簽 的ID值即可定義樣式。

ID樣式必須以#開頭，如果沒有輸入#，則Dreamweaver將自動添加。1D樣式原則上只供一個標： 簽使用，其他標簽不能使用，即使是相同名稱的標簽也不能夠重復(fù)使用ID樣式。

4.復(fù)合內(nèi)容（基于選擇的內(nèi)容）：選擇該選項，可以自定義復(fù)雜的選擇器，如偽選擇器、復(fù)： 合選擇器等。

(2)“選擇器名稱’’文本框：設(shè)置新建樣式的名稱。當(dāng)在“選擇器類型”選項組中選擇不同的選 項時，可以在該文本框中設(shè)置選擇器的名稱。

(3) “規(guī)則定義”下拉列表框：指定該樣式保存在什么地方，包括定義一個外部鏈接的CSS樣 式表文件，還是定義一個僅應(yīng)用于當(dāng)前頁面的CSS樣式。

①（新建樣式表文件)：定義一個外部鏈接的CSS樣式表文件，即把當(dāng)前定義的樣式保存在外 部樣式表文件中，然后通過鏈接形式導(dǎo)入網(wǎng)頁內(nèi)部使用。使用樣式表文件的好處就是其他網(wǎng)頁也可以： 應(yīng)用該樣式。

②（僅限該文檔）：僅在該文檔中應(yīng)用CSS樣式，即當(dāng)前定義的樣式保存在網(wǎng)頁內(nèi)部，只能夠 被該文檔使用，其他網(wǎng)頁無法使用。

第5步，如果定義該頁面的普通文本的樣式，可在“選擇器類型”中選擇CSS樣式的類型，例 如，如果要定義的是整個頁面的文本，可選擇“標簽C重新定義HTML元素）”選項，然后在“選擇器名稱”中選擇body選項，如圖所示

第6步，選定之后，在“規(guī)則定義”中選擇默認的“（新建樣式表文件）”選項。

如果選擇“（僅限該文檔選項，CSS樣式就被定義在該文檔中。但是在頁面多時，修改樣式就 比較繁瑣，需要反復(fù)修改每個文件，因此在定義整個站點時，一般選擇定義在新建的樣式表文件中。

第7步，設(shè)置完畢后，單擊“確定”按鈕關(guān)閉對話框，同時彈出“保存樣式表文件為”對話框， 提示用戶保存新建的樣式表文件，將新的樣式表文件重命名為style.css。

第8步，單擊“保存”按鈕保存樣式表文件，一個新的樣式表文件就創(chuàng)建完成了，這時會打開 “CSS規(guī)則定義”對話框，進入樣式表編輯狀態(tài)。在這里定義網(wǎng)頁字體大小為12px，即在Font-size 選項后的文本框中選擇或者輸入12,并在后面的單位下拉列表中選擇px,如圖所示。

第9步，單擊“確定”按鈕，關(guān)閉該對話框，然后單擊“取消”按鈕，關(guān)閉“插入Div”對話框;即新建CSS規(guī)則，但是不插入標簽。當(dāng)然，也可以插入結(jié)構(gòu)標簽，并定義該標簽的樣式。

第10步，切換到代碼視圖，可以看到Dreamweaver CC會自動在style.css樣式表文件中生成一個樣式代碼，并定義了一個規(guī)則。