DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS樣式表高效使用八大秘訣(2)
CSS樣式表高效使用八大秘訣(2)
編輯:CSS詳解     
6、給指定內容加邊框

在DreamWeaver中,我們可以利用CSS強大的定義功能來給某部分內容加邊框,定義時首先打開DreamWeaver的設計界面,在該界面中找到CSS的屬性定義對話框(StyleDefinitionfor.style1),該對話框的“Border”設置項就是用來定義指定內容邊框線的,其中“top”、“bottom”、“left”、“right”設置欄是分別用來定義指定內容四周邊框線的粗細和顏色的,這些設置項設置好後還需要在下面的“Style”中定義線型,否則我們將看不到定義的邊框線,因為css默認的線型是“none”。下面是一個定義了上邊框為:藍色細線;左邊框為:綠色中粗線的CSS源代碼:

  1. 〈styletype="text/CSS"〉
  2. 〈!--
  3. .style1{border:solid;
  4. border-width:thin0px0pxmedium;
  5. border-color:#0000FFblackblack#00FF00}
  6. --〉
  7. 〈/style〉

7、用樣式表來控制超級鏈接的顏色

如果你仔細研究一下超級鏈接,你就會發現,浏覽器處理超級鏈接的默認方式是,對於目前還沒有訪問過的超級鏈接是用藍色且帶有下劃線的文字來顯示的,對於已經訪問過的超級鏈接則是用深紫色且帶有深紫色的下劃線的文字來顯示的。這些默認的設置顏色看得時間,可能就產生厭倦之感,並且很有可能與自己網頁的背景顏色不協調。因此我們完全可以按照自己的視覺要求,來自由更改超級鏈接的顯示顏色,讓它更能體現自己的風格。

下面筆者就來介紹一段修改超級鏈接顯示顏色的源代碼,代碼如下:

我們可以把這段源代碼添加在Html文件的……之間,它可以對對本網頁中的任何一個超級鏈接都起作用,其中這段代碼中的:

A:link{text-decoration:none;color:blue}是說明了超級鏈接還沒有被訪問,它沒有下劃線,顏色為藍色。

A:visited{color:red;text-decoration:line-through}說明了超級鏈接被訪問後,它的顏色變成了紅色,有了一根刪除線。

A:active{color:white;text-decoration:underline}說明超級鏈接處於活動狀態的時候,它的顏色變成了白色,有了下劃線。

A:hover{text-decoration:none;color:#FF0000;background-color:black}說明鼠標移動到超級鏈接後,它沒有下劃線,文字顏色變成了黃色,背景顏色是黑色。

根據上面的解釋,我們可以把超級鏈接在各種狀態下的顯示顏色修改成自己喜歡的那種,以便能更好地展示自己的個性。

8、給選中文字加背景圖像

在DreamWeaver中,我們同樣可以給指定文字加上背景圖象,其操作過程與給指定文字加背景色操作類似,只不過是把選擇背景顏色換成選擇加載的背景圖象就是了。其具體操作過程是,首先我們可以先做一個定義背景色的CSS,例如給這個css命名為txstyle,接著在網頁中選中需要設置顏色的文字,然後在工具欄中單擊一下“txstyle”就行了。下面就是一個定義背景圖象的CSS的源代碼(其中test.gif就是所加載的背景圖象):

  1. 〈styletype="text/CSS"〉
  2. 〈!--
  3. .txbgstyle{background-image:url(test.gif)}
  4. --〉
  5. 〈/style〉

【編輯推薦】

  1. 五個方案解決XHtml+CSS兼容性
  2. IE6.0對padding的解讀分析
  3. IE6中常見CSS兼容性解決十大技巧
  4. CSS border常見簡寫屬性
  5. CSS中cellspacing和cellpadding屬性用法揭秘
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved