So ändern Sie die HTML-Schriftfarbe

Wenn es um die Anpassung Ihrer Website geht, wird die Schriftfarbe oft übersehen. In den meisten Fällen belassen Websitebesitzer die Standardschriftfarbe wie Schwarz oder was auch immer ihre Designstile für die Textfarbe von Textkörper und Überschrift definiert haben.

Es ist jedoch aus mehreren Gründen sinnvoll, die HTML-Schriftfarbe auf Ihrer Website zu ändern. Das Ändern der HTML-Schriftfarbe mag entmutigend erscheinen, ist aber ziemlich einfach. Es gibt mehrere Möglichkeiten, die Schriftfarbe auf Ihrer Website zu ändern.

In diesem Beitrag zeigen wir Ihnen verschiedene Möglichkeiten, die Farbe Ihrer Website-Schriftarten zu ändern, und erörtern, warum Sie dies überhaupt tun möchten.

Warum die HTML-Schriftfarbe ändern?

Sie sollten die Schriftfarbe ändern, da dies dazu beitragen kann, die Lesbarkeit und Zugänglichkeit Ihrer Website zu verbessern. Wenn Ihre Website beispielsweise ein dunkleres Farbschema verwendet, würde es schwierig sein, den Text auf Ihrer Website zu lesen, wenn Sie die Schriftfarbe Schwarz belassen.

Ein weiterer Grund, warum Sie eine Änderung der Schriftfarbe in Betracht ziehen sollten, ist, wenn Sie eine dunklere Farbe aus Ihrer Markenfarbpalette verwenden. Dies ist eine weitere Gelegenheit, Ihre Marke zu stärken. Es schafft Markenkonsistenz und stellt sicher, dass der Text auf allen Ihren Marketingkanälen gleich aussieht.

Sehen wir uns nun an, wie Sie die HTML-Schriftfarbe definieren und ändern können.

Wenn es um die Anpassung Ihrer Website geht, wird die Schriftfarbe oft übersehen ... aber es ist eine einfache Änderung, die viel Persönlichkeit verleihen kann! Zum Twittern klicken

Möglichkeiten, Farbe zu definieren

Es gibt mehrere Möglichkeiten, Farben im Webdesign zu definieren, darunter Name, RGB-Werte, Hex-Codes und HSL-Werte. Werfen wir einen Blick darauf, wie sie funktionieren.

Farbname

Farbnamen sind die einfachste Möglichkeit, eine Farbe in Ihren CSS-Stilen zu definieren. Der Farbname bezieht sich auf den spezifischen Namen für die HTML-Farbe. Derzeit werden 140 Farbnamen unterstützt, und Sie können jede dieser Farben in Ihren Stilen verwenden. Beispielsweise können Sie mit „Blau“ die Farbe für ein einzelnes Element auf Blau setzen.

Der Nachteil dieses Ansatzes ist jedoch, dass nicht alle Farbnamen unterstützt werden. Mit anderen Worten, wenn Sie eine Farbe verwenden, die nicht auf der Liste der unterstützten Farben steht, können Sie sie nicht in Ihrem Design anhand ihres Farbnamens verwenden.

RGB- und RGBA-Werte

Als nächstes haben wir die RGB- und RGBA-Werte. RGB steht für Rot, Grün und Blau. Es definiert die Farbe durch Mischen von Rot-, Grün- und Blauwerten, ähnlich wie Sie eine Farbe auf einer tatsächlichen Palette mischen würden.

Der RGB-Wert sieht so aus: RGB(153,0,255). Die erste Zahl gibt die rote Farbeingabe an, die zweite die grüne Farbeingabe und die dritte die blaue.

Der Wert jeder Farbeingabe kann zwischen 0 und 255 liegen, wobei 0 bedeutet, dass die Farbe überhaupt nicht vorhanden ist und 255 bedeutet, dass die jeweilige Farbe ihre maximale Intensität aufweist.

Der RGBA-Wert fügt der Mischung einen weiteren Wert hinzu, und das ist der Alpha-Wert, der die Deckkraft darstellt. Er reicht von 0 (nicht transparent) bis 1 (vollständig transparent).

HEX-Wert

Die Hex-Farbcodes funktionieren ähnlich wie RGB-Codes. Sie bestehen aus Zahlen von 0 bis 9 und Buchstaben von A bis F. Der Hex-Code sieht so aus: #800080. Die ersten beiden Buchstaben geben die Intensität der roten Farbe an, die mittleren beiden Zahlen die Intensität der grünen Farbe und die letzten beiden die Intensität der blauen Farbe.

HSL- und HSLA-Werte

