巧用CSS動態控制文本的屬性
來源:互聯網
上載者:User
css|動態|控制 用CSS可以很方便地動態改變文本的屬性,從而可製作出動態地使文字變大、縮小、改變文字顏色、改變文本的背景、字間距、行間距等等網頁特效,一切都在你的掌握之中。是不是有點玄?事實就是如此。那一定很複雜吧?不!看完本文,你就會明白,原來這麼簡單。
原理:利用CSS的屬性值可動態改變的特點。
思路:定義文本的多種屬性值,再用一個事件來觸發,一旦事件發生,則改變文字屬性值,從而達到預期目的。請看下面的樣本:
一、動態改變文字大小
這個例子的效果是:一段文本,當滑鼠在這段文本上,文字變大,滑鼠離開時又恢複原樣。
製作方法:
1、在Dreamweaver3中,用CSS面板定義兩個CSS的class,一個取名為“style1”定義為大號字(18px);另一個取名為“style2”,定義為小號字(12px)。獲得的CSS代碼如下:
<style type="text/css">
<!--
.style1 { font-size:18px}
.style2 { font-size:12px}
-->
</style>
不使用Dreamweaver的網友可把上述代碼直接複製到網頁代碼的<head>與</head>之間。
2、在這段文字的<P>標記中加入這段代碼: onmouseout= "this.className='style2'"。至此,製作完成,能產生效果的那段文字的原始碼是這樣的:
<p ><font color="#FF0000">滑鼠在這段文字上,文字變大,滑鼠離開時變小。</font></p>
不使用Dreamweaver的網友只要把代碼改成上面這樣就行了,預覽一下就可看到實際效果了。
二、同時動態地改變文字的大小、顏色、加粗
這個例子的效果是:滑鼠在文字上,文字的大小、顏色發生改變且加粗,滑鼠離開時恢複原樣。
這個例子的製作方法與例一相同,不同的只是在CSS中定義了不同的文字屬性,所以製作方法不再重複。在<head>與</head>之間增加的CSS代碼為:
<style type="text/css">
<!--
.style1 { font: bold 16px ; color: #0000FF}
.style2 { font-size:12px; color:#00ff00}
-->
</style>
製作完成,能產生效果的那段文字的原始碼是這樣的:
<p class="style4" >滑鼠在這段文字上,改變文字的大小、顏色、加粗,滑鼠離開時恢複原樣。</p>
三、動態改變部分文本的背景
這個例子的效果是:當滑鼠移到某行文本上,這行一部分文本的背景改變了,而本行的另一段背景卻不變。
這個例子與上面的例子在製作方法上有點改變,上面的例子都是對整段文本的屬性進行改變,所以把觸發事件載入在“P”標記上;而本例是只改變一段文本的一部分的背景顏色,所以應先用"Span"標記把要改變背景的文本括起來,然後把觸發事件載入到“Span”標記上。
本例在<head>與</head>之間增加的CSS代碼為:
<style type="text/css">
<!--
.style1 { background: #99CCFF}
.style2 { background: #FFFFFF}
-->
</style>
製作完成,能產生效果的那段文字的原始碼是這樣的:
<p><span class="style6" >當滑鼠移到這段文本上,背景改變了,</span>而本行的另一段背景卻不變。</p>
四、給超級連結動態加表徵圖
這個例子的效果是:當滑鼠移到某個超級連結上,它的左邊會出現一個圖象,滑鼠移開,圖象消失。
本例在製作方法上與上例相同,都是改變文本的背景,但在製作時要注意幾點:
1、在設定CSS的背景時是選擇圖象背景,並在設定圖象背景的“repeat”參數時要選擇“no-repeat”(不平鋪);
2、在設定超級連結時,在其左邊要預留出圖象的位置;
3、觸發事件要載入在超級連結上。
本例在<head>與</head>之間增加的CSS代碼為:
<style type="text/css">
<!--
.style1 { background: url(image/dot.gif) no-repeat; }
.style2 { background: #FFFFFF}
-->
</style>
製作完成,能產生效果的那個超級連結的原始碼是這樣的:
<a href="#" >將滑鼠移動過來</a>
通過動態改變文本的CSS屬性,還可以做出許多特效,但方法基本相同,不再一一例舉了,掌握了方法,你就可以發揮想象力去創作了。