CSS unterstreichen die Farbe
Beispiel 1
Erstellen Sie die HTML -Datei für den Beginn dieses Code. Wir werden zunächst eine neue Datei erstellen und dann HTML als Sprache im Visual Studio -Code auswählen. Schließlich fügen wir das hinzu “!”Zu der Datei, die wir gerade generiert haben. Diese Datei enthält alle grundlegenden Tags der HTML. Wir müssen jetzt nur noch den HTML -Körper und den Link der CSS -Datei in den „Kopf“ eingeben.Im Körper platzieren wir einen Übergang und einen Absatz in diesen Code. Wir erstellen auch einen mutigen Text in diesem Code. Jetzt bewegen wir uns, um die CSS -Datei zu erstellen, in der wir die Überschrift und den Absatz unterstreichen und dann die Farbe dieser Untersteuerung ändern. All dies wird durch die Verwendung der CSS -Eigenschaften durchgeführt.
Wir stimmen alle Körperelemente der HTML hier im „Zentrum“ mit Hilfe der Eigenschaft „Text-Align“ aus. Anschließend verwenden wir die Eigenschaft "Textdekoration" und platzieren das Schlüsselwort "Untersteuerung" für den Wert dieser Eigenschaft. Wir verwenden diese Eigenschaft hier, um die Unterstreichung für die Überschrift zu generieren. Wir setzen auch die Farbe dieser Untersteuer.
Hier setzen wir die Farbe dieser Untergrunde auf „Schwarz.„Wir generieren auch eine weitere Unterstreich. Wir ändern die Farbe dieser Untersteuer. Wir haben auch einen mutigen Text, also werden wir mit Hilfe der Eigenschaft „Textdekoration“ eine Unterstreichung für diesen mutigen Text erstellen und ihre Farbe auch in „rot“ ändern, indem sie die Eigenschaft „Textdekoration“ verwenden.
Die Ausgabe ist hier, und Sie können beobachten, dass die Farbe der Unterstreichung der Überschrift „schwarz“ erscheint, der Absatztext in „Grün“ erscheint und die Unterstreichung des fetten Textes in „Rot ist.”
Beispiel # 2
Wir verwenden den gleichen HTML -Code von Beispiel 1 hier. Wir verwenden zuerst die Eigenschaft „Text-Align“ für alle Körperelemente, und die „Schriftgröße“ des Körperelements lautet „24px“. Wir „unterstreichen“ alle Elemente separat mit „Textdekoration“ und ändern die Farbe der Untersteuerung mit Hilfe der „Textdekoration-Farben.Hier verwenden wir die Farbe "RGB" als Wert dieser Eigenschaft "Textdekoration". Für "H1" setzen wir "RGB (13, 128, 13)", das für den „grünen“ Farbton verwendet wird. Dann haben wir „P“, in denen wir „RGB (40) verwenden. 40, 184) “, was die„ blaue “Farbe darstellt. Für den letzten kühnen Text "B" verwenden wir "RGB (216, 69, 15)", das "Orange" darstellt.”
Das Ergebnis ist unten gezeigt, und Sie können sehen, dass die Farbe der Unterstreichung der Überschrift „grün“ ist, der Absatztext „blau“ ist und der fetthaltige unterstreichende Text „orange.”
Beispiel # 3
Auch hier verwenden wir den HTML -Code von Beispiel 1 und verknüpfen diese angegebene CSS -Datei mit der HTML -Datei von Beispiel 1. Der gesamte Text des HTML-Körper.Wir unterstreichen alle Elemente, die sich auf die gleiche Weise wie im obigen Beispiel beschrieben haben. Hier ändern wir die Farbe dieser Unterstreichungen durch die Verwendung von „Textdekorationsfarbe“ und Zuweisen von Werten der Farbe in der Form „HSL“. Die „HSL (0, 100%, 50%)“, die wir hier für die Unterstufe des Kopfes verwenden, zeigt „rote“ Farbe. Dann verwenden wir "HSL (133, 86%, 47%)" für die Unterstreichung des Absatzes, die als "hellgrün" erscheint, und für den BOLD verwenden wir "HSL (327, 85%, 33%)", das, welche ist für "Magenta" Farbe.
Das Ergebnis ist unten angegeben, wobei die Farbe „rot“ für die Unterstreichung, „hellgrün“ für den Absatztext und „Magenta“ für den kühnen Text unterstreicht.
Beispiel # 4
In diesem Beispiel werden wir den oben genannten HTML -Code ein wenig ändern, indem wir hier in dieser Datei einen Link hinzufügen. Jetzt haben wir einen Übergang, einen Absatz, einen mutigen Text in diesem Absatz und auch einen Link. Jetzt werden wir all dies unterstreichen und dann verschiedene Untersteuerfarben für alle in CSS anwenden.
Wir erstellen die Unterstreichung der Überschriften, indem wir die Eigenschaft „Textdekoration“ verwenden und ihre Farbe mit Hilfe der „Text-Decoration-Color in„ orange “ändern."Danach verwenden wir die Eigenschaft" Textdekoration ", um den fett geratenen Text zu erzeugen, und" Textdekoration ", um die Farbe in" Blau "zu ändern."Wir haben den Absatz" Schriftgröße "auf" 22px "gesetzt. Für die Erwähnung des Link ändert auch seine „Schriftgröße“, wenn sie schweben auf "20px".
In der ersten Ausgabe unterstreichen wir gerade die Überschrift und den fetten Text. Die Unterstreichung der Überschriften erscheint in „orangefarbener“ Farbe, und die Unterstreichung des Fettdrucks erscheint hier in „Blue.”
Im zweiten Bild können Sie die unterstreichende Farbe des Links sehen. Wenn wir den Cursor auf diesem Link schweben, erscheint die Farbe der Unterstreichung des Links in „Rot“, da wir ihn in unserem CSS -Code eingestellt haben.
Beispiel Nr. 5
Hier haben wir eine Überschrift und zwei verschiedene Absätze mit den Namen "P1" und "P2". Wir haben auch einen mutigen Text und ein "Div" und auch ein "Spann" -Element. Wir werden die Unterstreichung für all diese erstellen und auch die Farbe dieser Untersteinungen ändern.
Wir verwenden „Text-Align“ und für den Wert dieser Eigenschaft setzen wir hier „Zentrum“ für alle Elemente, die im Körper vorhanden sind. Wir haben auch die „Schriftgröße“ erhöht und es auf "25px" gesetzt. Wir verwenden die Eigenschaft „Textdekoration“ für alle Elemente, die wir in der HTML-Datei mithilfe ihrer Namen erstellt haben. Anschließend verwenden wir auch die Eigenschaft „Text-Decoration-Color“ in den Namen all dieser Elemente hier. Wir verwenden hier die Farbnamen, die RGB -Farbe und auch die HSL -Farben. Für die Überschrift und den ersten Absatz „P1“ verwenden wir die unterstreichende Farbe in „RGB“ für den zweiten Absatz „P2“ und kühner „B“. Wir verwenden „HSL“ -Farbe für die Unterstufe und für die “ Div ”und" Span "Element, wir verwenden Farbnamen in der Eigenschaft" Textdekoration-Farben ". Auf diese Weise erzeugen wir die Unterstreichung und ändern die Farbe der Unterstreichung aller Elemente.
Im folgenden Screenshot wird die Unterstreichung aller Elemente in verschiedenen Farben dargestellt, da wir diese Farben in der obigen CSS -Datei festlegen.
Abschluss
Wir haben dieses Tutorial geschrieben, in dem erklärt wird. Wir haben die Eigenschaft von CSS erörtert, die zur Veränderung der Farbe der Unterstreichung verwendet wird. Wir haben ausführlich erklärt, dass die Eigenschaft „Textdekoration-Farben“ verwendet wird, um die Farbe der Unterstreichung zu ändern. Wir haben hier verschiedene Beispiele ausgearbeitet, in denen wir diese Eigenschaft verwendet und den Code und die Ausgabe für Ihr besseres Verständnis erläutert haben. Nachdem Sie dieses Tutorial sorgfältig gelernt haben, verwenden Sie diese Eigenschaft in Ihren Codes.