Eine andere Möglichkeit, Farben in HTML zu definieren, ist die Verwendung von HSL-Werten. HSL steht für Farbton, Sättigung und Helligkeit.

Der Farbton verwendet Grad von 0 bis 360. Auf einem Standard-Farbrad liegt Rot bei etwa 0/360, Grün bei 120 und Blau bei 240.

Sättigung verwendet Prozentsätze, um zu definieren, wie gesättigt die Farbe ist. 0 steht für Schwarzweiß und 100 für Vollfarbe.

Schließlich verwendet die Helligkeit Prozentsätze ähnlich wie die Sättigung. In diesem Fall steht 0 % für Schwarz und 100 % für Weiß.

Zum Beispiel würde die violette Farbe, die wir in diesem Artikel verwendet haben, in HSL so aussehen: hsl(276, 100%, 50%) .

HSL unterstützt wie RGB Deckkraft. In diesem Fall würden Sie den HSLA-Wert verwenden, wobei A für Alpha steht und in einer Zahl von 0 bis 1 definiert ist. Wenn wir die Deckkraft des Beispiels Lila verringern wollten, würden wir diesen Code verwenden: hsl(276, 100%, 50%, .85) .

Nachdem Sie nun wissen, wie Sie Farbe definieren, wollen wir uns verschiedene Möglichkeiten zum Ändern der HTML-Schriftfarbe ansehen.

Das Alte: <font> Tags

Bevor HTML5 eingeführt und als Codierungsstandard festgelegt wurde, konnten Sie die Schriftfarbe mithilfe von Font-Tags ändern. Genauer gesagt würden Sie das Font-Tag mit dem Farbattribut verwenden, um die Textfarbe festzulegen. Die color wurde entweder mit ihrem Namen oder mit ihrem Hex-Code angegeben.

Hier ist ein Beispiel dafür, wie dieser Code mit Hex-Farbcode aussah:

 <font color="#800080">This text is purple.</font>

Und so könnten Sie die Textfarbe mit dem Farbnamen auf Lila setzen.

 <font color="purple">This text is purple.</font>

Das <font> -Tag ist jedoch in HTML5 veraltet und wird nicht mehr verwendet. Das Ändern der Schriftfarbe ist eine Designentscheidung, und Design ist nicht der Hauptzweck von HTML. Daher ist es sinnvoll, dass die <font> -Tags in HTML5 nicht mehr unterstützt werden.

Wenn also das <font>-Tag nicht mehr unterstützt wird, wie ändern Sie dann die HTML-Schriftfarbe? Die Antwort ist mit Cascading Style Sheets oder CSS.

Das Neue: CSS-Stile

Um die HTML-Schriftfarbe mit CSS zu ändern, verwenden Sie die CSS-Farbeigenschaft zusammen mit dem entsprechenden Selektor. Mit CSS können Sie Farbnamen, RGB-, Hex- und HSL-Werte verwenden, um die Farbe anzugeben. Es gibt drei Möglichkeiten, CSS zu verwenden, um die Schriftfarbe zu ändern.

Inline-CSS

Inline-CSS wird direkt zu Ihrer HTML-Datei hinzugefügt. Sie verwenden das HTML-Tag wie <p> und gestalten es dann mit der CSS-Farbeigenschaft wie folgt:

 <p>This is a purple paragraph.</p>

Wenn Sie einen Hex-Wert verwenden möchten, sieht Ihr Code so aus:

 <p>This is a purple paragraph.</p>

Wenn Sie den RGB-Wert verwenden, schreiben Sie ihn wie folgt:

 <p>This is a purple paragraph.</p>

Schließlich würden Sie unter Verwendung der HSL-Werte diesen Code verwenden:

 <p>This is a purple paragraph.</p>

Die obigen Beispiele zeigen Ihnen, wie Sie die Farbe eines Absatzes auf Ihrer Website ändern können. Aber Sie sind nicht nur auf Absätze beschränkt. Sie können die Schriftfarbe Ihrer Überschriften sowie Links ändern.

Wenn Sie beispielsweise das Tag <p> oben durch <h2> ersetzen, ändert sich die Farbe dieses Überschriftentexts, während das Ersetzen durch das Tag <a> die Farbe dieses Links ändert. Sie können auch das Element <span> verwenden, um beliebig viel Text einzufärben.

Wenn Sie die Hintergrundfarbe des gesamten Absatzes oder einer Überschrift ändern möchten, ist es sehr ähnlich, wie Sie die Schriftfarbe ändern würden. Sie müssen stattdessen das Attribut background-color verwenden und entweder den Farbnamen, Hex-, RGB- oder HSL-Werte verwenden, um die Farbe festzulegen. Hier ist ein Beispiel:

