CSS Couleur de soulignement

«Le soulignement est quelque chose que nous dessinons sous la phrase ou le mot. Nous avons différentes couleurs de ce soulignement disponible en CSS. Nous pouvons mettre les couleurs dans la propriété «Text-Decoration-Color» dans «RVB», «RGBA», «HSL» et «HSLA». Lorsque nous voulons ajuster la couleur du soulignement, nous utilisons la propriété «Text-Decoration-Color» dans CSS. Cette propriété nous offre la possibilité de changer la couleur du soulignement. Dans ce tutoriel, nous utiliserons cette propriété et explorera ici plusieurs exemples pour comprendre cette propriété de couleur texto-decoration."

Exemple 1

Créez le fichier HTML pour commencer ce code. Nous allons commencer par créer un nouveau fichier, puis sélectionner HTML comme langue dans le code Visual Studio. Enfin, nous ajoutons le «!"Au fichier que nous venons de générer. Ce fichier contient toutes les balises fondamentales du HTML. Tout ce que nous avons à faire maintenant est de saisir le corps HTML et le lien du fichier CSS dans la «tête."Dans le corps, nous plaçons un cap et un paragraphe dans ce code. Nous créons également du texte audacieux dans ce code. Maintenant, nous déménageons pour créer le fichier CSS dans lequel nous soulignons l'en-tête et le paragraphe, puis modifier la couleur de ce soulignement. Tout cela sera fait en utilisant les propriétés CSS.

Nous alignons tous les éléments corporels du HTML ici dans le «centre» à l'aide de la propriété «Text-Align». Ensuite, nous utilisons la propriété «Text-Decoration» et placez le mot-clé «souligner» pour la valeur de cette propriété. Nous utilisons cette propriété ici pour générer le soulignement pour le titre. Nous avons également défini la couleur de ce soulignement en utilisant la propriété «Text-Decoration-Color».

Ici, nous avons défini la couleur de ce soulignement sur «Black."Nous générons également un autre soulignement en utilisant la même propriété" Text-Decoration ", et cette fois, nous générons ce soulignement pour le paragraphe. Nous changeons la couleur de ce soulignement en «vert» en utilisant la propriété «Text-Decoration-Color». Nous avons également du texte audacieux, nous allons donc générer un soulignement pour ce texte audacieux à l'aide de la propriété «Text-Decoration» et également changer sa couleur en «rouge» en utilisant la propriété «Text-Decoration-Color».

La sortie est là, et vous pouvez observer que la couleur du soulignement de l'en-tête semble «noir», le texte du paragraphe apparaît en «vert» et le soulignement du texte audacieux est en «rouge."

Exemple n ° 2

Nous utilisons le même code HTML de l'exemple 1 ici. Nous utilisons d'abord la propriété «Text-Align» pour tous les éléments du corps, et la «taille de police» de l'élément corporel est «24px». Nous «soulignons» tous les éléments séparément à l'aide de «Text-Decoration», et nous modifions la couleur du soulignement à l'aide de «Text-Decoration-Color."Ici, nous utilisons la couleur" RVB "comme valeur de cette propriété" Text-Decoration-Color ". Pour «H1», nous avons défini «RVB (13, 128, 13)», qui est utilisé pour la teinte «verte». Ensuite, nous avons «P», dans lequel nous utilisons «RVB (40. 40, 184) », qui représente la couleur« bleue ». Pour le dernier texte audacieux, «B», nous utilisons «RVB (216, 69, 15)», qui représente «Orange."

Le résultat est illustré ci-dessous, et vous pouvez voir que la couleur du soulignement de l'en-tête est «vert», le texte du paragraphe est «bleu» et le texte audacieux souligne «Orange."

Exemple n ° 3

Encore une fois, nous utilisons le code HTML de l'exemple 1 et relions ce fichier CSS donné au fichier html de l'exemple 1. Tout le texte du corps HTML s'aligne sur le «Centre» et le «24px» de la taille de la police."Nous soulignons tous les éléments de la tête, du paragraphe et du texte audacieux de la même manière que nous avons décrit dans l'exemple ci-dessus. Ici, nous modifions la couleur de ces soulignements en utilisant «la couleur du texte-décoration» et en attribuant des valeurs de la couleur sous la forme «HSL». Le «HSL (0, 100%, 50%)» que nous utilisons ici pour le soulignement de la tête montre la couleur «rouge». Ensuite, nous utilisons «HSL (133, 86%, 47%)» pour le soulignement du paragraphe, qui apparaît comme «vert clair», et pour les gras, nous utilisons «HSL (327, 85%, 33%)» qui est pour la couleur «magenta».

