位置:首頁(yè) > 軟件操作教程 > UI設(shè)計(jì)軟件 > Adobe Dreamweaver > 問(wèn)題詳情

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

提問(wèn)人:劉旭39發(fā)布時(shí)間:2020-11-11

新建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)簽,如圖所示。image.png

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

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

(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),如圖所示image.png

第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,如圖所示。image.png

第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ī)則。

繼續(xù)查找其他問(wèn)題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部