<p>

Eingebettetes CSS

Eingebettetes CSS befindet sich innerhalb der <style> -Tags und wird zwischen den Head-Tags Ihres HTML-Dokuments platziert.

Der Code sieht folgendermaßen aus, wenn Sie den Farbnamen verwenden möchten:

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

Der obige Code ändert die Farbe jedes Absatzes auf der Seite in Lila. Ähnlich wie bei der Inline-CSS-Methode können Sie verschiedene Selektoren verwenden, um die Schriftfarbe Ihrer Überschriften und Links zu ändern.

Wenn Sie den Hex-Code verwenden möchten, sieht der Code folgendermaßen aus:

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

Das folgende Beispiel verwendet die RBGA-Werte, sodass Sie ein Beispiel für die Einstellung der Deckkraft sehen können:

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

Und der HSL-Code würde so aussehen:

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

Externes CSS

Schließlich können Sie externes CSS verwenden, um die Schriftfarbe auf Ihrer Website zu ändern. Externes CSS ist CSS, das in einer separaten Stylesheet-Datei abgelegt wird, die normalerweise style.css oder stylesheet.css heißt.

Dieses Stylesheet ist für alle Stile auf Ihrer Website verantwortlich und legt die Schriftfarben und Schriftgrößen, Ränder, Auffüllungen, Schriftfamilien, Hintergrundfarben und mehr fest. Kurz gesagt, das Stylesheet ist dafür verantwortlich, wie Ihre Website visuell aussieht.

Um die Schriftfarbe mit externem CSS zu ändern, verwenden Sie Selektoren, um die gewünschten HTML-Teile zu formatieren. Dieser Code ändert beispielsweise den gesamten Haupttext auf Ihrer Website:

 body {color: purple;}

Denken Sie daran, dass Sie RGB-, Hex- und HSL-Werte und nicht nur die Farbnamen verwenden können, um die Schriftfarbe zu ändern. Wenn Sie das Stylesheet bearbeiten möchten, empfiehlt es sich, dies in einem Code-Editor zu tun.

Inline, eingebettet oder extern?

Jetzt wissen Sie also, wie Sie mit CSS die Schriftfarbe ändern können. Aber welche Methode sollten Sie verwenden?

Wenn Sie den Inline-CSS-Code verwenden, fügen Sie ihn direkt in Ihre HTML-Datei ein. Generell eignet sich diese Methode für Quick Fixes. Wenn Sie die Farbe eines bestimmten Absatzes oder einer bestimmten Überschrift auf einer einzelnen Seite ändern möchten, ist diese Methode die schnellste und am wenigsten komplizierte Methode.

Inline-Stile können jedoch die Größe Ihrer HTML-Datei vergrößern. Je größer Ihre HTML-Datei ist, desto länger dauert es, bis Ihre Webseite geladen ist. Darüber hinaus kann Inline-CSS Ihr HTML unordentlich machen. Daher wird im Allgemeinen von der Inline-Methode der Verwendung von CSS zum Ändern der HTML-Schriftfarbe abgeraten.

Eingebettetes CSS wird zwischen den <head>-Tags und innerhalb der <style>-Tags platziert. Wie Inline-CSS ist es gut für schnelle Korrekturen und das Überschreiben der in einem externen Stylesheet angegebenen Stile.

Ein bemerkenswerter Unterschied zwischen Inline- und eingebetteten Stilen besteht darin, dass sie auf jede Seite angewendet werden, auf der die Head-Tags geladen werden, während Inline-Stile nur für die spezifische Seite gelten, auf der sie sich befinden, normalerweise das Element, auf das sie auf dieser Seite abzielen.

Die letzte Methode, externes CSS, verwendet ein dediziertes Stylesheet, um Ihre visuellen Stile zu definieren. Im Allgemeinen ist es am besten, ein externes Stylesheet zu verwenden, um alle Ihre Stile an einem einzigen Ort zu speichern, von wo aus sie einfach bearbeitet werden können. Dadurch werden auch Präsentation und Design getrennt, sodass der Code einfach zu verwalten und zu warten ist.

Beachten Sie, dass Inline- und eingebettete Stile im externen Stylesheet festgelegte Stile überschreiben können.

Schrift-Tags oder CSS-Stile: Vor- und Nachteile

Die beiden wichtigsten Methoden zum Ändern der HTML-Schriftfarben sind die Verwendung des Font-Tags oder der CSS-Stile. Beide Methoden haben ihre Vor- und Nachteile.

Vor- und Nachteile von HTML-Font-Tags

