Ändern Sie die Farbe eines Wortes in einer Textfolge in HTML
- Ändern Sie die Farbe eines Wortes in einer Textfolge in HTML
- Ändern Sie die Farbe eines Wortes in einer Textzeichenfolge in HTML mithilfe von internem CSS
- Ändern Sie die Farbe eines Wortes in einer Textzeichenfolge in HTML mit JavaScript
Das Hauptthema dieses Artikels ist die Verwendung von CSS zum Hervorheben oder Ändern der Farbe eines bestimmten Wortes in einem Text. Wir werden verschiedene Techniken zur Implementierung dieser Funktion durchgehen.
Wir werden lernen, einen Text mit internem und Inline-CSS einzufärben. Später sehen wir uns an, wie JavaScript verwendet wird, um dieselbe Funktionalität zu implementieren.
Ändern Sie die Farbe eines Wortes in einer Textfolge in HTML
Wir sehen häufig auf Websites, dass ein einzelnes Wort in einem Text eine andere Farbe hat als die anderen; Natürlich zieht es die Aufmerksamkeit der Benutzer auf sich. Lassen Sie uns besprechen, wie wir dasselbe auf unseren Webseiten tun können.
In früheren HTML-Versionen hatten wir ein <font>-Tag, das verwendet werden kann, um diese Funktion wie folgt zu implementieren:
<font color="red">Red</font>
Aber das Tag wurde in HTML5 entfernt und wird nicht mehr unterstützt. Wir werden also etwas über ein HTML-Tag <span> lernen, das uns bei der Erfüllung der Aufgabe hilft.
Das Element <span> ist ein Inline-Container, um einen Textabschnitt oder einen Abschnitt einer Seite zu markieren. Das id- oder class-Attribut des <span>-Tags ermöglicht ein einfaches Styling mit CSS und Modifikationen mit JavaScript.
Das <span>-Tag ermöglicht es uns auch, Inline-Styling anzuwenden, ähnlich wie beim div-Element. Allerdings ist <span> ein Inline-Element, während div ein Element auf Blockebene ist.
Sehen Sie sich das folgende Beispiel an, um dies zu verstehen.
<html>
<body>
<p>Hello, I am
<span style="color: red">Red</span>
</p>
</body>
</html>
Die CSS-Eigenschaft color gibt dem Text eine bestimmte Farbe. Es gibt viele Möglichkeiten, die gewünschte Farbe anzugeben; Im obigen Beispiel wählen wir die Farbe nach ihrem Namen aus.
HTML kann 16 Farbnamen erkennen, nämlich Schwarz, Weiß, Grau, Silber, Kastanienbraun, Rot, Lila, Fuchsia, Grün, Limone, Oliv, Gelb, Marineblau, Blau, Blaugrün und Aqua. Neue Browser können 140 CSS-Farbnamen erkennen.
Sie können alle von HTML erkannten Farbnamen hier überprüfen. Wie bereits erwähnt, gibt es viele andere Möglichkeiten, die erforderliche Farbe anzugeben.
Schauen wir uns verschiedene Methoden an.
RGB-Farben
RGB steht für Rot, Grün, Blau. Es verwendet ein additives Farbschema, bei dem die drei Primärfarben Rot, Grün und Blau kombiniert werden, um jede Farbe zu erzeugen.
Die roten, grünen und blauen Parameter haben jeweils einen Wert zwischen 0 und 255, der die Intensität der Farbe beschreibt. Dies zeigt an, dass es 256 x 256 x 256 = 16.777.216 verschiedene Farben gibt.
Zum Beispiel wird rgb(255, 0, 0) rot gerendert, weil die Farbe Rot auf den größten Wert 255 gesetzt ist, während die anderen beiden Farben Grün und Blau auf 0 gesetzt sind. Setzen Sie alle Farbparameter auf Null wie dieses rgb(0,0,0) um Schwarz anzuzeigen.
Sie können den RGB-Wert verschiedener Farben von hier sehen.
<html>
<body>
<p>Hello, I am
<span style="color: rgb(241, 196, 15 )">Yellow</span>
</p>
</body>
</html>
RGBA-Farben
RGBA-Farben sind eine Erweiterung von RGB-Farben, einschließlich eines Alpha-Kanals, der die Deckkraft einer Farbe bestimmt. Die Syntax für einen RGBA-Farbwert lautet:
rgba (red, green, blue, alpha)
Der Wert des Alpha-Parameters reicht von 0,0 (vollständige Transparenz) bis 1,0 (vollständige Sichtbarkeit). Sie können diese Eigenschaft auch für die Hintergrundfarben verwenden, da wir manchmal verschiedene Hintergrundfarben mit unterschiedlicher Deckkraft benötigen.
HEX-Farben
Hex-Farben verwenden Hexadezimalwerte, um Farben aus verschiedenen Farbmodellen darzustellen. Hexadezimalfarben werden durch #RRGGBB dargestellt, wobei RR für Rot, GG für Grün und BB für Blau steht.
Die hexadezimalen Ganzzahlen, die die Intensität der Farbe angeben, können von 00 bis FF reichen; ein einfaches Beispiel ist #0000FF. Da die blaue Komponente ihren höchsten Wert FF hat, während die roten und grünen Anteile ihren niedrigsten Wert 00 haben, ist die Farbe vollständig blau.
Sie können den Hex-Wert verschiedener Farben von hier sehen.
<html>
<body>
<p>Hello, I am
<span style="color: #0000FF">Blue</span>
</p>
</body>
</html>
HSL-Farben
HSL ist ein Akronym, das für Farbton, Sättigung und Helligkeit steht. Lassen Sie uns einen tieferen Blick auf jeden Begriff werfen.
- Farbton: Der Farbton reicht von 0 bis 360 Grad auf dem Farbrad. Rot ist 0; gelb ist 60; grün ist 120; Blau ist 240 usw.
- Sättigung: Diese Menge wird in Prozent gemessen, wobei 100 % vollständig gesättigt (d. h. keine Grauschattierungen), 50 % 50 % grau, aber mit noch sichtbarer Farbe, und 0 % vollständig ungesättigt (d. h. vollständig) bedeutet Grau und Farbe unsichtbar).
- Helligkeit: Dies ist auch ein Prozentsatz: 0 % ist schwarz und 100 % ist weiß. Die Lichtmenge, die wir einer Farbe geben möchten, wird in Prozent ausgedrückt, wobei 0 % schwarz ist (wo es kein Licht gibt), 50 % weder dunkel noch hell und 100 % weiß (vollständige Helligkeit).
Die Syntax für HSL-Farbwerte lautet:
hsl(hue, saturation, lightness)
Sie können den HSL-Wert verschiedener Farben hier sehen.
<html>
<body>
<p>Hello, I am
<span style="color: hsl(23, 97%, 50% )">Orange</span>
</p>
</body>
</html>
HSLA-Farben
HSLA-Farben sind eine Erweiterung von HSL mit einem Alpha-Kanal, der die Deckkraft einer Farbe angibt. Ein HSLA-Farbwert wird ermittelt mit:
hsla(hue, saturation, lightness, alpha)
Der Wert des Alpha-Parameters ist eine Zahl mit einem strikten Bereich zwischen 0,0, was vollständig transparent bedeutet, und 1,0, was nicht transparent bedeutet.
Ändern Sie die Farbe eines Wortes in einer Textzeichenfolge in HTML mithilfe von internem CSS
Wir haben alle Methoden zur Farbgebung in CSS im Detail gesehen. Bis zu diesem Punkt haben wir für alles Inline-CSS verwendet.
Inline-CSS ist jedoch keine empfohlene Methode, da es nur an das Element gebunden ist. Wir müssen viel umschreiben, wenn wir die gleiche Funktionalität in verschiedenen Seitenbereichen haben wollen.
Lassen Sie uns also unseren Text mit internem CSS einfärben, das im HTML-Tag <head> innerhalb eines Tags <style> definiert ist.
<html>
<head>
<title>CSS Color Property</title>
<style>
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h1>
Hello this is <span id="built">Built-in color</span> format.
</h1>
<h1>
Hello this is <span id="rgb">RGB</span> format.
</h1>
<h1>
Hello this is <span id="rgba">RGBA</span> format.
</h1>
<h1>
Hello this is <span id="hex">Hexadecimal</span> format.
</h1>
<h1>
Hello this is <span id="hsl">HSL</span> format.
</h1>
<h1>
Hello this is <span id="hsla">HSLA</span> format.
</h1>
</body>
</html>
Ändern Sie die Farbe eines Wortes in einer Textzeichenfolge in HTML mit JavaScript
Wir können die Farbe eines bestimmten Wortes in einem Satz mit JavaScript ändern. Wir müssen unserem <span>-Tag eine ID geben und dann dieses Element aus JavaScript mit document.getElementById(ID-name) abrufen und die style-Eigenschaft dafür aufrufen. Hier ist wie.
<html>
<body onload="myFunction()">
<p>Hello, I am <span id="color-text">Magenta.</span></p>
<script>
function myFunction() {
document.getElementById("color-text").style.color = "magenta";
}
</script>
</body>
</html>