應(yīng)用CSS樣式表技巧兩則_Dreamweaver教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
一、 去除超級鏈接的下劃線以及在超級鏈接上實現(xiàn)鼠標(biāo)懸停變色：
在默認(rèn)情況下，用DreamWeaver設(shè)計的網(wǎng)頁中的超級鏈接都有下劃線，看上去不大美觀。要去除這些討厭的下劃線,很多報刊介紹的方法都是在HTML源代碼中手工加入一段代碼，其實在DreamWeave中很輕易去除鏈接的下劃線。首先在DreamWeaver的Document Windows中隨便建立一個鏈接，你可以看到這個鏈接會有下劃線。怎樣去除這條下劃線呢？
1.在點(diǎn)擊菜單欄上的"Text"|"CSS Styles"| "Edit Style Sheet…"(或者直接按快捷鍵Ctrl shift E),調(diào)出Edit Style Sheet（編輯樣式表）對話框窗口。
2.點(diǎn)擊"New (新建)"，然后在"New Style （新樣式）"對話框中，點(diǎn)擊"Use CSS Selector"按鈕。
3.在Selector欄中鍵入a, 然后點(diǎn)OK。
4.隨后彈出"CSS 樣式定義"對話框，在Type類的decoration(裝飾)中，勾選none，然后點(diǎn)OK，再點(diǎn)Done。你將馬上在Document Windows中發(fā)現(xiàn)鏈接的下劃線已經(jīng)消失了。那么又怎樣實現(xiàn)當(dāng)鼠標(biāo)懸停在鏈接上時鏈接變色呢？重復(fù)上述步驟中的的第一、第二步。然后點(diǎn)選Selector旁的下拉箭頭，選擇"a:hover",再點(diǎn)OK。在隨后彈出的 "Style definition for a: hover"對話框中，在Type類的color中任意選擇一種顏色（比如選擇紅色），然后點(diǎn)OK，再點(diǎn)Done便完成了。按F12預(yù)覽，將鼠標(biāo)放在鏈接上，該鏈接是不是變成了紅色？假如在剛才的"Style definition for a: hover"對話框中，在Backgroud（背景）類里，選擇backgroud的顏色為綠色，那么當(dāng)你把鼠標(biāo)放在超級鏈接上時，不但鏈接會變成紅色，而且還會有綠色的背景。事實上，通過剛才的CSS 樣式定義對話框，你還可以實現(xiàn)更多的非凡效果，有愛好的朋友不妨去好好琢磨一下。
二、創(chuàng)建可反復(fù)使用的外部CSS樣式表
用DreamWeaver在某網(wǎng)頁中創(chuàng)建了一種CSS樣式后，假如你要在另外的網(wǎng)頁中應(yīng)用該樣式，你不必從新創(chuàng)建該CSS樣式，只要你創(chuàng)建了外部CSS樣式表文件（external CSS style sheet），你便可以在今后任意調(diào)用該樣式表文件中的樣式。為了便于治理，先在站點(diǎn)所在文件夾中，新建一個文件夾，取名為CSS，專門用于放置外部樣式表文件（其擴(kuò)展名為css）。
1、在Document Window中按Ctrl shift E，調(diào)出Edit Style Sheet（編輯樣式表）對話框窗口
2、點(diǎn)擊"link"。
3、在彈出的Link External Style Sheet(鏈接外部樣式表)對話框，點(diǎn)BROWSE，找到剛才創(chuàng)建的CSS文件夾。
4、在Select Stylesheet File (選擇樣式表文件)窗口"文件名"欄中，鍵入*.css (*可以為任意名)，請注重，事實上此時在CSS文件夾中并無樣式表文件，在"文件名"欄中鍵入的新名字將成為外部樣式表新文件的名字。比如鍵入title.css，,然后點(diǎn)Select | OK。
5、在Edit Style Sheet（編輯樣式表）對話框窗口中，會新增加 title.css (link), 雙擊它。
6、在彈出的"title.css"窗口中，點(diǎn)"New"。
7、在"New Style"對話框中，點(diǎn)選"Make Custom Style (class)"按鈕
8、在Name欄中鍵入某個名字，如myheadline,點(diǎn)OK。
9、在接下來的"Style definition for .myheadline in title.css"對話框中，進(jìn)行字體、顏色等各種設(shè)置，完成后點(diǎn)OK。如還要創(chuàng)建新的樣式，再點(diǎn)"New",重復(fù)剛才的步驟6、7、8、9，最后點(diǎn)"save"| "done",于是title.css這個外部樣式表文件便創(chuàng)建好了。菜單欄上的"TEXT" |"CSS Styles"子菜單中將會列出title.css中的所有樣式。如要在其他網(wǎng)頁中調(diào)用這個title.css，只需重復(fù)上述1至3步，然后在Select Stylesheet File窗口"文件名"欄中輸入title.css。點(diǎn)"select"| "ok"| "done", title.css中所有的樣式便會出現(xiàn)在該網(wǎng)頁菜單欄上的"Text" |"CSS Styles"子菜單中，你將可以在此網(wǎng)頁中應(yīng)用這些樣式。
在默認(rèn)情況下，用DreamWeaver設(shè)計的網(wǎng)頁中的超級鏈接都有下劃線，看上去不大美觀。要去除這些討厭的下劃線,很多報刊介紹的方法都是在HTML源代碼中手工加入一段代碼，其實在DreamWeave中很輕易去除鏈接的下劃線。首先在DreamWeaver的Document Windows中隨便建立一個鏈接，你可以看到這個鏈接會有下劃線。怎樣去除這條下劃線呢？
1.在點(diǎn)擊菜單欄上的"Text"|"CSS Styles"| "Edit Style Sheet…"(或者直接按快捷鍵Ctrl shift E),調(diào)出Edit Style Sheet（編輯樣式表）對話框窗口。
2.點(diǎn)擊"New (新建)"，然后在"New Style （新樣式）"對話框中，點(diǎn)擊"Use CSS Selector"按鈕。
3.在Selector欄中鍵入a, 然后點(diǎn)OK。
4.隨后彈出"CSS 樣式定義"對話框，在Type類的decoration(裝飾)中，勾選none，然后點(diǎn)OK，再點(diǎn)Done。你將馬上在Document Windows中發(fā)現(xiàn)鏈接的下劃線已經(jīng)消失了。那么又怎樣實現(xiàn)當(dāng)鼠標(biāo)懸停在鏈接上時鏈接變色呢？重復(fù)上述步驟中的的第一、第二步。然后點(diǎn)選Selector旁的下拉箭頭，選擇"a:hover",再點(diǎn)OK。在隨后彈出的 "Style definition for a: hover"對話框中，在Type類的color中任意選擇一種顏色（比如選擇紅色），然后點(diǎn)OK，再點(diǎn)Done便完成了。按F12預(yù)覽，將鼠標(biāo)放在鏈接上，該鏈接是不是變成了紅色？假如在剛才的"Style definition for a: hover"對話框中，在Backgroud（背景）類里，選擇backgroud的顏色為綠色，那么當(dāng)你把鼠標(biāo)放在超級鏈接上時，不但鏈接會變成紅色，而且還會有綠色的背景。事實上，通過剛才的CSS 樣式定義對話框，你還可以實現(xiàn)更多的非凡效果，有愛好的朋友不妨去好好琢磨一下。
二、創(chuàng)建可反復(fù)使用的外部CSS樣式表
用DreamWeaver在某網(wǎng)頁中創(chuàng)建了一種CSS樣式后，假如你要在另外的網(wǎng)頁中應(yīng)用該樣式，你不必從新創(chuàng)建該CSS樣式，只要你創(chuàng)建了外部CSS樣式表文件（external CSS style sheet），你便可以在今后任意調(diào)用該樣式表文件中的樣式。為了便于治理，先在站點(diǎn)所在文件夾中，新建一個文件夾，取名為CSS，專門用于放置外部樣式表文件（其擴(kuò)展名為css）。
1、在Document Window中按Ctrl shift E，調(diào)出Edit Style Sheet（編輯樣式表）對話框窗口
2、點(diǎn)擊"link"。
3、在彈出的Link External Style Sheet(鏈接外部樣式表)對話框，點(diǎn)BROWSE，找到剛才創(chuàng)建的CSS文件夾。
4、在Select Stylesheet File (選擇樣式表文件)窗口"文件名"欄中，鍵入*.css (*可以為任意名)，請注重，事實上此時在CSS文件夾中并無樣式表文件，在"文件名"欄中鍵入的新名字將成為外部樣式表新文件的名字。比如鍵入title.css，,然后點(diǎn)Select | OK。
5、在Edit Style Sheet（編輯樣式表）對話框窗口中，會新增加 title.css (link), 雙擊它。
6、在彈出的"title.css"窗口中，點(diǎn)"New"。
7、在"New Style"對話框中，點(diǎn)選"Make Custom Style (class)"按鈕
8、在Name欄中鍵入某個名字，如myheadline,點(diǎn)OK。
9、在接下來的"Style definition for .myheadline in title.css"對話框中，進(jìn)行字體、顏色等各種設(shè)置，完成后點(diǎn)OK。如還要創(chuàng)建新的樣式，再點(diǎn)"New",重復(fù)剛才的步驟6、7、8、9，最后點(diǎn)"save"| "done",于是title.css這個外部樣式表文件便創(chuàng)建好了。菜單欄上的"TEXT" |"CSS Styles"子菜單中將會列出title.css中的所有樣式。如要在其他網(wǎng)頁中調(diào)用這個title.css，只需重復(fù)上述1至3步，然后在Select Stylesheet File窗口"文件名"欄中輸入title.css。點(diǎn)"select"| "ok"| "done", title.css中所有的樣式便會出現(xiàn)在該網(wǎng)頁菜單欄上的"Text" |"CSS Styles"子菜單中，你將可以在此網(wǎng)頁中應(yīng)用這些樣式。
相關(guān)Dreamweaver教程：
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧：運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Photoshop結(jié)合Dreamweaver制作網(wǎng)頁相冊
- Dreamweaver MX進(jìn)階教程(十八)使用css樣式制作細(xì)線表格
- 站內(nèi)搜索的實現(xiàn)-Dreamweaver構(gòu)建BlogBLOG
- Dreamweaver MX2004視頻寶典教程 Dreamweaver文檔使用
- Dreamweaver MX進(jìn)階教程(二十)使用一象素透明圖像固定單元格寬度
- Dreamweaver 入門：DW 8 的新增功能
- 使用Dreamweaver制作網(wǎng)頁事如何使用庫
- Dreamweaver中層的應(yīng)用技巧
- DW2004 中文亂碼解決方案 [3]
- MSAgent 詳細(xì)解說
猜你也喜歡看這些
- 北風(fēng)網(wǎng)資深web講師李炎恢講師Dreamweaver系列課程(已完結(jié)|45課時)陸續(xù)更新中
- Dreamweaver 8 大師系列教程- 高級篇
- 巧學(xué)巧用Dreamweaver制作網(wǎng)頁習(xí)題精解
- 薛欣Dreamweaver8視頻教程
- 精通Javascript+jQuery
- Dreamweaver視頻課程
- Dreamweaver網(wǎng)頁設(shè)計與制作完全手冊
- Dreamweaver 8完美網(wǎng)頁設(shè)計：白金案例篇
- DreamweaverMX2004互動網(wǎng)站百寶箱for PHP
- Dreamweaver CS4 中文版完全自學(xué)教程
- 相關(guān)鏈接：
- 教程說明：
Dreamweaver教程-應(yīng)用CSS樣式表技巧兩則
。