Dreamweaver使用CSS樣式表設(shè)置網(wǎng)頁文本格式(3)_Dreamweaver教程

　　

　　對(duì)第二段重復(fù)第 3 步。

　　在"CSS 樣式"面板("窗口">"CSS 樣式")中，單擊位于面板右下角的"附加樣式表"按鈕。

　　

　　在"附加外部樣式表"對(duì)話框中，單擊"瀏覽"并瀏覽到上一節(jié)創(chuàng)建的 cafe_townsend.css 文件。

　　單擊"確定"。

　　"文檔"窗口中的文本將根據(jù)外部樣式表中的 CSS 規(guī)則來設(shè)置格式。

　　研究"CSS 樣式"面板

　　"CSS 樣式"面板可讓您跟蹤影響當(dāng)前所選頁面元素的 CSS 規(guī)則和屬性，或影響整個(gè)文檔的規(guī)則和屬性，還可以在不打開外部樣式表的情況下修改 CSS 屬性。

　　請(qǐng)確保 index.html 頁在"文檔"窗口中打開。

　　在"CSS 樣式"面板("窗口">"CSS 樣式")中，單擊面板頂部的"所有"，然后檢查您的 CSS 規(guī)則。

　　在"所有"模式下，CSS 面板向您顯示應(yīng)用到當(dāng)前文檔的所有 CSS 規(guī)則，不管這些規(guī)則是在外部樣式表中，還是在自身文檔中。您應(yīng)在"所有規(guī)則"窗格中看到兩個(gè)主要類別:一個(gè)<STYLE> 標(biāo)簽類別和一個(gè) cafe_townsend.css 類別。

　　若未展開<STYLE> 標(biāo)簽類別，則請(qǐng)單擊加號(hào) ( ) 展開該類別。

　　單擊正文規(guī)則。

　　值為 #000000 的 background-color 屬性出現(xiàn)在下面的"屬性"窗格中。

　　

　　注重您可能需要折疊其它面板，如"文件"面板，以便看到完整的"CSS 樣式"面板，還可以通過拖動(dòng)窗格之間的邊界來更改"CSS 樣式"面板的長(zhǎng)度。

　　您在教程:創(chuàng)建基于表格的頁面布局中通過使用"修改頁面屬性"對(duì)話框設(shè)置了頁面的背景色。以此方式設(shè)置頁面屬性時(shí)，Dreamweaver 會(huì)編寫一個(gè)內(nèi)置于文檔的 CSS 樣式。

　　單擊加號(hào) ( ) 展開 cafe_townsend.css 類別。

　　單擊 p 規(guī)則。

　　在外部樣式表中為 p 規(guī)則定義的所有屬性和值將顯示在下面的"屬性"窗格中。

　　

　　在"文檔"窗口中，在剛設(shè)置格式的兩個(gè)段落中的任何位置單擊一次。

　　在"CSS 樣式"面板中，單擊面板頂部的"當(dāng)前"，然后檢查您的 CSS 樣式。在"當(dāng)前"模式中，CSS 面板向您顯示當(dāng)前所選內(nèi)容的屬性的摘要。顯示的屬性與外部樣式表中 p 規(guī)則的屬性相對(duì)應(yīng)。

　　在下一節(jié)中，您將使用"CSS 樣式"面板創(chuàng)建新規(guī)則。使用"CSS 樣式"面板創(chuàng)建新規(guī)則比手動(dòng)鍵入規(guī)則輕易得多，后者如同最初創(chuàng)建外部樣式表時(shí)的操作一樣。

　　創(chuàng)建新的 CSS 規(guī)則

　　在本節(jié)中，您將使用"CSS 樣式"面板創(chuàng)建自定義的 CSS 規(guī)則或類樣式。類樣式使您可以設(shè)置任何范圍或文本塊的樣式屬性，并可以應(yīng)用到任何 HTML 標(biāo)簽。有關(guān)不同類型的 CSS 規(guī)則的更多信息，請(qǐng)參見了解 CSS。

　　在"CSS 樣式"面板中，單擊面板右下角的"新建 CSS 規(guī)則"。

　　

　　在"新建 CSS 規(guī)則"對(duì)話框中，從"選擇器類型"選項(xiàng)中選擇"類"。該選項(xiàng)應(yīng)該是默認(rèn)選中的。