|
|
用CSS可以很方便地動態(tài)改變文本的屬性，從而可制作出動態(tài)地使文字變大、縮小、改變文字顏色、改變文本的背景、字間距、行間距等等網(wǎng)頁特效，一切都在你的掌握之中。是不是有點玄？事實就是如此。那一定很復(fù)雜吧？不！看完本文，你就會明白，原來這么簡單。
請看下面的示例：
一、動態(tài)改變文字大小
這個例子的效果是：一段文本，當鼠標在這段文本上，文字變大，鼠標離開時又恢復(fù)原樣。
制作方法：
1、在Dreamweaver3中，用CSS面板定義兩個CSS的class，一個取名為“style1”定義為大號字（18px）；另一個取名為“style2”，定義為小號字（12px）。獲得的CSS代碼如下：
<style type="text/css">
<!--
.style1 { font-size:18px}
.style2 { font-size:12px}
-->
</style>
不使用Dreamweaver的網(wǎng)友可把上述代碼直接復(fù)制到網(wǎng)頁代碼的<head>與</head>之間。
2、 在這段文字的<P>標記中加入這段代碼：onmouseover="this.className=''style1''" onmouseout= "this.className=''style2''"。至此，制作完成，能產(chǎn)生效果的那段文字的源代碼是這樣的：
<p onmouseover="this.className=''style1''" onmouseout="this.className=''style2''"><font color="#FF0000">鼠標在這段文字上，文字變大，鼠標離開時變小。</font></p>
不使用Dreamweaver的網(wǎng)友只要把代碼改成上面這樣就行了，預(yù)覽一下就可看到實際效果了。
二、同時動態(tài)地改變文字的大小、顏色、加粗
這個例子的效果是：鼠標在文字上，文字的大小、顏色發(fā)生改變且加粗，鼠標離開時恢復(fù)原樣。
這個例子的制作方法與例一相同，不同的只是在CSS中定義了不同的文字屬性，所以制作方法不再重復(fù)。在<head>與</head>之間增加的CSS代碼為：
<style type="text/css">
<!--
.style1 { font: bold 16px ; color: #0000FF}
.style2 { font-size:12px; color:#00ff00}
-->
</style>
制作完成，能產(chǎn)生效果的那段文字的源代碼是這樣的：
<p class="style4" onmouseover="this.className=''style1''" onmouseout="this.className=''style2''">鼠標在這段文字上，改變文字的大小、顏色、加粗，鼠標離開時恢復(fù)原 樣。</p>
三、動態(tài)改變部分文本的背景
這個例子的效果是：當鼠標移到某行文本上，這行一部分文本的背景改變了，而本行的另一段背景卻不變。
這個例子與上面的例子在制作方法上有點改變，上面的例子都是對整段文本的屬性進行改變，所以把觸發(fā)事件加載在“P”標記上；而本例是只改變一段文本的一部分的背景顏色，所以應(yīng)先用"Span"標記把要改變背景的文本括起來，然后把觸發(fā)事件加載到“Span”標記上。
本例在<head>與</head>之間增加的CSS代碼為：
<style type="text/css">
<!--
.style1 { background: #99CCFF}
.style2 { background: #FFFFFF}
-->
</style>
制作完成，能產(chǎn)生效果的那段文字的源代碼是這樣的：
<p><span class="style6" onmouseover="this.className=''style1''" onmouseout="this.className=''style1''">當鼠標移到這段文本上，背景改變了，</span>而本 行的另一段背景卻不變。</p>
四、給超級鏈接動態(tài)加圖標
這個例子的效果是：當鼠標移到某個超級鏈接上，它的左邊會出現(xiàn)一個圖象，鼠標移開，圖象消失。
本例在制作方法上與上例相同，都是改變文本的背景，但在制作時要注意幾點：
1、在設(shè)置CSS的背景時是選擇圖象背景，并在設(shè)置圖象背景的“repeat”參數(shù)時要選擇“no-repeat”（不平鋪）；
2、在設(shè)置超級鏈接時，在其左邊要預(yù)留出圖象的位置；
3、觸發(fā)事件要加載在超級鏈接上。
本例在<head>與</head>之間增加的CSS代碼為：
<style type="text/css">
<!--
.style1 { background: url(image/dot.gif) no-repeat; }
.style2 { background: #FFFFFF}
-->
</style>
制作完成，能產(chǎn)生效果的那個超級鏈接的源代碼是這樣的：
<a href="#" onmouseover="this.className=''style1''" onmouseout="this.className=''style2''">將鼠標移動過來</a>
通過動態(tài)改變文本的CSS屬性，還可以做出許多特效，但方法基本相同，不再一一例舉了，掌握了方法，你就可以發(fā)揮想象力去創(chuàng)作了。
HTML/CSS技術(shù)：用CSS動態(tài)控制文本屬性，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
