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

新建CSS規(guī)則

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

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

【操作步驟】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第5步，如果定義該頁(yè)面的普通文本的樣式，可在“選擇器類(lèi)型”中選擇CSS樣式的類(lèi)型，例 如，如果要定義的是整個(gè)頁(yè)面的文本，可選擇“標(biāo)簽C重新定義HTML元素）”選項(xiàng)，然后在“選擇器名稱(chēng)”中選擇body選項(xiàng)，如圖所示

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

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

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

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

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

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