CSS remplacer le texte

«Vous avez peut-être rencontré des animations sur des sites Web, où planer sur un texte le fait remplacer par un autre. Cette animation n'a pas eu lieu d'elle-même, mais ce serait un effet d'un style utilisé à l'arrière du code. Dans HTML, nous pouvons effectuer cette opération en utilisant certaines propriétés de style dans la balise de style CSS. De plus, nous pouvons remplacer le texte de certains liens par un autre par la couleur remplacée également. Dans ce guide de tutoriel aujourd'hui, nous examinerons quelques exemples HTML pour effectuer le remplacement de texte."

Exemple 01

Commençons par l'utilisation du décalage «After» pour remplacer un texte par un nouveau texte. Pour créer une page Web HTML, nous utiliserons toutes ses balises standard. La toute première et la balise principale est la balise HTML, et tous les autres contenus des balises sont venus à l'intérieur. Donc, nous devons nous assurer que l'ouverture et la fermeture de cette balise ne manquent pas notre code. Nous avons commencé cette balise, suivie de la balise «tête» qui a été un incontournable pour effectuer un style d'en-tête et d'autres choses. Nous y avons ajouté la balise de style. Vous pouvez également essayer la balise «Title» à l'intérieur avant la balise de style pour donner à votre page HTML un nom simple.

Dans la zone du corps de notre page HTML, tous les autres éléments seraient ajoutés entre l'ouverture et la fermeture de la balise «Body», je.e., et . Nous avons utilisé le

Tag pour ajouter un paragraphe à notre corps de page HTML. Ce

Le balise a été classé avec une classe «remplacer» à utiliser pour le style. Le

La balise est utilisée pour fermer cette balise après avoir ajouté des données de texte. La balise de style a été utilisée dans la balise «tête», et la classe «.remplacer »a été utilisé pour ajouter un style au paragraphe de cette page. La propriété de visibilité est définie sur «Hidden» alors que sa position a été définie sur un parent en fonction du début d'une page. Le décalage «After» a été utilisé à la ligne suivante pour que la classe particulière change sa visibilité sur «visible» et positionne en «absolu». Cela signifie qu'après le texte d'origine, le nouveau texte sera visible et sa position sera absolue.

La marge supérieure et gauche a été définie sur 0, tandis que la propriété de contenu est utilisée pour ajouter un autre texte à la place du texte d'origine. En raison du remplacement, le texte d'origine sera caché selon la «visibilité» définie sur «Hidden». Maintenant, nous pouvons exécuter notre code car il est complet.

Maintenant, nous avons le résultat de la croisement montré sur l'onglet du navigateur. Vous pouvez voir que le texte original était «Je serai remplacé», tandis que le texte montré est «Je suis un nouveau texte…». Il indique que l'utilisation de la propriété de visibilité sur «cachée» et «visible» ainsi que la propriété «contenu» peuvent vous faire remplacer un texte par un autre.

Exemple # 02

Jetons un coup d'œil à un autre exemple de HTML pour utiliser le décalage «After» sans la propriété «visibilité» et voir s'il remplace le texte ou non. Ainsi, nous utilisons les mêmes balises d'ouverture et de fermeture HTML pour créer un fichier HTML standard pour l'exécution sur le navigateur. Dans la balise «corps» de ce code HTML, nous avons utilisé le

Tag pour créer un paragraphe dans notre page HTML et lui a attribué une classe «remplacer» pour la classification au niveau du style. Ce paragraphe contient également une étiquette de portée avec le texte pour marquer le texte dedans. Les étiquettes de portée et de paragraphe sont fermées les uns après les autres.

Après cela, nous avons également fermé l'étiquette corporelle. La balise de style utilise la classe «Remplacer» pour la balise de span pour utiliser la propriété «Affichage» comme aucun. Cela signifie qu'aucune majoration ne sera appliquée au texte dans la période. Le décalage «After» a été utilisé avec la classe «Remplacer» pour ajouter la propriété «Contenu» avec un nouveau texte pour remplacer l'ancien texte dans l'étiquette de paragraphe de notre corps HTML. Ce code est maintenant prêt pour l'exécution.

Après exécution de ce code dans le navigateur Chrome via le menu «Exécuter» du code Visual Studio, nous avons le texte remplacé au lieu de celui d'origine sur la page HTML.

Exemple # 03

Dans cet exemple, vous comprendrez la méthode pour remplacer le texte sur planant. La partie corporelle de ce code contient une étiquette de cap simple «H1» pour ajouter une plus grande taille standard de ruban dans la page Web HTML lors de l'exécution. Après avoir fermé l'étiquette de cap comme «, Nous avons ajouté une balise «div» pour créer un nouveau conteneur dans la page HTML. Ce conteneur contiendrait une balise d'ancrage pour ajouter un lien à un texte, je.e., L'URL de Google a été utilisée pour lier. La balise d'en-tête a été utilisée pour créer un titre de taille 2, suivi de la balise de span avec du texte pour le balisage. La balise d'en-tête, la balise d'ancrage et la balise «div» ont été terminées ici. Donc, nous avons fermé ces 4 balises en utilisant leurs balises de clôture I.e. ,

, , .

Après cela, nous n'avons pas encore besoin de rien à utiliser pour cette page HTML. Ainsi, nous avons également fermé le corps, je.e., en utilisant la balise. Le panneau de balise d'ancrage suivi du décalage «Hover» a été utilisé à sa balise «Span» d'enfant pour définir l'écran sur aucun. Le décalage «visité» est utilisé pour indiquer que la couleur d'un lien serait verte lors des visites de page. Le décalage «avant» est utilisé sur planant pour remplacer le contenu d'origine par le nouveau contenu après le plan, je.e., "Cliquez ici pour visiter Google". En survolant le texte d'origine, la couleur d'un nouveau texte sera changée en cramoisi. Si vous appuyez sur la touche gauche en survolant le texte d'origine sans relâcher la touche, le décalage actif modifiera la couleur d'un nouveau texte en bleu. Les étiquettes de style et de tête sont maintenant fermées.

Après avoir exécuté ce code via le code vs dans Chrome, nous avons une rubrique et un lien vers Google. Le lien souligné est illustré en couleur verte.

Lorsque vous survolez votre pointeur de souris sur le texte «Appuyez sur moi», son texte a été remplacé par un nouveau, et la couleur du nouveau texte est également mise à jour, je.e., cramoisi. Lorsque vous appuyez sur le lien sans relâcher le bouton, il changera sa couleur en bleu à coup sûr.

Conclusion

Nous avons terminé avec les illustrations et l'explication du concept de remplacement de texte CSS dans le script HTML. Nous avons mis en œuvre un total de 3 exemples en HTML pour remplacer un texte par un autre. Pour cela, nous avons discuté de l'utilisation du décalage «After» avec sa propriété de visibilité, sa propriété de position et sa propriété de contenu. Après cela, nous avons également implémenté la méthode pour remplacer un texte d'un lien par un autre texte ainsi que son changement de couleur via les balises de survol suivie du décalage «avant» et de la propriété de contenu.