Heim > Artikel > Web-Frontend > HTML-Farben
HTML-Farben
- 王林Original
- 2024-09-04 16:33:57570Durchsuche
In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML auf einfache und unkomplizierte Weise Farben auf der Website verwenden. Farben spielen eine wichtige Rolle bei der Gestaltung von Websites, die gut aussehen und sich gut anfühlen. Es ist kein einzelnes Tag in HTML integriert. Stattdessen wird das Stilattribut oder die Farbeigenschaft verwendet. Genauer gesagt werden die Farben mittels Cascading Style Sheet (CSS) in die HTML-Elemente eingebettet. Farben verleihen der Webseite ein elegantes Aussehen. Das Hinzufügen von Farben zur Webseite umfasst das Festlegen von Hintergrundfarben, Tabellen, Absätzen usw.
Wie lege ich eine Hintergrundfarbe in HTML fest?
Durch Aufhellen der Hintergrundfarbe wirkt die Website hübscher und kräftiger. Dies geschieht durch die Verwendung von Farben, Hex-Farbcodes. RGB- und RGBA-Farbwerte (Alpha-Wert 0 bis 1).
Hex-Farbe wird direkt auf den HTML-Code angewendet, indem das Style-Attribut im Body-Element des HTML verwendet wird. Hex ist eine Kombination aus Zahlen und Buchstaben. Unten finden Sie ein Beispiel zur Veranschaulichung der Hintergrundfarbe auf der Webseite.
Code:
<!DOCTYPE html> <title>My Sample</title> <html> <head> <title>HTML BG Color</title> </head> <body style="background-color:red;"> <h1> This page is a demo </h1> </body> </html>
Codeausschnitte:
Um eine Hintergrundfarbe hinzuzufügen, können Sie das Attribut bgcolor verwenden, um < body bgcolor=’ ‘>. Es ist mit allen Browsern außer HTML 5 kompatibel.
Code:
<h3 style="color: blue">Color Name</h3> <h3 style="color: #0000ff">Hexadecimal</h3> <h3 style="color: rgb (0,0,255)">RGB Value</h3>
Wie wende ich Farbe auf Text in HTML an?
Das Anwenden von Farbe auf den HTML-Text ist ganz einfach. Wir können die Farbe des Textes hinzufügen/ändern, indem wir drei Möglichkeiten anwenden, nämlich Hex-Farbe, HSL-Werte und Farbnamen. Im Folgenden sind die drei verschiedenen Techniken aufgeführt, um Farbe auf die entsprechenden Webseiten anzuwenden.
1. Farbnamen
Dies ist ganz einfach, indem englische Farbnamen verwendet werden. Wenn die Anwendung einfach ist, werden diese Farbnamen verwendet. Die Angabe von Farbnamen erfolgt über direkte Methoden und das W3C hat 16 Grundfarben angekündigt (Schwarz, Gelb, Rot, Kastanienbraun, Grau, Limette, Grün, Oliv, Silber, Aqua, Blau, Marineblau, Weiß, Lila, Fuchsia, Blaugrün)
2. HSL
Farbwerte für Farbton, Sättigung und Helligkeit. Der Farbton wird in 0 bis 360 Grad, Sättigung und Helligkeit von 0 bis 100 % definiert.
3. Hex-Farbe
Um ein genaues Ergebnis zu erhalten, wird eine sechsstellige Hexadezimalzahl verwendet. Um es näher zu erläutern: Die ersten beiden Ziffern bezeichnen Rot, die nächsten beiden bezeichnen Grün, die anderen beiden bezeichnen den Blauwert und werden durch ein „#“ vorangestellt.
Das folgende Beispiel erklärt die verschiedenen Möglichkeiten, Farben auf die Dokumente anzuwenden.
Code:
<head>
<title>EDUCBA</title>
<style type="text/css">
h1{
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
}
h4{
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
}
li{
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h4>List of operating System</h4>
<ul>
<li> Windows</li>
<li>MACINTOSH</li>
<li>LINUX</li>
<li>UBUNTU</li>
</ul>
</body>
</html>
Ausgabe:
Es gibt verschiedene Methoden zur Textfarbe, da HTML viele anpassbare Anwendungen bietet.
- Stilabschnitt anwenden
- Erstellen eines individuellen CSS-Stylesheets
- Umbruch des Textes