This paper introduces the theme of dynamic control of text attributes with CSS, using the characteristics of the CSS attribute value can be changed dynamically, define various attribute values of the text, and then use an event to trigger, once the event occurs, change the value of the Text property, so as to achieve the intended purpose.
CSS can be very convenient to dynamically change the properties of the text, so that you can create dynamic text to become large, narrow, change text color, change the text background, word spacing, line spacing and so on web effects, everything in your grasp. Is it a little bit hyun? This is the truth. That must be complicated, isn't it? No! After reading this, you will understand that it is so simple.
Take a look at the following example:
One, dynamic change text size
The effect of this example is: a paragraph of text, when the mouse on the text, the text becomes larger, the mouse left and back to the original.
Production method:
1, in the Dreamweaver3, with the CSS panel to define two CSS class, a named "Style1" defined as a large character (18px), and another named "Style2", defined as small characters (12px). Get the CSS code as follows:
<style type= "Text/css" >
<!--
. style1 {font-size:18px}
. style2 {font-size:12px}
-->
</style>
Users who do not use Dreamweaver can copy the above code directly to the 2. Add this code to the <P> tag of this paragraph: onmouseover= "This.classname= ' Style1" "onmouseout=" This.classname= "Style2" ". So far, the completion of the production, can produce the effect of the text of the source code is such:
<p onmouseover= "This.classname= ' Style1" "onmouseout=" This.classname= "Style2" "><font color=" #FF0000 " > Mouse in this paragraph of text, the text becomes larger, the mouse leaves time is small. </font></p>
Users who do not use Dreamweaver as long as the code to change to the above line, the preview can see the actual effect.
second, at the same time dynamically changing the text size, color, bold
The effect of this example is: the mouse on the text, the size of the text, color changes and bold, the mouse left back to the original.
This example is made in the same way as the example, the different only in the CSS definition of different text attributes, so the production method is not repeated. The CSS code added between <style type= "Text/css" >
<!--
. style1 {font:bold 16px; color: #0000FF}
. style2 {font-size:12px; color: #00ff00}
-->
</style>
The source code of the text that can produce the result is this:
<p class= "Style4" onmouseover= "This.classname= ' Style1" "onmouseout=" This.classname= ' Style2 ' "" "> Mouse in this text, Change the size, color, and thickness of the text, and return to the original when the mouse leaves. </p>
dynamic Change the background of some text
The effect of this example is that when the mouse is moved to a text, the background of that part of the line changes, while the other section of the bank's background is unchanged.
This example is somewhat different from the above example in making the method, the above example changes the properties of the entire text so that the triggering event is loaded on the "P" tag, and this example changes the background color of only one part of the text, so you should enclose the text that you want to change the background with a "Span" tag, The triggering event is then loaded onto the Span tag.
In this example, the CSS code added between <style type= "Text/css" >
<!--
. style1 {background: #99CCFF}
. style2 {background: #FFFFFF}
-->
</style>
The source code of the text that can produce the result is this:
<p><span class= "Style6" onmouseover= "this.classname=" Style1 "onmouseout=" "This.classname=" " > When the mouse moves over the text, the background changes,</span> and the other part of the line is unchanged. </p>
four, to the hyperlink dynamic add icon
The effect of this example is that when the mouse moves over a hyperlink, an image appears on its left side, the mouse moves away, and the image disappears.
This example in the production method is the same as the previous example, is to change the background of the text, but in the production should pay attention to several points:
1, when setting the background of the CSS is to select the image background, and in the setting of the image background "repeat" parameters to choose "No-repeat" (uneven);
2. When the hyperlink is set, the position of the image should be reserved on the left side;
3, trigger the event to load on the hyperlink.
In this example, the CSS code added between <style type= "Text/css" >
<!--
. style1 {Background:url (image/dot.gif) no-repeat;}
. style2 {background: #FFFFFF}
-->
</style>
The source code of the hyperlink that produced the result is this:
<a href= "#" onmouseover= "This.classname= ' Style1" "onmouseout=" This.classname= "Style2" "> Move the mouse over </a >
By dynamically changing the CSS properties of the text, you can also make many special effects, but the method is basically the same, no longer one by one examples, mastered the method, you can play the imagination to create.
