Warum sollte man die Farbe der HTML Fonts \u00e4ndern?<\/h2>\n
Du solltest die Schriftfarbe \u00e4ndern, weil du damit die Lesbarkeit und Zug\u00e4nglichkeit deiner Webseite verbessern kannst. Wenn deine Webseite zum Beispiel ein dunkleres Farbschema verwendet, w\u00e4re es schwierig, den Text auf deiner Webseite zu lesen, wenn du die Schriftfarbe schwarz l\u00e4sst.<\/p>\n
Ein weiterer Grund, warum du die Schriftfarbe \u00e4ndern solltest, ist, wenn du eine dunklere Farbe aus deiner Markenfarbpalette verwendest. Dies ist eine weitere M\u00f6glichkeit, deine Marke zu st\u00e4rken. Sie sorgt f\u00fcr Markenkonsistenz und stellt sicher, dass der Text auf allen deinen Marketingkan\u00e4len gleich aussieht.<\/p>\n
Nachdem das gekl\u00e4rt ist, schauen wir uns an, wie du die HTML-Schriftfarbe<\/a> definieren und \u00e4ndern kannst.<\/p>\n\n Es gibt verschiedene M\u00f6glichkeiten, Farben im Webdesign zu definieren, darunter Namen, RGB-Werte, Hex-Codes und HSL-Werte. Schauen wir uns an, wie sie funktionieren.<\/p>\n Farbnamen<\/a> sind der einfachste Weg, um eine Farbe in deinen CSS-Styles zu definieren. Der Farbname bezieht sich auf den spezifischen Namen f\u00fcr die HTML-Farbe. Derzeit werden 140 Farbnamen unterst\u00fctzt, und du kannst jede dieser Farben in deinen Styles verwenden. Du kannst zum Beispiel „blue“ verwenden, um die Farbe f\u00fcr ein einzelnes Element auf blau zu setzen.<\/p>\n Der Nachteil dieses Ansatzes ist jedoch, dass nicht alle Farbnamen unterst\u00fctzt werden. Das hei\u00dft, wenn du eine Farbe verwendest, die nicht auf der Liste der unterst\u00fctzten Farben steht, kannst du sie nicht \u00fcber ihren Farbnamen in deinem Entwurf verwenden.<\/p>\n Als N\u00e4chstes kommen wir zu den RGB- und RGBA-Werten<\/a>. RGB steht f\u00fcr Rot, Gr\u00fcn und Blau. Er definiert die Farbe durch das Mischen der Rot-, Gr\u00fcn- und Blauwerte, \u00e4hnlich wie du eine Farbe auf einer echten Palette mischen w\u00fcrdest.<\/p>\n Der RGB-Wert sieht wie folgt aus: RGB(153,0,255). Die erste Zahl steht f\u00fcr die rote Farbe, die zweite f\u00fcr die gr\u00fcne Farbe und die dritte f\u00fcr Blau.<\/p>\n Der Wert jeder Farbeingabe kann zwischen 0 und 255 liegen, wobei 0 bedeutet, dass die Farbe \u00fcberhaupt nicht vorhanden ist und 255, dass die jeweilige Farbe ihre maximale Intensit\u00e4t erreicht hat.<\/p>\n Der RGBA-Wert f\u00fcgt der Mischung einen weiteren Wert hinzu, n\u00e4mlich den Alphawert, der die Deckkraft darstellt. Er reicht von 0 (nicht transparent) bis 1 (vollst\u00e4ndig transparent).<\/p>\n Die Hex-Farbcodes funktionieren \u00e4hnlich wie die 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\u00e4t der roten Farbe an, die mittleren beiden Zahlen die Intensit\u00e4t der gr\u00fcnen Farbe und die letzten beiden die Intensit\u00e4t der blauen Farbe.<\/p>\n Eine weitere M\u00f6glichkeit, Farben in HTML zu definieren, ist die Verwendung von HSL-Werten. HSL steht f\u00fcr Farbton, S\u00e4ttigung und Helligkeit.<\/p>\n Der Farbton verwendet Gradzahlen von 0 bis 360. Auf einem Standard-Farbkreis liegt Rot bei 0\/360, Gr\u00fcn bei 120 und Blau bei 240.<\/p>\n Bei der S\u00e4ttigung wird in Prozent angegeben, wie ges\u00e4ttigt die Farbe ist. 0 steht f\u00fcr Schwarz und Wei\u00df und 100 f\u00fcr die volle Farbe.<\/p>\n Bei der Helligkeit werden \u00e4hnliche Prozentwerte wie bei der S\u00e4ttigung verwendet. In diesem Fall steht 0% f\u00fcr Schwarz und 100% f\u00fcr Wei\u00df.<\/p>\n Die lila Farbe, die wir in diesem Artikel verwendet haben, w\u00fcrde in HSL zum Beispiel so aussehen: HSL unterst\u00fctzt wie RGB auch die Deckkraft. In diesem Fall w\u00fcrdest du den HSL-Wert verwenden, wobei A f\u00fcr Alpha steht und mit einer Zahl von 0 bis 1 definiert wird. Wenn wir die Deckkraft des Beispiels Lila verringern wollten, w\u00fcrden wir folgenden Code verwenden: Da du nun wei\u00dft, wie du Farben definieren kannst, schauen wir uns nun verschiedene M\u00f6glichkeiten an, wie du die Farbe der HTML-Schrift \u00e4ndern kannst.<\/p>\n Bevor HTML5<\/a> eingef\u00fchrt und als Programmierstandard festgelegt wurde, konntest du die Schriftfarbe mithilfe von Font-Tags \u00e4ndern. Genauer gesagt, hast du den font-Tag mit dem Hier ist ein Beispiel daf\u00fcr, wie dieser Code mit Hex-Farbcode aussieht:<\/p>\n Und so kannst du die Textfarbe mithilfe des Farbnamens auf Lila setzen.<\/p>\n Der Wenn der <font>-Tag also nicht mehr unterst\u00fctzt wird, wie \u00e4ndert man dann die HTML-Schriftfarbe? Die Antwort lautet: mit Cascading Style Sheets oder CSS<\/a>.<\/p>\n Um die Farbe der HTML-Schrift mit CSS zu \u00e4ndern, verwendest du die CSS Property color in Kombination mit dem entsprechenden Selektor. Mit CSS<\/a> kannst du Farbnamen, RGB-, Hex- und HSL-Werte verwenden, um die Farbe zu bestimmen. Es gibt drei M\u00f6glichkeiten, die Schriftfarbe mit CSS zu \u00e4ndern.<\/p>\n Inline-CSS wird direkt in deine HTML-Datei eingef\u00fcgt. Du verwendest ein HTML-Tag wie <p> und gestaltest es dann mit der CSS Property color wie folgt:<\/p>\n Wenn du einen Hex-Wert verwenden willst, sieht dein Code wie folgt aus:<\/p>\n Wenn du den RGB-Wert verwenden willst, schreibst du ihn wie folgt:<\/p>\n Wenn du die HSL-Werte verwendest, w\u00fcrdest du folgenden Code benutzen:<\/p>\n Die Beispiele oben zeigen dir, wie du die Farbe eines Absatzes auf deiner Webseite \u00e4ndern kannst. Aber du bist nicht nur auf Abs\u00e4tze beschr\u00e4nkt. Du kannst auch die Schriftfarbe von \u00dcberschriften und Links \u00e4ndern.<\/p>\n Wenn du zum Beispiel das Wenn du die Hintergrundfarbe des gesamten Absatzes oder einer \u00dcberschrift \u00e4ndern willst, ist das ganz \u00e4hnlich wie bei der Schriftfarbe. Du musst stattdessen das Attribut Eingebettetes CSS befindet sich innerhalb der Der Code sieht wie folgt aus, wenn du den Farbnamen verwenden willst:<\/p>\n Der oben programmierte Code \u00e4ndert die Farbe jedes Absatzes auf der Seite in Lila. \u00c4hnlich wie bei der Inline-CSS-Methode kannst du verschiedene Selektoren verwenden, um die Schriftfarbe deiner \u00dcberschriften und Links zu \u00e4ndern.<\/p>\n Wenn du den Hex-Code verwenden m\u00f6chtest, sieht der Code folgenderma\u00dfen aus:<\/p>\n Das folgende Beispiel verwendet die RBGA-Werte, damit du ein Beispiel f\u00fcr die Einstellung der Deckkraft sehen kannst:<\/p>\n Der HSL-Code w\u00fcrde dann so aussehen:<\/p>\n Schlie\u00dflich kannst du auch externes CSS<\/a> verwenden, um die Schriftfarbe auf deiner Webseite zu \u00e4ndern. Externes CSS ist CSS, das in einer separaten Stylesheet-Datei gespeichert ist, die normalerweise style.css oder stylesheet.css hei\u00dft.<\/p>\n Dieses Stylesheet ist f\u00fcr alle Stile auf deiner Seite verantwortlich und legt die Schriftfarben und -gr\u00f6\u00dfen, R\u00e4nder, Abst\u00e4nde, Schriftfamilien, Hintergrundfarben und vieles mehr fest. Kurz gesagt, das Stylesheet ist daf\u00fcr verantwortlich, wie deine Seite optisch aussieht.<\/p>\n Um die Schriftfarbe mit externem CSS zu \u00e4ndern, verwendest du Selektoren<\/a>, um die gew\u00fcnschten Teile des HTML-Satzes zu gestalten. Mit diesem Code kannst du zum Beispiel den gesamten Text auf deiner Seite \u00e4ndern:<\/p>\n Denke daran, dass du RGB-, Hex- und HSL-Werte und nicht nur die Farbnamen verwenden kannst, um die Schriftfarbe zu \u00e4ndern. Wenn du das Stylesheet bearbeiten willst, solltest du dies in einem Code Editor<\/a> tun.<\/p>\n Jetzt wei\u00dft du also, wie du mit CSS die Schriftfarbe \u00e4ndern kannst. Aber welche Methode solltest du verwenden?<\/p>\n Wenn du den Inline-CSS-Code verwendest, f\u00fcgst du ihn direkt in deine HTML-Datei ein. Im Allgemeinen ist diese Methode f\u00fcr schnelle Korrekturen geeignet. Wenn du die Farbe eines bestimmten Absatzes oder einer \u00dcberschrift auf einer einzelnen Seite \u00e4ndern willst, ist diese Methode die schnellste und am wenigsten komplizierte Methode, um dies zu tun.<\/p>\n Allerdings k\u00f6nnen Inline-Stile die Gr\u00f6\u00dfe deiner HTML-Datei erh\u00f6hen. Je gr\u00f6\u00dfer deine HTML-Datei ist, desto l\u00e4nger dauert es, bis deine Webseite geladen ist. Dar\u00fcber hinaus kann Inline-CSS dein HTML un\u00fcbersichtlich machen. Deshalb wird von der Inline-Methode, bei der CSS zur \u00c4nderung der HTML-Schriftfarbe verwendet wird, generell abgeraten.<\/p>\n Eingebettetes CSS wird zwischen den <head>-Tags und innerhalb der <style>-Tags platziert. Wie Inline-CSS eignet es sich f\u00fcr schnelle Korrekturen und zum \u00dcberschreiben von Stilen, die in einem externen Stylesheet angegeben sind.<\/p>\n Ein bemerkenswerter Unterschied zwischen Inline- und eingebetteten Stilen ist, dass die eingebetteten Stile f\u00fcr jede Seite gelten, auf der die Head-Tags geladen werden, w\u00e4hrend die Inline-Stile nur f\u00fcr die spezifische Seite gelten, auf der sie sich befinden, typischerweise f\u00fcr das Element, auf das sie auf dieser Seite abzielen.<\/p>\n Die letzte Methode, externes CSS, verwendet ein eigenes Stylesheet, um deine visuellen Stile zu definieren. Im Allgemeinen ist es am besten, ein externes Stylesheet zu verwenden, um alle Stile an einem einzigen Ort zu speichern, von dem aus sie leicht zu bearbeiten sind. Au\u00dferdem werden so Pr\u00e4sentation und Design voneinander getrennt, sodass der Code leicht zu verwalten und zu pflegen ist.<\/p>\n Denk daran, dass Inline- und eingebettete Stile die Stile des externen Stylesheets au\u00dfer Kraft setzen k\u00f6nnen.<\/p>\n Die beiden wichtigsten Methoden, um die HTML-Schriftfarben zu \u00e4ndern, sind die Verwendung des Font-Tags oder der CSS-Stile. Beide Methoden haben ihre Vor- und Nachteile.<\/p>\n Das HTML-Schrift-Tag ist einfach zu benutzen, das ist ein Pluspunkt f\u00fcr ihn. CSS ist in der Regel komplizierter und l\u00e4nger zu erlernen als die Eingabe von Auch wenn das Font-Tag einfach zu verwenden ist, solltest du es nicht benutzen, wenn deine Webseite HTML verwendet. Wie bereits erw\u00e4hnt, wurde das font-Tag in HTML5 veraltet. Die Verwendung von veraltetem Code sollte vermieden werden, da die Browser ihn jederzeit nicht mehr unterst\u00fctzen k\u00f6nnen. Das kann dazu f\u00fchren, dass deine Webseite nicht mehr richtig funktioniert oder, schlimmer noch, von deinen Besuchern gar nicht mehr angezeigt wird.<\/p>\n CSS hat, genau wie der Font-Tag, seine Vor- und Nachteile. Der gr\u00f6\u00dfte Vorteil von CSS ist, dass es die richtige Methode ist, um die Schriftfarbe zu \u00e4ndern und alle anderen Stile f\u00fcr deine Webseite festzulegen.<\/p>\n Wie bereits erw\u00e4hnt, trennt es die Darstellung vom Design, was die Verwaltung und Pflege deines Codes erleichtert.<\/p>\n Die Kehrseite der Medaille ist, dass CSS und HTML5 im Vergleich zur alten Art, Code zu schreiben, Zeit brauchen, um richtig zu lernen und zu schreiben.<\/p>\n Bedenke, dass du mit CSS verschiedene M\u00f6glichkeiten hast, die Schriftfarbe zu \u00e4ndern, und jede dieser Methoden hat, wie bereits erw\u00e4hnt, ihre eigenen Vor- und Nachteile.<\/p>\n Da du nun wei\u00dft, wie du die Farbe der HTML-Schrift \u00e4ndern kannst, findest du hier ein paar Tipps, die dir helfen werden.<\/p>\n Anstatt Farben wahllos auszuw\u00e4hlen, solltest du Farbw\u00e4hler<\/a> verwenden, um die richtigen Farben auszuw\u00e4hlen. Der Vorteil eines Farbw\u00e4hlers ist, dass er dir den Farbnamen und die richtigen Hex-, RGB- und HSL-Werte liefert, die du in deinem Code verwenden musst.<\/p>\nWege zur Definition der Farbe<\/h2>\n
Farbname<\/h3>\n
![\"HTML](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/red-color-name.png\")
RGB- und RGBA-Werte<\/h3>\n
![\"RGB](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/rgb-values.png\")
HEX Wert<\/h3>\n
![\"HEX-Codes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/hex-values.png\")
HSL- und HSLA-Werte<\/h3>\n
![\"HSL-Farbwerte.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/HSL-color-values.png\")
hsl(276, 100%, 50%)<\/code>.<\/p>\nhsl(276, 100%, 50%, .85)<\/code>.<\/p>\nDie alten:
<font><\/code> Tags<\/h2>\ncolor<\/code>-Attribut verwendet, um die Textfarbe festzulegen. Die Farbe wurde entweder mit ihrem Namen oder mit ihrem Hex-Code angegeben.<\/p>\n<font color=\"#800080\">This text is purple.<\/font><\/code><\/pre>\n<font color=\"purple\">This text is purple.<\/font> <\/code><\/pre>\n<font><\/code>-Tag ist jedoch in HTML5 veraltet und wird nicht mehr verwendet. Die \u00c4nderung der Schriftfarbe ist eine Design-Entscheidung, und Design ist nicht der Hauptzweck von HTML. Daher ist es sinnvoll, dass die <font><\/code>-Tags in HTML5 nicht mehr unterst\u00fctzt werden.<\/p>\nDas Neue: CSS-Stile<\/h2>\n
Inline CSS<\/h3>\n
<p style=\"color: purple\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:#800080\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:RGB(153,0,255)\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:hsl(276, 100%, 50%)\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p><\/code>-Tag oben durch das <h2><\/code>-Tag ersetzt, \u00e4ndert sich die Farbe des \u00dcberschriftstextes, und wenn du es durch das <a><\/code>-Tag ersetzt, \u00e4ndert sich die Farbe des Links. Du kannst auch das <span>-Element<\/a> verwenden, um eine beliebige Menge an Text einzuf\u00e4rben.<\/p>\nbackground-color<\/code> verwenden und entweder den Farbnamen, Hexadezimal-, RGB- oder HSL-Werte verwenden, um die Farbe festzulegen. Hier ist ein Beispiel:<\/p>\n<p style=\"background-color: purple\"><\/code><\/pre>\nEingebettetes CSS<\/h3>\n
<style><\/code>-Tags und wird zwischen den Head-Tags deines HTML-Dokuments eingef\u00fcgt.<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: purple;\n }\n<\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: #800080;\n }\n <\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n\n<html>\n\n<head>\n\n<style>\n\n<p> {\n\ncolor: RGB(153,0,255,0.75),\n\n}\n\n<\/style>\n\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: hsl(276, 100%, 50%),\n }\n <\/style>\n<\/head><\/code><\/pre>\nExternes CSS<\/h3>\n
body {color: purple;}<\/code><\/pre>\nInline, eingebettet oder extern?<\/h3>\n
Font-Tags oder CSS-Stile: Pro und Kontra<\/h2>\n
HTML Font Tags Vor- und Nachteile<\/h3>\n
<font color=\"purple\"><\/code>. Wenn du eine \u00e4ltere Webseite hast, die nicht mit HTML5 arbeitet, ist das font-Tag eine praktikable Methode, um die Schriftfarbe zu \u00e4ndern.<\/p>\nVor- und Nachteile von CSS<\/h3>\n
Tipps zum \u00c4ndern der HTML Font-Farbe<\/h2>\n
Verwende einen Farbw\u00e4hler<\/h3>\n
![\"Farbw\u00e4hler](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Color-picker-tool.png\")
\u00dcberpr\u00fcfe den Kontrast<\/h3>\n
![\"Verwende](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Checking-contrast.png\")
![\"Nutze](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Using-Inspect-to-get-color-codes.png\")