Verwenden Sie CSS, um Textattribute_CSS/HTML dynamisch zu steuern

Dieser Artikel führt ausführlich in das Thema der Verwendung von CSS zur dynamischen Steuerung von Textattributen ein. Er nutzt die Funktion der dynamischen Änderung von Attributwerten von CSS, um mehrere Attributwerte des Textes zu definieren. und verwendet dann ein Ereignis, um es auszulösen. Sobald das Ereignis eintritt, ändern Sie den Textattributwert, um den erwarteten Zweck zu erreichen.

Sie können CSS ganz einfach verwenden, um die Eigenschaften von Text dynamisch zu ändern, sodass Sie Text erstellen können, der sich dynamisch vergrößert, verkleinert, die Textfarbe ändert, den Texthintergrund, den Zeichenabstand und den Zeilenabstand ändert und andere Webseiteneffekte unterliegen Ihrer Kontrolle. Ist es nicht ein bisschen mysteriös? Das ist einfach so. Das muss kompliziert sein, oder? NEIN! Nachdem Sie diesen Artikel gelesen haben, werden Sie verstehen, dass es so einfach ist.
Bitte sehen Sie sich das folgende Beispiel an:

1. Ändern Sie die Textgröße dynamisch
Der Effekt dieses Beispiels ist: ein Stück Text, wenn sich die Maus auf diesem Stück befindet Der Text wird größer und kehrt beim Verlassen der Maus zur ursprünglichen Position zurück.
Produktionsmethode:
1. Definieren Sie in Dreamweaver3 zwei CSS-Klassen mit dem Namen „style1“ und der anderen mit dem Namen „style2“. Schriftgröße (12px). Der erhaltene CSS-Code lautet wie folgt:

Internetnutzer, die Dreamweaver nicht verwenden, können den obigen Code direkt zwischen
und

des Webseitencodes kopieren. 2. Fügen Sie diesen Code zum -Tag dieses Textes hinzu: onmouseover="this.className=''style1''" onmouseout="this.className=''style2''". Zu diesem Zeitpunkt ist die Produktion abgeschlossen und der Quellcode des Textes, der den Effekt erzeugen kann, lautet wie folgt:

Wenn sich die Maus auf diesem Text befindet, wird der Text größer, und wenn der Wird die Maus wegbewegt, wird sie kleiner.
Internetnutzer, die Dreamweaver nicht verwenden, müssen nur den Code wie oben beschrieben ändern. Sie können eine Vorschau anzeigen, um den tatsächlichen Effekt zu sehen.

2. Ändern Sie gleichzeitig dynamisch die Größe, Farbe und Fettigkeit des Texts
Der Effekt dieses Beispiels ist: Wenn sich die Maus auf dem Text befindet, ändert sich die Größe , Farbe und Fettstärke des Textes ändern sich, er kehrt in seinen ursprünglichen Zustand zurück, wenn die Maus wegbewegt wird. Die Produktionsmethode dieses Beispiels ist die gleiche wie in Beispiel 1. Der einzige Unterschied besteht darin, dass in CSS unterschiedliche Textattribute definiert sind, sodass die Produktionsmethode nicht wiederholt wird. Der zwischen
und
hinzugefügte CSS-Code lautet:

Der Quellcode des Textes, der den Effekt erzeugen kann, ist abgeschlossen wie folgt:

Bewegen Sie die Maus über diesen Text, um die Größe, Farbe und Fettstärke des Texts zu ändern. Wenn Sie die Maus verlassen, kehrt er in den ursprünglichen Zustand zurück.
3. Den Hintergrund eines Teils des Textes dynamisch ändern

Der Effekt dieses Beispiels ist: Wenn die Maus über eine bestimmte Textzeile bewegt wird, wird der Hintergrund von Ein Teil des Textes in der Zeile ändert sich. Der andere Hintergrund unseres Geschäfts bleibt unverändert.

Zwischen diesem Beispiel und dem obigen Beispiel gibt es einige Änderungen in der Produktionsmethode. Das obige Beispiel ändert die Attribute des gesamten Textes, sodass das Triggerereignis auf die Markierung „P“ geladen wird, während in diesem Beispiel nur a Da sich die Hintergrundfarbe eines Teils des Textes ändert, sollten Sie zuerst das Tag „Span“ verwenden, um den Text einzuschließen, dessen Hintergrund Sie ändern möchten, und dann das Triggerereignis in das Tag „Span“ laden. Der in diesem Beispiel zwischen und

hinzugefügte CSS-Code lautet:

Nach Abschluss der Produktion lautet der Quellcode des Textes, der den Effekt erzeugen kann, wie folgt:


Wenn die Maus über diesen Text fährt, ändert sich der Hintergrund, aber der Hintergrund des anderen Absatzes in dieser Zeile bleibt unverändert.

4. Fügen Sie dynamisch Symbole zu Hyperlinks hinzu
Der Effekt dieses Beispiels ist: Wenn die Maus über einen Hyperlink bewegt wird, erscheint links davon ein Bild. Die Maus bewegt sich weg und das Bild verschwindet. Die Produktionsmethode dieses Beispiels ist die gleiche wie im vorherigen Beispiel. Bei beiden soll der Hintergrund des Textes geändert werden. Bei der Erstellung sind jedoch einige Punkte zu beachten:
1 CSS-Hintergrund, wählen Sie den Bildhintergrund aus und legen Sie beim Festlegen des Parameters „Wiederholen“ des Bildhintergrunds „Keine Wiederholung“ (nicht gekachelt) fest. Reservieren Sie beim Festlegen des Hyperlinks die Position des Bildes die linke Seite davon;
3. Triggerereignisse werden auf Hyperlinks geladen.
Der in diesem Beispiel zwischen und hinzugefügte CSS-Code lautet: Die Produktion ist abgeschlossen, der Hyperlink kann Effekte erzeugen Der Quellcode sieht so aus: Bewegen Sie die Maus darüber Durch dynamisches Ändern der CSS-Eigenschaften des Textes können Sie auch viele Spezialeffekte erstellen, aber die Methode ist grundsätzlich dieselbe Daher werde ich nicht jedes einzelne Beispiel nennen. Sobald Sie die Methode beherrschen, können Sie Ihrer Fantasie freien Lauf lassen.