您的位置:首頁 > 網頁制作 > CSS

巧用CSS動態控制文本的屬性

日期:2006-02-03 00:00:00 點擊: 來自: 作者:
用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>標記中加入這段代碼:onmouseover="this.className='style1'" onmouseout= "this.className='style2'"。至此,制作完成,能產生效果的那段文字的源代碼是這樣的:
<p onmouseover="this.className='style1'" onmouseout="this.className='style2'"><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" onmouseover="this.className='style1'" onmouseout="this.className='style2'">鼠標在這段文字上,改變文字的大小、顏色、加粗,鼠標離開時恢復原樣。</p>

三、動態改變部分文本的背景
這個例子的效果是:當鼠標移到某行文本上,這行一部分文本的背景改變了,而本行的另一段背景卻不變。
這個例子與上面的例子在制作方法上有點改變,上面的例子都是對整段文本的屬性進行改變,所以把觸發事件加載在“P”標記上;而本例是只改變一段文本的一部分的背景顏色,所以應先用"Span"標記把要改變背景的文本括起來,然后把觸發事件加載到“Span”標記上。
本例在<head>與</head>之間增加的CSS代碼為:
<style type="text/css">
<!--
.style1 { background: #99CCFF}
.style2 { background: #FFFFFF}
-->
</style>
制作完成,能產生效果的那段文字的源代碼是這樣的:
<p><span class="style6" onmouseover="this.className='style1'" onmouseout="this.className='style1'">當鼠標移到這段文本上,背景改變了,</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="#" onmouseover="this.className='style1'" onmouseout="this.className='style2'">將鼠標移動過來</a>

通過動態改變文本的CSS屬性,還可以做出許多特效,但方法基本相同,不再一一例舉了,掌握了方法,你就可以發揮想象力去創作了。
More..素材圖片 Picture Navigation
CSS熱門 Class Hot
CSS推薦 Class Commend
版權所有:中國網站資源 2005- 未經授權禁止復制或建立鏡像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.21ftd.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.
雷火电竞 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>