Utiliser CSS pour contrôler dynamiquement les attributs de texte_CSS/HTML

Cet article présente en détail le sujet de l'utilisation de CSS pour contrôler dynamiquement les attributs de texte. Il utilise la fonctionnalité de modification dynamique des valeurs d'attribut​​de CSS pour définir plusieurs valeurs d'attribut​​de texte, et utilise ensuite un événement pour le déclencher. Une fois l'événement survenu, modifiez la valeur de l'attribut de texte pour atteindre l'objectif attendu.

Vous pouvez facilement utiliser CSS pour modifier dynamiquement les propriétés du texte, afin de pouvoir créer un texte qui s'agrandit, se rétrécit, change la couleur du texte, modifie l'arrière-plan du texte, l'espacement des caractères, l'espacement des lignes. et d'autres effets de page Web sont tous sous votre contrôle. N'est-ce pas un peu mystérieux ? C'est comme ça. Ça doit être compliqué, non ? Non! Après avoir lu cet article, vous comprendrez que c’est si simple.
Veuillez consulter l'exemple suivant :

1. Changez dynamiquement la taille du texte
L'effet de cet exemple est : un morceau de texte lorsque la souris est sur ce morceau. de texte, le texte devient plus grand, puis revient à sa position d'origine lorsque la souris quitte.
Méthode de production :
1. Dans Dreamweaver3, utilisez le panneau CSS pour définir deux classes CSS. L'une est nommée "style1" et définie comme une grande police (18px) ; taille de la police (12px). Le code CSS obtenu est le suivant :

Les internautes qui n'utilisent pas Dreamweaver peuvent copier le code ci-dessus directement entre le
et le

du code de la page Web. 2. Ajoutez ce code à la balise de ce texte : onmouseover="this.className=''style1''" onmouseout="this.className=''style2''". A ce stade, la production est terminée, et le code source du texte qui peut produire l'effet est le suivant :

Lorsque la souris est sur ce texte, le texte devient plus grand, et lorsque le la souris est éloignée, elle devient plus petite.
Les internautes qui n'utilisent pas Dreamweaver n'ont qu'à modifier le code comme ci-dessus. Vous pouvez le prévisualiser pour voir l'effet réel.

2. Changez dynamiquement la taille, la couleur et la gras du texte en même temps
L'effet de cet exemple est le suivant : lorsque la souris est sur le texte, la taille , la couleur et l'audace du texte changent, il reviendra à son état d'origine lorsque la souris sera éloignée. La méthode de production de cet exemple est la même que celle de l'exemple 1. La seule différence est que différents attributs de texte sont définis en CSS, donc la méthode de production ne sera pas répétée. Le code CSS ajouté entre
et
est :

La production est terminée. Le code source du texte qui peut produire l'effet est. comme suit :

Déplacez la souris sur ce texte pour modifier la taille, la couleur et la gras du texte, et il reviendra à son état d'origine lorsque la souris partira.
3. Changer dynamiquement l'arrière-plan d'une partie du texte

L'effet de cet exemple est le suivant : lorsque la souris se déplace sur une certaine ligne de texte, l'arrière-plan de une partie du texte dans la ligne change. L'autre contexte de notre activité reste inchangé.

Il y a quelques changements dans la méthode de production entre cet exemple et l'exemple ci-dessus. L'exemple ci-dessus modifie les attributs de l'ensemble du texte, donc l'événement déclencheur est chargé sur la marque "P" alors que dans cet exemple, seulement un ; section de texte est modifiée. La couleur d'arrière-plan d'une partie du texte, vous devez donc d'abord utiliser la balise "Span" pour entourer le texte dont vous souhaitez modifier l'arrière-plan, puis charger l'événement déclencheur dans la balise "Span". . Le code CSS ajouté entre et

dans cet exemple est :

Une fois la production terminée, le code source du texte qui peut produire l'effet est le suivant :


Lorsque la souris passe sur ce texte, le fond change, mais le fond de l'autre paragraphe de cette ligne reste inchangé.

4. Ajouter dynamiquement des icônes aux hyperliens
L'effet de cet exemple est le suivant : lorsque la souris passe sur un hyperlien, une image apparaîtra à gauche de celui-ci, la souris s'éloigne et l'image disparaît. La méthode de production de cet exemple est la même que la précédente, qui consiste à changer l'arrière-plan du texte, mais il y a quelques points à prendre en compte lors de la création :
1 Lors de la définition de l'arrière-plan CSS. , sélectionnez l'arrière-plan de l'image et définissez Lors de la définition du paramètre "répéter" de l'arrière-plan de l'image, sélectionnez "pas de répétition" (non carrelé
2 Lors de la définition d'un lien hypertexte, réservez un espace pour l'image sur le); côté gauche de celui-ci ;
3. Les événements déclencheurs sont chargés sur des hyperliens. Le code CSS ajouté entre et dans cet exemple est : La production est terminée, l'hyperlien qui peut produire des effets Le le code source est comme ceci : Déplacez la souris sur En modifiant dynamiquement les propriétés CSS du texte, vous pouvez également créer de nombreux effets spéciaux, mais la méthode est fondamentalement la même , je ne donnerai donc pas d'exemple un par un. Une fois que vous maîtriserez la méthode, vous pourrez utiliser votre imagination pour créer.