Dreamweaver使用CSS樣式表設置網頁文本格式(6)_Dreamweaver教程

　　現在，您已經創建了一個設置導航條文本格式的規則。接下來，您要將該規則應用到所選鏈接。

　　應用規則

　　在"文檔"窗口中打開 index.html 頁，單擊單詞 Cuisine 將插入點置于該單詞中的某個位置。

　　

　　在標簽選擇器中，單擊最右邊的 標簽。

　　此操作將為指定的 標簽或鏈接選擇所有文本。

　　

　　在"屬性"檢查器("窗口">"屬性")中，從"樣式"彈出式菜單中選擇"navigation"。

　　在"文檔"窗口中，Cuisine 文本的外觀完全發生了變化。根據您在上一節中為 .navigation 規則所定義的屬性，該文本的格式現在已被設置為導航條按鈕。

　　

　　對于導航條中的每個鏈接，重復第 1 步到第 3 步。

　　您必須為每個 標簽或鏈接分配一個導航類樣式，因此，使用標簽選擇器分別選擇每個鏈接，然后逐個為每一個鏈接分配類樣式是很重要的。

　　

　　在設置鏈接文本的格式時假如有困難，請確保每個(或每組)鏈接的單詞之間有空格(不是回車)。還要確保兩個鏈接之間的空格本身未被鏈接。假如空格已鏈接，請小心選擇鏈接的空格，在"屬性"檢查器中清除"鏈接"文本框，并按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

　　完成對導航條的所有單詞的格式設置后，保存該頁面，然后在瀏覽器中預覽您的工作("文件">"在瀏覽器中預覽")。

　　您可以單擊鏈接以確保其有效。

　　添加鼠標經過效果

　　現在，您將添加一個鼠標經過效果，使導航條塊的背景色在每次鼠標指針經過某個鏈接時改變顏色。若要添加鼠標經過效果，請添加包含 :hover 偽類的新規則。

　　關于…關于 :hover 偽類 偽類是一種影響 HTML 文檔中的某些元素的方式，它不是基于文檔本身的 HTML 代碼，而是基于 Web 瀏覽器應用的其它外部條件。偽類可以是動態的，這表明當用戶與文檔交互時，頁面上的元素可能會獲取或丟失偽類。

　　當用戶把鼠標指針停留在已設置格式的頁面元素上時，:hover 偽類會影響該元素的變化。例如，將 :hover 偽類添加到 .navigation 類樣式 (.navigation:hover) 以創建新規則時，根據 .navigation:hover 規則的屬性，所有用 .navigation 規則設置格式的文本元素都會發生變化。

　　打開 cafe_townsend.css 文件。

　　選擇整個 .navigation 規則。

　　

　　復制文本("編輯">"復制")。

　　在該規則的末尾單擊一下，然后多按幾次 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 以創建一些空格。

　　

　　將已復制的文本粘貼("編輯">"粘貼")到剛創建的空格中。

　　將 :hover 偽類添加到已粘貼的 .navigation 選擇器中，如下所示:

　　

　　在新的 .navigation:hover 規則中，將當前的背景色 (#993300) 替換為 #D03D03。