應用CSS樣式表技巧兩則-Dreamweaver教程
2024-09-12 12:30:16
供稿：網友
一、 去除超級鏈接的下劃線以及在超級鏈接上實現鼠標懸停變色：
在默認情況下，用dreamweaver設計的網頁中的超級鏈接都有下劃線，看上去不大美觀。要去除這些討厭的下劃線,很多報刊介紹的方法都是在html源代碼中手工加入一段代碼，其實在dreamweave中很輕易去除鏈接的下劃線。首先在dreamweaver的document windows中隨便建立一個鏈接，你可以看到這個鏈接會有下劃線。怎樣去除這條下劃線呢？
1.在點擊菜單欄上的"text"|"css styles"| "edit style sheet…"(或者直接按快捷鍵ctrl shift e),調出edit style sheet（編輯樣式表）對話框窗口。
2.點擊"new (新建)"，然后在"new style （新樣式）"對話框中，點擊"use css selector"按鈕。
3.在selector欄中鍵入a, 然后點ok。
4.隨后彈出"css 樣式定義"對話框，在type類的decoration(裝飾)中，勾選none，然后點ok，再點done。你將馬上在document windows中發現鏈接的下劃線已經消失了。那么又怎樣實現當鼠標懸停在鏈接上時鏈接變色呢？重復上述步驟中的的第一、第二步。然后點選selector旁的下拉箭頭，選擇"a:hover",再點ok。在隨后彈出的 "style definition for a: hover"對話框中，在type類的color中任意選擇一種顏色（比如選擇紅色），然后點ok，再點done便完成了。按f12預覽，將鼠標放在鏈接上，該鏈接是不是變成了紅色？假如在剛才的"style definition for a: hover"對話框中，在backgroud（背景）類里，選擇backgroud的顏色為綠色，那么當你把鼠標放在超級鏈接上時，不但鏈接會變成紅色，而且還會有綠色的背景。事實上，通過剛才的css 樣式定義對話框，你還可以實現更多的非凡效果，有愛好的朋友不妨去好好琢磨一下。
二、創建可反復使用的外部css樣式表
用dreamweaver在某網頁中創建了一種css樣式后，假如你要在另外的網頁中應用該樣式，你不必從新創建該css樣式，只要你創建了外部css樣式表文件（external css style sheet），你便可以在今后任意調用該樣式表文件中的樣式。為了便于治理，先在站點所在文件夾中，新建一個文件夾，取名為css，專門用于放置外部樣式表文件（其擴展名為css）。
1、在document window中按ctrl shift e，調出edit style sheet（編輯樣式表）對話框窗口
2、點擊"link"。
3、在彈出的link external style sheet(鏈接外部樣式表)對話框，點browse，找到剛才創建的css文件夾。
4、在select stylesheet file (選擇樣式表文件)窗口"文件名"欄中，鍵入*.css (*可以為任意名)，請注重，事實上此時在css文件夾中并無樣式表文件，在"文件名"欄中鍵入的新名字將成為外部樣式表新文件的名字。比如鍵入title.css，,然后點select | ok。
5、在edit style sheet（編輯樣式表）對話框窗口中，會新增加 title.css (link), 雙擊它。
6、在彈出的"title.css"窗口中，點"new"。
7、在"new style"對話框中，點選"make custom style (class)"按鈕
8、在name欄中鍵入某個名字，如myheadline,點ok。
9、在接下來的"style definition for .myheadline in title.css"對話框中，進行字體、顏色等各種設置，完成后點ok。如還要創建新的樣式，再點"new",重復剛才的步驟6、7、8、9，最后點"save"| "done",于是title.css這個外部樣式表文件便創建好了。菜單欄上的"text" |"css styles"子菜單中將會列出title.css中的所有樣式。如要在其他網頁中調用這個title.css，只需重復上述1至3步，然后在select stylesheet file窗口"文件名"欄中輸入title.css。點"select"| "ok"| "done", title.css中所有的樣式便會出現在該網頁菜單欄上的"text" |"css styles"子菜單中，你將可以在此網頁中應用這些樣式。|||
