Dieser Leitfaden zeigt:
Lass uns anfangen!
Was sind HTML -Farbcodes??
HTML -Farbcodes sind die Kennungen, um Farben auf der Webseite anzuwenden. Die gängigen HTML -Farbcodes sind Tastaturnamen “Hexadezimalcode","RGB (rot, grün, blau)", Und "HSL (Farbton, Sättigung, Leichtigkeit)”.
So wenden Sie Farben in HTML an?
In HTML gibt es drei Methoden, um Farben auf eine Webseite anzuwenden, indem Sie:
Wir werden jeden von ihnen mit Hilfe der Implementierung besprechen. Zunächst ist es erforderlich, eine HTML -Datei zu erstellen.
Beispiel: Farben in HTML unter Verwendung von Farbnamen anwenden
Fügen Sie in der HTML -Datei eine DIV in das Body -Tag hinzu. Setzen Sie den Namen der Div -Klasse als "Container”. Erstellen Sie zwei Elemente für die Überschrift und den Absatz im Div:
Der Absatz beginnt von hier aus…
Die hinzugefügten HTML -Elemente sehen folgendermaßen aus:
Lassen Sie uns die Webseite attraktiver machen, indem wir einige Stile anwenden. Geben Sie dazu das Tag in den Abschnitt HTML -Dateikopf ein. Wenden Sie im Style -Tag CSS -Stile für das Div so an:
Der obige Code enthält die CSS-Eigenschaften für die Div-Klasse, die unten aufgeführt sind:
Ausgang
Wie wir sehen können, das “Hintergrundfarbe"Eigentum der DIV wird jetzt in" geändert "Distel”Von Weiß. So wenden wir Farben auf unsere Webseiten an, indem wir einfach Farbnamen verwenden. Um jedoch verschiedene Farbtöne zu nutzen, gibt es jedoch drei Methoden, um Farben mit Farbcodes anzuwenden.
Methode 1: Anwenden von Farben in HTML mithilfe von HEX -Codewerten anwenden
“Hex -Codewerte”Sind die hexadezimalen Werte, die für die Farbanwendung in HTML verwendet werden können.
Syntax
Sie können Farbcode in diesem Format schreiben:
In der oben gegebenen Syntax, “rr"Ist für rot", "gg"Ist für grün und"BB”Ist für Blau.
Schauen Sie sich die folgende Tabelle an, die die Farbe und ihre hexadezimalen Werte darstellt:
Farbe | Hexadezimalcodewert |
---|---|
Rot | #ff0000 |
Blau | #0000ff |
Grün | #00ff00 |
Weiss | #ffffff |
Schwarz | #000000 |
Beispiel
Setzen wir das gleiche Beispiel fort und ändern Sie die Farbe des DIV mithilfe eines Hexadezimalcodewerts in Rot auf Rot auf rot. Ändern Sie dazu den Hintergrundfarbenwert von “Distel" Zu "#ff0000" folgendermaßen:
Es kann beobachtet werden, dass die Hintergrundfarbe des DIV erfolgreich in Rot geändert wird:
Methode 2: Farben in HTML mit RGB -Code anwenden
“RGB”Ist das Farbschema oder Modell, das Primärfarben rot, grün und Blau des Lichts verwendet. Verschiedene Werte dieser Farben können hinzugefügt werden, um mehrere Farben zu erzeugen.
Syntax
Das RGB -Schema funktioniert nach der angegebenen Formel:
Schauen wir uns einige Farben mit ihren RGB -Werten an:
Farben | RGB -Farbcode |
---|---|
Rot | RGB (255,0,0) |
Grün | RGB (0,255,0) |
Blau | RGB (0,0,255) |
Weiss | RGB (255.255.255) |
Blau | RGB (0,0,0) |
Beispiel
Hier ist die Demonstration, die Hintergrundfarbe unserer Div auf “zu ändern“Gelb”Durch Anwenden von RGB -Code. Der "Hintergrundfarbe”Wird als" eingestellt "RGB (0,0,255)”, Das ist der gelbe RGB -Farbcode:
Überprüfen Sie die folgenden Ergebnisse nach der Zuweisung des RGB-Wertes (255.255,0) der Eigenschaft von Hintergrundfarben:
Methode 3: Farben in HTML mit HSL anwenden
In HTML können die Farben auch mit "mit" definiert werden "definiert werden“Hsl” Hue, SAusbildung und LICHTES. Zu diesem Zweck ist es erforderlich, die HSL -Farbcode -Methode zu verwenden.
Syntax
Das Format der HSL () Farbmethode wird unten zitiert:
Im RGB-Farbrad bezeichnet jede Farbe einen Winkel und einen prozentualen Wert für die folgenden Faktoren:
Beispiel
Lassen Sie uns die oben genannten ändern “div"Farbe zu einem Grünton mit einem Farbton"von 106Grade, Sättigung “von 73%Und Leichtigkeit “von 58%”:
Das Ergebnis ist unten dargestellt:
Bitte schön! Sie haben die drei Methoden gelernt, um Farben in HTML anzuwenden.
Abschluss
HTML -Farbcodes sind Kennungen, um verschiedene Farben anzuwenden. Abgesehen von der Verwendung nur des Farbnamens ermöglicht HTML es uns, drei Methoden zu verwenden: HEX -Codewerte, RGB -Farben und HSL. Sie können diese Farben in jedem HTML -Element verwenden, indem Sie die Werte dieser Codes festlegen. Diese Beschreibung hat die Methoden gezeigt, um Farben in HTML anzuwenden.