Use CSS to dynamically control text attributes_CSS/HTML

This article introduces in detail the topic of using CSS to dynamically control text attributes. It uses the feature of dynamically changing attribute values ​​​​of CSS to define multiple attribute values ​​​​of text, and then uses an event to trigger it. Once the event occurs , then change the text attribute value to achieve the expected purpose.

You can easily use CSS to dynamically change the properties of text, so that you can create text that dynamically enlarges, shrinks, changes text color, changes text background, character spacing, line Spacing and other web page effects are all under your control. Isn’t it a bit mysterious? That's just the way it is. That must be complicated, right? No! After reading this article, you will understand that it is so simple.
Please see the following example:

1. Dynamically change the text size
The effect of this example is: a piece of text. When the mouse is on this piece of text, the text becomes larger. , and then return to the original position when the mouse leaves.
Production method:
1. In Dreamweaver3, use the CSS panel to define two CSS classes. One is named "style1" and defined as large font (18px); the other is named "style2". Defined as small font size (12px). The obtained CSS code is as follows:

Netizens who do not use Dreamweaver can copy the above code directly between the
and

of the web page code. 2. Add this code to the tag of this text: onmouseover="this.className=''style1''" onmouseout="this.className=''style2''". At this point, the production is completed, and the source code of the text that can produce the effect is as follows:

When the mouse is on this text, the text becomes larger, and when the mouse is moved away, it becomes smaller.
Netizens who do not use Dreamweaver only need to change the code to the above. You can preview it to see the actual effect.

2. Dynamically change the size, color, and boldness of the text at the same time
The effect of this example is: when the mouse is on the text, the size, color, and boldness of the text change. , it will return to its original state when the mouse is moved away. The production method of this example is the same as Example 1. The only difference is that different text attributes are defined in CSS, so the production method will not be repeated. The CSS code added between
and
is:

The production is completed. The source code of the text that can produce the effect is as follows :

Move the mouse over this text to change the size, color, and boldness of the text, and it will return to the original state when the mouse leaves.
3. Dynamically change the background of part of the text

The effect of this example is: when the mouse moves over a certain line of text, the background of part of the text in the line changes. The other background of our business remains unchanged.

There are some changes in the production method between this example and the above example. The above example changes the attributes of the entire text, so the trigger event is loaded on the "P" mark; while in this example, only a section of text is changed. The background color of a part of the text, so you should first use the "Span" tag to enclose the text that you want to change the background, and then load the trigger event to the "Span" tag. The CSS code added between and

in this example is:

After the production is completed, the source code of the text that can produce the effect is as follows:


When the mouse moves over this text, the background changes, but the background of the other paragraph in this line remains unchanged.

4. Dynamically add icons to hyperlinks
The effect of this example is: when the mouse moves over a hyperlink, an image will appear to the left of it , the mouse moves away and the image disappears. The production method of this example is the same as the previous one, which is to change the background of the text, but there are a few points to pay attention to when making:
1. When setting the CSS background, select the image background, and set When setting the "repeat" parameter of the image background, select "no-repeat" (non-tiled);
2. When setting a hyperlink, reserve a space for the image on the left side of it;
3. Trigger Events are loaded on hyperlinks. The CSS code added between and in this example is: The production is completed, the hyperlink that can produce effects The source code is like this: Move the mouse over By dynamically changing the CSS properties of the text, you can also create many special effects, but the method is basically the same, so I won’t give an example one by one. Once you have mastered the method, you can use your imagination to create.