為了能幫助各位網(wǎng)友更高效地使用CSS，設(shè)計(jì)出更漂亮的網(wǎng)頁(yè)，下面筆者就把自己在使用CSS中的一些小經(jīng)驗(yàn)整理出來(lái)，希望這些內(nèi)容能起到拋磚引玉的作用。
巧用CSS來(lái)設(shè)定文字的背景
如何給部分文字加不同的背景色？由于Dreamweaver中沒(méi)有這方面的功能，但我們可以巧妙利用CSS來(lái)實(shí)現(xiàn)這樣的目的。具體操作過(guò)程是，首先我們可以先做一個(gè)定義背景色的CSS，例如給這個(gè)CSS命名為bjstyle，接著在網(wǎng)頁(yè)中選中需要設(shè)置顏色的文字，然后在工具欄中單擊一下“bjstyle”就行了。下面就是一個(gè)定義顏色背景的CSS的源代碼：
style type=”text/css”>
?–
.bjstyle ? background? #cc00bb?
–>
/style>
用樣式表來(lái)控制超鏈接的顏色
瀏覽器處理超鏈接的默認(rèn)方式太顯單調(diào)，并且很有可能與自己網(wǎng)頁(yè)的背景顏色不協(xié)調(diào)。因此我們完全可以按照自己的視覺(jué)要求，來(lái)自由更改超級(jí)鏈接的顯示顏色，讓它更能體現(xiàn)自己的風(fēng)格。下面筆者就來(lái)介紹一段修改超級(jí)鏈接顯示顏色的源代碼，代碼如下：
<style type=“text/css”>
<?–
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?yellow?background-color?black?
–>
</style>
我們可以把這段源代碼添加在HTML文件的<head>與</head>之間。它可以對(duì)對(duì)本網(wǎng)頁(yè)中的任何一個(gè)超級(jí)鏈接都起作用，其中這段代碼中的：
A?link ?text-decoration? none? color?blue?是說(shuō)明了超級(jí)鏈接還沒(méi)有被訪問(wèn)，它沒(méi)有下劃線，顏色為藍(lán)色。
A?visited ? color?red? text-decoration?line-through ?說(shuō)明了超級(jí)鏈接被訪問(wèn)后，它的顏色變成了紅色，有了一根刪除線。
A?active ? color?white? text-decoration?underline ?說(shuō)明超級(jí)鏈接處于活動(dòng)狀態(tài)的時(shí)候，它的顏色變成了白色，有了下劃線。
A?hover ?text-decoration?none?color?#FF0000?background-color?black?說(shuō)明鼠標(biāo)移動(dòng)到超級(jí)鏈接后，它沒(méi)有下劃線，文字顏色變成了黃色，背景顏色是黑色。
根據(jù)上面的解釋，我們可以把超級(jí)鏈接在各種狀態(tài)下的顯示顏色修改成自己喜歡的那種，以便能更好地展示自己的個(gè)性。
讓網(wǎng)頁(yè)自動(dòng)進(jìn)行“首行縮進(jìn)”
用Dreamweaver來(lái)設(shè)計(jì)網(wǎng)頁(yè)的用戶知道，在Dreamweaver中輸入空格不是那么方便，我們可以利用CSS來(lái)設(shè)計(jì)“首行縮進(jìn)”功能來(lái)彌補(bǔ)這個(gè)缺陷。打開Dreamweaver的設(shè)計(jì)界面，在該界面中找到CSS的屬性定義對(duì)話框(Style Definition for .style1 ，在該對(duì)話框的“Block”標(biāo)簽下的“text-indent”屬性定義設(shè)置項(xiàng)中來(lái)設(shè)置“首行縮進(jìn)”功能，在這里要注意的是，所謂“首行”是指每段內(nèi)容的第一行，也就是直接按回車鍵就形成了一個(gè)新的段落?？s進(jìn)最好以“em”(字符)為單位，比如：漢字編排要求每段開始縮進(jìn)兩個(gè)漢字，設(shè)置好的CSS如下所示：
<style type=”text/css”>
<–
.style1 ? text-indent? 2em?
–>
</style>
給選中文字加背景圖像
在DreamWeaver中，我們同樣可以給指定文字加上背景圖像，其操作過(guò)程與給指定文字加背景色操作類似，只不過(guò)是把選擇背景顏色換成選擇加載的背景圖像就是了。其具體操作過(guò)程是，首先我們可以做一個(gè)定義背景色的CSS，例如給這個(gè)css命名為txstyle，接著在網(wǎng)頁(yè)中選中需要設(shè)置顏色的文字，然后在工具欄中單擊一下“txstyle”就行了。下面就是一個(gè)定義背景圖像的CSS的源代碼(其中test.gif就是所加載的背景圖像)：
<style type=”text/css”>
<–
.txbgstyle ? background-image? url?test.gif ?
–>
</style>
讓背景圖案靜止不動(dòng)
當(dāng)網(wǎng)頁(yè)不能在一屏全部顯示時(shí)，我們往往借助于水平滾動(dòng)條和豎直滾動(dòng)條來(lái)瀏覽屏幕以外的內(nèi)容，移動(dòng)滾動(dòng)條時(shí)一般圖像和文字是一起移動(dòng)的，那么我們有沒(méi)有辦法使背景圖像不隨文字一起“滾動(dòng)”呢？利用CSS就可以實(shí)現(xiàn)這樣的目的，我們只要把下面這段源代碼直接放在網(wǎng)頁(yè)的<head>與</head>標(biāo)簽之間就可以了，其中bg.jpg就是網(wǎng)頁(yè)中的背景圖像，大家可以把它換成自己需要的背景圖像：
<style type=”text/css”>
<–
BODY ? background? purple url?bg.jpg ?
background-repeat?repeat-y?
background-attachment?fixed
?
–>
</style>
給指定內(nèi)容加邊框
在DreamWeaver中，我們可以利用CSS強(qiáng)大的定義功能來(lái)給某部分內(nèi)容加邊框，定義時(shí)首先打開DreamWeaver的設(shè)計(jì)界面，在該界面中找到CSS的屬性定義對(duì)話框(Style Definition for Style1 ，該對(duì)話框的“Border”設(shè)置項(xiàng)就是用來(lái)定義指定內(nèi)容邊框線的，其中“top”、“bottom”、“l(fā)eft”、“right”設(shè)置欄是分別用來(lái)定義指定內(nèi)容四周邊框線的粗細(xì)和顏色的，這些設(shè)置項(xiàng)設(shè)置好后還需要在下面的“Style”中定義線型，否則我們將看不到定義的邊框線，因?yàn)镃SS默認(rèn)的線型是“none”。下面是一個(gè)定義了上邊框?yàn)椋核{(lán)色細(xì)線；左邊框?yàn)椋壕G色中粗線的CSS源代碼：
<style type=”text/css”>
<?–
.style1 ? border? solid? border-width? thin 0px 0px medium? border-color? #0000FF black black #00FF00?
–>
</style>?}