Le résultat est donné ci-dessous, avec la couleur «rouge» pour le soulignement de la tête, «vert clair» pour le texte du paragraphe et «magenta» pour le texte audacieux soulignant.

Exemple n ° 4

Dans cet exemple, nous allons un peu modifier le code HTML ci-dessus en ajoutant un lien ici dans ce fichier. Maintenant, nous avons un titre, un paragraphe, un texte audacieux à l'intérieur de ce paragraphe, ainsi que un lien. Maintenant, nous allons souligner tout cela, puis appliquer des couleurs de soulignement différentes pour toutes dans CSS.

Nous créons le soulignement de l'en-tête en utilisant la propriété «text-decoration» et en changeant sa couleur en «orange» à l'aide de «Text-Decoration-Color."Après cela, nous utilisons la propriété" Text-Decoration "pour générer le texte en gras et le" texte-décoration "pour changer la couleur en« bleu.«Nous avons mis la« taille de police »du paragraphe sur« 22px ». Pour avoir mentionné le lien, nous utilisons «A» ici avec le «survol», puis changeons la couleur du soulignement en «rouge», donc il changera la couleur du soulignement du lien lorsque nous survons la souris sur ce lien et Modifie également sa «taille de police» sur le plan de volant à «20px».

Dans la première sortie, nous soulignons simplement l'en-tête et le texte audacieux. Le soulignement de la tête apparaît dans la couleur «orange», et le souligné du texte audacieux apparaît ici en «bleu."

Dans la deuxième image, vous pouvez voir la couleur de soulignement du lien. Lorsque nous planons le curseur sur ce lien, la couleur du soulignement du lien apparaît en «rouge» comme nous l'avons réglé dans notre code CSS, il change donc sa couleur sur le volant.

Exemple n ° 5

Ici, nous avons un titre et deux paragraphes différents avec les noms «P1» et «P2». Nous avons également du texte audacieux et un «div», et aussi un élément «Span». Nous allons générer le soulignement pour tout cela et changer la couleur de ces soulignements.

Nous utilisons «Text-Align», et pour la valeur de cette propriété, nous définissons le «centre» ici pour tous les éléments qui sont présents à l'intérieur du corps. Nous avons également augmenté la «taille de police» et l'avons réglée sur «25px». Nous utilisons la propriété «Text-Decoration» pour tous les éléments que nous avons créés dans le fichier HTML en utilisant leurs noms. Ensuite, nous utilisons également la propriété «Text-Decoration-Color» à l'intérieur des noms de tous ces éléments ici. Nous utilisons les noms de couleurs, la couleur RVB et aussi les couleurs HSL ici. For the heading and the first paragraph “p1”, we are using the underline color in “RGB,” for the second paragraph “p2” and bold “b,” we are utilizing “HSL” color for the underline, and for the “ élément div »et« span », nous utilisons des noms de couleurs dans la propriété« Text-Decoration-Color ». De cette façon, nous générons le soulignement et changeons la couleur du soulignement de tous les éléments.

Dans la capture d'écran ci-dessous, le soulignement de tous les éléments rend en différentes couleurs car nous définissons ces couleurs dans le fichier CSS ci-dessus.

Conclusion

Nous avons écrit ce tutoriel expliquant comment changer la couleur du soulignement dans CSS. Nous avons discuté de la propriété de CSS, qui est utilisée pour modifier la couleur du soulignement. Nous avons expliqué en détail que la propriété «texte-décoration-couleur» est utilisée pour modifier la couleur du soulignement. Nous avons élaboré différents exemples ici dans lesquels nous avons utilisé cette propriété et expliqué le code ainsi que la sortie pour votre meilleure compréhension. Après avoir appris attentivement ce tutoriel, vous utiliserez cette propriété dans vos codes.