Dreamweaver 入門:使用CSS設置頁面格式(4)_Dreamweaver教程
提示有關 CSS 屬性的更多信息,請參見 Dreamweaver 中包含的 O'Reilly 參考指南。若要顯示該指南,請選擇"幫助">"參考",然后從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。
單擊"確定"。
單擊"CSS 樣式"面板頂部的"所有"按鈕。
若未展開 cafe_townsend.css 類別,則單擊該類別旁邊的加號 ( ) 按鈕。
您可以看到,Dreamweaver 已將 .bold 類樣式添加到在外部樣式表中定義的規則列表中。假如您在"所有規則"窗格中單擊 .bold 規則,則該規則的屬性將出現在"屬性"窗格中。新規則還出現在"屬性"檢查器的"樣式"彈出式菜單中。
將類樣式應用到文本
現在,您已經創建了一個類規則,并將該規則應用到某些段落文本。
在"文檔"窗口中,選擇第一段中文本的前四個單詞:Cafe Townsend's visionary chef。
在"屬性"檢查器("窗口">"屬性")中,從"樣式"彈出式菜單中選擇"bold"。

"粗體"類樣式將應用到您的文本。
重復第 2 步,將"粗體"類樣式應用到第二段的前四個單詞。

保存頁面。
設置導航條文本的格式
接下來,您將使用 CSS 將樣式應用到導航條的鏈接文本。許多 Web 頁面使用內含文本的彩色矩形圖像來創建導航條。但是,假如使用 CSS,您所需要設置的只是鏈接文本和一些格式。通過使用 display: block 屬性并設置塊的寬度,您可以有效地創建矩形,而不需要另外使用圖像。
為導航創建新規則
若未打開 cafe_townsend.css 文件,則打開該文件,或單擊其選項卡來顯示該文件。
定義一個新規則,方法是在該文件的 .bold 類樣式后面鍵入以下代碼:
.navigation {
}
這是一個空規則。
文件中的代碼應類似于下面的示例:

保存 cafe_townsend.css 文件。
接下來,您將使用"CSS 樣式"面板向規則添加屬性。
若未打開 index.html 文件,則打開該文件。
在"CSS 樣式"面板中,確保選中了"全部"模式,選擇新的 .navigation 規則,然后單擊面板右下角的"編輯樣式"。

在"CSS 規則定義"對話框中,執行下面的操作:
在"字體"文本框中,輸入 Verdana, sans-serif。
從"大小"彈出式菜單中選擇 16,然后從緊靠其右的彈出式菜單中選擇像素。
從"樣式"彈出式菜單中選擇"正常"。
從"修飾"列表中選擇"無"。
從"粗細"彈出式菜單中選擇"粗體"。
在"顏色"文本框中,輸入 #FFFFFF。

若要顯示該指南,請選擇"幫助">"參考",然后從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。
單擊"確定"。
現在,您將使用"CSS 樣式"面板向 .navigation 規則添加更多屬性。
在"CSS 樣式"面板中,確保選中了 .navigation 規則,然后單擊"顯示列表視圖"。
- 相關鏈接:
- 教程說明:
Dreamweaver教程-Dreamweaver 入門:使用CSS設置頁面格式(4)
。