Dreamweaver使用CSS樣式表設置網(wǎng)頁文本格式(6)_Dreamweaver教程
現(xiàn)在,您已經(jīng)創(chuàng)建了一個設置導航條文本格式的規(guī)則。接下來,您要將該規(guī)則應用到所選鏈接。
應用規(guī)則
在"文檔"窗口中打開 index.html 頁,單擊單詞 Cuisine 將插入點置于該單詞中的某個位置。

在標簽選擇器中,單擊最右邊的 標簽。
此操作將為指定的 標簽或鏈接選擇所有文本。

在"屬性"檢查器("窗口">"屬性")中,從"樣式"彈出式菜單中選擇"navigation"。
在"文檔"窗口中,Cuisine 文本的外觀完全發(fā)生了變化。根據(jù)您在上一節(jié)中為 .navigation 規(guī)則所定義的屬性,該文本的格式現(xiàn)在已被設置為導航條按鈕。

對于導航條中的每個鏈接,重復第 1 步到第 3 步。
您必須為每個 標簽或鏈接分配一個導航類樣式,因此,使用標簽選擇器分別選擇每個鏈接,然后逐個為每一個鏈接分配類樣式是很重要的。

在設置鏈接文本的格式時假如有困難,請確保每個(或每組)鏈接的單詞之間有空格(不是回車)。還要確保兩個鏈接之間的空格本身未被鏈接。假如空格已鏈接,請小心選擇鏈接的空格,在"屬性"檢查器中清除"鏈接"文本框,并按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
完成對導航條的所有單詞的格式設置后,保存該頁面,然后在瀏覽器中預覽您的工作("文件">"在瀏覽器中預覽")。
您可以單擊鏈接以確保其有效。
添加鼠標經(jīng)過效果
現(xiàn)在,您將添加一個鼠標經(jīng)過效果,使導航條塊的背景色在每次鼠標指針經(jīng)過某個鏈接時改變顏色。若要添加鼠標經(jīng)過效果,請?zhí)砑影?:hover 偽類的新規(guī)則。
關(guān)于…關(guān)于 :hover 偽類 偽類是一種影響 HTML 文檔中的某些元素的方式,它不是基于文檔本身的 HTML 代碼,而是基于 Web 瀏覽器應用的其它外部條件。偽類可以是動態(tài)的,這表明當用戶與文檔交互時,頁面上的元素可能會獲取或丟失偽類。
當用戶把鼠標指針停留在已設置格式的頁面元素上時,:hover 偽類會影響該元素的變化。例如,將 :hover 偽類添加到 .navigation 類樣式 (.navigation:hover) 以創(chuàng)建新規(guī)則時,根據(jù) .navigation:hover 規(guī)則的屬性,所有用 .navigation 規(guī)則設置格式的文本元素都會發(fā)生變化。
打開 cafe_townsend.css 文件。
選擇整個 .navigation 規(guī)則。

復制文本("編輯">"復制")。
在該規(guī)則的末尾單擊一下,然后多按幾次 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 以創(chuàng)建一些空格。

將已復制的文本粘貼("編輯">"粘貼")到剛創(chuàng)建的空格中。
將 :hover 偽類添加到已粘貼的 .navigation 選擇器中,如下所示:

在新的 .navigation:hover 規(guī)則中,將當前的背景色 (#993300) 替換為 #D03D03。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設計CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-Dreamweaver使用CSS樣式表設置網(wǎng)頁文本格式(6)
。