Das HTML-Font-Tag ist einfach zu verwenden, das ist also ein Vorteil zu seinen Gunsten. Typischerweise ist CSS komplizierter und es dauert länger, es zu lernen, als <font color="purple"> . Wenn Sie eine ältere Website haben, die HTML5 nicht verwendet, ist das Font-Tag eine praktikable Methode zum Ändern der Schriftfarbe.

Obwohl das Font-Tag einfach zu verwenden ist, sollten Sie es nicht verwenden, wenn Ihre Website HTML verwendet. Wie bereits erwähnt, war das Font-Tag in HTML5 veraltet. Die Verwendung von veraltetem Code sollte vermieden werden, da Browser ihn jederzeit nicht mehr unterstützen können. Dies kann dazu führen, dass Ihre Website kaputt geht und nicht richtig funktioniert oder, schlimmer noch, Ihren Besuchern überhaupt nicht angezeigt wird.

CSS-Vorteile und Nachteile

CSS hat wie das Font-Tag seine Vor- und Nachteile. Der bedeutendste Vorteil der Verwendung von CSS ist, dass es der richtige Weg ist, die Schriftfarbe zu ändern und alle anderen Stile für Ihre Website festzulegen.

Wie bereits erwähnt, trennt es die Präsentation vom Design, wodurch Ihr Code einfacher zu verwalten und zu warten ist.

Auf der anderen Seite kann es im Vergleich zur alten Art, Code zu schreiben, einige Zeit dauern, CSS und HTML5 richtig zu lernen und zu schreiben.

Denken Sie daran, dass Sie mit CSS verschiedene Möglichkeiten haben, die Schriftfarbe zu ändern, und jede dieser Methoden hat ihre eigenen Vor- und Nachteile, wie bereits erwähnt.

Tipps zum Ändern der HTML-Schriftfarbe

Nachdem Sie nun wissen, wie Sie die HTML-Schriftfarbe ändern, finden Sie hier einige Tipps, die Ihnen dabei helfen werden.

Verwenden Sie einen Farbwähler

Anstatt Farben nach dem Zufallsprinzip auszuwählen, verwenden Sie Farbwähler, um die richtigen Farben auszuwählen. Der Vorteil einer Farbauswahl besteht darin, dass Sie den Farbnamen und die korrekten Hex-, RGB- und HSL-Werte erhalten, die Sie in Ihrem Code verwenden müssen.

Überprüfen Sie den Kontrast

Dunkler Text mit dunklem Hintergrund sowie heller Text mit hellem Hintergrund passen nicht gut zusammen. Sie machen den Text auf Ihrer Website schwer lesbar. Sie können jedoch einen Kontrastprüfer verwenden, um sicherzustellen, dass die Farben Ihrer Website zugänglich und der Text gut lesbar ist.

Finden Sie die Farbe mit der Inspect-Methode

Wenn Sie auf einer Website eine Farbe sehen, die Ihnen gefällt, können Sie den Code untersuchen, um den Hex-, RGB- oder HSL-Wert der Farbe zu erhalten. In Chrome müssen Sie nur mit dem Cursor auf den Teil der Webseite zeigen, den Sie untersuchen möchten, mit der rechten Maustaste klicken und Untersuchen auswählen . Dadurch wird das Codeinspektionsfenster geöffnet, in dem Sie den HTML-Code einer Website und die entsprechenden Stile sehen können.

Möchten Sie die Schriftfarbe auf Ihrer Website ändern? Es ist einfach! Dieser Leitfaden hilft Ihnen beim Einstieg ️ Click to Tweet

Zusammenfassung

Das Ändern der HTML-Schriftfarbe kann dazu beitragen, die Lesbarkeit und Zugänglichkeit Ihrer Website zu verbessern. Es kann Ihnen auch helfen, Markenkonsistenz in Ihren Website-Stilen herzustellen.

In diesem Handbuch haben Sie vier verschiedene Möglichkeiten kennengelernt, die HTML-Schriftfarbe zu ändern: mit Farbnamen, Hex-Codes, RGB- und HSL-Werten.

Wir haben auch behandelt, wie Sie die Schriftfarbe mit Inline-, eingebettetem und externem CSS ändern und das Font-Tag sowie die Vor- und Nachteile jeder Methode verwenden können. Inzwischen sollten Sie ein gutes Verständnis dafür haben, welche Methode Sie verwenden sollten, um die HTML-Schriftfarbe zu ändern. Jetzt müssen Sie nur noch diese Tipps auf Ihrer Website implementieren.

Was denkst du über das Ändern der Schriftfarbe mit CSS und Font-Tag? Lass es uns im Kommentarbereich wissen!