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

新建CSS規(guī)則

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

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

【操作步驟】

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

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

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

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

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

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

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

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

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

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

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

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

①（新建樣式表文件)：定義一個(gè)外部鏈接的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樣式的類型，例 如，如果要定義的是整個(gè)頁面的文本，可選擇“標(biāo)簽C重新定義HTML元素）”選項(xiàng)，然后在“選擇器名稱”中選擇body選項(xiàng)，如圖所示

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

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

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

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

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

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