- 相關(guān)推薦
DW應用CSS樣式表的技巧
CSS 能夠對網(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁(yè)對象和模型樣式編輯的能力。下面是YJBYS小編整理的DW應用CSS樣式表的技巧，希望對你有幫助!
一、 去除超級鏈接的下劃線(xiàn)以及在超級鏈接上實(shí)現鼠標懸停變色：
在默認情況下，用DreamWeaver設計的網(wǎng)頁(yè)中的超級鏈接都有下劃線(xiàn)，看上去不大美觀(guān)。要去除這些討厭的下劃線(xiàn),很多報刊介紹的方法都是在HTML源代碼中手工加入一段代碼，其實(shí)在DreamWeave中很容易去除鏈接的下劃線(xiàn)。首先在DreamWeaver的Document Windows中隨便建立一個(gè)鏈接，你可以看到這個(gè)鏈接會(huì )有下劃線(xiàn)。怎樣去除這條下劃線(xiàn)呢?
1.在點(diǎn)擊菜單欄上的"Text"|"CSS Styles"| "Edit Style Sheet…"(或者直接按快捷鍵Ctrl+shift+E),調出Edit Style Sheet(編輯樣式表)對話(huà)框窗口。
2.點(diǎn)擊"New (新建)"，然后在"New Style (新樣式)"對話(huà)框中，點(diǎn)擊"Use CSS Selector"按鈕。
3.在Selector欄中鍵入a, 然后點(diǎn)OK。
4.隨后彈出"CSS 樣式定義"對話(huà)框，在Type類(lèi)的decoration(裝飾)中，勾選none，然后點(diǎn)OK，再點(diǎn)Done。你將立刻在Document Windows中發(fā)現鏈接的下劃線(xiàn)已經(jīng)消失了。那么又怎樣實(shí)現當鼠標懸停在鏈接上時(shí)鏈接變色呢?重復上述步驟中的的第一、第二步。然后點(diǎn)選Selector旁的下拉箭頭，選擇"a:hover",再點(diǎn)OK。在隨后彈出的 "Style definition for a: hover"對話(huà)框中，在Type類(lèi)的color中任意選擇一種顏色(比如選擇紅色)，然后點(diǎn)OK，再點(diǎn)Done便完成了。按F12預覽，將鼠標放在鏈接上，該鏈接是不是變成了紅色?如果在剛才的"Style definition for a: hover"對話(huà)框中，在Backgroud(背景)類(lèi)里，選擇backgroud的顏色為綠色，那么當你把鼠標放在超級鏈接上時(shí)，不但鏈接會(huì )變成紅色，而且還會(huì )有綠色的背景。事實(shí)上，通過(guò)剛才的CSS 樣式定義對話(huà)框，你還可以實(shí)現更多的特殊效果，有興趣的朋友不妨去好好琢磨一下。
二、創(chuàng )建可反復使用的外部CSS樣式表
用DreamWeaver在某網(wǎng)頁(yè)中創(chuàng )建了一種CSS樣式后，如果你要在另外的網(wǎng)頁(yè)中應用該樣式，你不必從新創(chuàng )建該CSS樣式，只要你創(chuàng )建了外部CSS樣式表文件(external CSS style sheet)，你便可以在今后任意調用該樣式表文件中的樣式。為了便于管理，先在站點(diǎn)所在文件夾中，新建一個(gè)文件夾，取名為CSS，專(zhuān)門(mén)用于放置外部樣式表文件(其擴展名為css)。
1、在Document Window中按Ctrl+shift+E，調出Edit Style Sheet(編輯樣式表)對話(huà)框窗口
2、點(diǎn)擊"link"。
3、在彈出的Link External Style Sheet(鏈接外部樣式表)對話(huà)框，點(diǎn)BROWSE，找到剛才創(chuàng )建的CSS文件夾。
4、在Select Stylesheet File (選擇樣式表文件)窗口"文件名"欄中，鍵入*.css (*可以為任意名)，請注意，事實(shí)上此時(shí)在CSS文件夾中并無(wú)樣式表文件，在"文件名"欄中鍵入的新名字將成為外部樣式表新文件的名字。比如鍵入title.css，,然后點(diǎn)Select | OK。
5、在Edit Style Sheet(編輯樣式表)對話(huà)框窗口中，會(huì )新增加 title.css (link), 雙擊它。
6、在彈出的"title.css"窗口中，點(diǎn)"New"。
7、在"New Style"對話(huà)框中，點(diǎn)選"Make Custom Style (class)"按鈕
8、在Name欄中鍵入某個(gè)名字，如myheadline,點(diǎn)OK。
9、在接下來(lái)的"Style definition for .myheadline in title.css"對話(huà)框中，進(jìn)行字體、顏色等各種設置，完成后點(diǎn)OK。如還要創(chuàng )建新的樣式，再點(diǎn)"New",重復剛才的步驟6、7、8、9，最后點(diǎn)"save"| "done",于是title.css這個(gè)外部樣式表文件便創(chuàng )建好了。菜單欄上的"TEXT" |"CSS Styles"子菜單中將會(huì )列出title.css中的所有樣式。如要在其他網(wǎng)頁(yè)中調用這個(gè)title.css，只需重復上述1至3步，然后在Select Stylesheet File窗口"文件名"欄中輸入title.css。點(diǎn)"select"| "ok"| "done", title.css中所有的樣式便會(huì )出現在該網(wǎng)頁(yè)菜單欄上的"Text" |"CSS Styles"子菜單中，你將可以在此網(wǎng)頁(yè)中應用這些樣式。
【DW應用CSS樣式表的技巧】相關(guān)文章：
css 書(shū)寫(xiě)技巧 CSS 技巧教程簡(jiǎn)介07-02
CSS-層疊樣式表基礎教程08-10
CSS樣式表代碼布局基礎教程10-20
CSS高級布局技巧07-17
CSS高級技巧匯總07-20
深究CSS定位以及其應用精選09-23
CSS技術(shù)在WEB設計中的應用06-14
有關(guān)CSS的小技巧精編06-28