So ändern Sie die Website-Schriftfarben mit CSS

CSS gibt Ihnen die Kontrolle über das Erscheinungsbild von Text auf den von Ihnen erstellten und verwalteten Webseiten. In dieser Anleitung zeigen wir Ihnen, wie Sie Schriftfarben in CSS mithilfe von Farbschlüsselwörtern, hexadezimalen Farbcodes oder RGB-Farbnummern ändern.

So verwenden Sie CSS-Stile zum Ändern der Schriftfarbe

Farbwerte können als Farbschlüsselwörter, hexadezimale Farbzahlen oder RGB-Farbzahlen ausgedrückt werden. Für diese Lektion benötigen Sie ein HTML-Dokument, um die CSS-Änderungen zu sehen und a

separate CSS-Datei, die an dieses Dokument angehängt ist. Wir werden uns speziell das Absatzelement ansehen.

Verwenden Sie Farbstichwörter, um Schriftfarben zu ändern

Um die Textfarbe für jeden Absatz in Ihrer HTML-Datei zu ändern, gehen Sie zum externen Stylesheet und geben Sie ein p { }. Setze das Farbe Eigenschaft im Stil gefolgt von einem Doppelpunkt, wie p { Farbe: }. Fügen Sie dann Ihren Farbwert nach der Eigenschaft hinzu und beenden Sie ihn mit einem Semikolon. In diesem Beispiel wird der Absatztext in die Farbe Schwarz geändert:

p {
Farbe: Schwarz;
}

Verwenden Sie hexadezimale Werte, um die Schriftfarben zu ändern

Wenn Sie den Text mithilfe von Farbschlüsselwörtern in Rot, Grün, Blau oder eine andere Grundfarbe ändern, erhalten Sie nicht die Genauigkeit, die Sie beim Erstellen verschiedener Schattierungen dieser Farben erwarten. Dafür sind hexadezimale Werte da.

Dieser CSS-Stil kann verwendet werden, um Ihre Absätze schwarz einzufärben, da der Hex-Code #000000 in Schwarz übersetzt wird. Sie könnten mit diesem Hex-Wert sogar eine Kurzschrift verwenden und ihn als #000 mit den gleichen Ergebnissen schreiben.

p {
Farbe: #000000;
}

Hex-Werte funktionieren gut, wenn Sie eine Farbe benötigen, die nicht einfach schwarz oder weiß ist. Mit diesem Hex-Code können Sie beispielsweise einen ganz bestimmten Blauton einstellen – ein mittleres, schieferartiges Blau:

p {
Farbe: #2f5687;
}

Hex funktioniert, indem die RGB-Werte (Rot, Grün, Blau) einer Farbe separat mit Werten zur Basis 16 festgelegt werden. Deshalb enthalten sie die Buchstaben EIN durch F zusätzlich zu den Ziffern 0 durch 9.

Jede Farbe, Rot, Grün und Blau, erhält einen eigenen zweistelligen Wert. 00 ist der niedrigste mögliche Wert, während FF ist am höchsten. Die Farben sind in RGB-Reihenfolge in einem Hex aufgeführt, sodass die ersten beiden Ziffern den Rotwert darstellen und so weiter.

Verwenden Sie RGBA-Farbwerte, um Schriftfarben zu ändern

Schließlich können Sie RGBA-Farbwerte verwenden, um Schriftfarben zu bearbeiten. RGCA wird in allen modernen Browsern unterstützt, sodass Sie diese Werte mit der Gewissheit verwenden können, dass es für die meisten Betrachter funktioniert, aber Sie können auch einen einfachen Fallback festlegen.

Dieser RGBA-Wert ist der gleiche wie die oben angegebene schieferblaue Farbe:

p {
Farbe: rgba (47,86,135,1);
}

Die ersten drei Werte legen die Rot-, Grün- und Blauwerte fest und die letzte Zahl ist die Alpha-Einstellung für Transparenz. Die Alpha-Einstellung ist auf 1 gesetzt, um 100 Prozent zu bedeuten, also hat diese Farbe keine Transparenz. Wenn Sie diesen Wert auf eine Dezimalzahl wie .85 setzen, entspricht dies einer Deckkraft von 85 Prozent und die Farbe wäre leicht transparent.

Wenn Sie Ihre Farbwerte kugelsicher machen möchten, kopieren Sie diesen CSS-Code:

p {
Farbe: #2f5687;
Farbe: rgba (47,86,135,1);
}

Diese Syntax legt zuerst den Hex-Code fest und überschreibt dann diesen Wert mit der RGBA-Zahl. Dies bedeutet, dass jeder ältere Browser, der RGBA nicht unterstützt, den ersten Wert erhält und den zweiten ignoriert.

Beachten Sie, dass die Eigenschaft color für jedes HTML-Textelement in CSS funktioniert. Sie können beispielsweise alle Ihre Linkfarben ändern. In diesem Beispiel werden Ihre Links hellgrün:

ein {
Farbe: #16c616;
}

Dies funktioniert auch mit mehreren Elementen gleichzeitig. Sie können jede Titelebene gleichzeitig einstellen. Dadurch werden beispielsweise alle Ihre Titelelemente auf eine mitternachtsblaue Farbe gesetzt:

h1, h2, h3, h4, h5, h6 {
Farbe: #020833;
}

Es ist nicht immer einfach, die Hex- oder RGBA-Werte für Ihre Farben zu ermitteln. Die meisten Webdesigner verwenden ein Bildbearbeitungsprogramm wie Photoshop oder GIMP, um die genauen Codes zu generieren. Sie können auch bequeme Tools zur Farbauswahl online finden, wie z dieser von w3schools.

Andere Möglichkeiten zum Stylen einer HTML-Seite

Schriftfarben können mit einem externen Stylesheet, einem internen Stylesheet oder Inline-Styling innerhalb des HTML-Dokuments geändert werden. Best Practices schreiben jedoch vor, dass Sie ein externes Stylesheet für Ihre CSS-Stile verwenden sollten.

Ein internes Stylesheet, das sind Stile, die direkt in den "Kopf" Ihres Dokuments geschrieben werden, werden im Allgemeinen nur für kleine, einseitige Websites verwendet. Inline-Stile sollten vermieden werden, da sie den alten "font"-Tags ähneln, mit denen wir uns vor vielen Jahren beschäftigt haben. Diese Inline-Stile machen es sehr schwierig, den Schriftstil zu verwalten, da Sie sie bei jeder Instanz des Inline-Stils ändern müssen.