CSS/Eigenschaften/Textformatierung/color

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Textformatierung(Weitergeleitet von Color)
Wechseln zu: Navigation, Suche

Mit der Eigenschaft color legen Sie die Farbe der Schrift bzw. des Textvordergrundes fest.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Hinweis

Verwenden Sie stets möglichst kontrastreiche Kombinationen aus Vorder- und Hintergrundfarben, um sehbehinderten Menschen den Zugang zu Ihren Inhalten nicht zu erschweren. Der Color Contrast Checker kann Ihnen im Vorfeld bei der Farbwahl behilflich sein. Vorhandene CSS-Ressourcen können Sie unter anderem bei Juicy Studio hinsichtlich der verwendeten Farben prüfen lassen.

Erlaubt sind dabei folgende Werte:

Beachten Sie: color: currentcolor; und color: inherit; bewirken dasselbe, da die Schriftfarbe ohnehin vererbt wird.
Beispiel: verschiedene Werte für color ansehen …
p         {color: green; font-weight: bold;}
h1        {color: #abc;}
a         {color: #de5410;}
a:visited {color: rgb(153,68,0);}
span      {color: hsl(240,100%,50%);}
Das HTML-Dokument erhält im style-Bereich CSS-Regelsätze, mit denen verschiedene Elemente unterschiedliche Schriftfarben erhalten. Dabei weren die Farbangaben variert.
h2        {color: #abc; background-color: #000;}
Es ist sinnvoll, neben der Farbzuweisung der Schriftfarbe mit color auch den Hintergrund mit background-color zu gestalten.
So bietet die h1-Überschrift gegenüber dem weißen Hintergrund nur wenig Kontrast. Durch die Angabe der schwarzen Hintergrundfarbe ist die hellgraue Schrift jetzt gut lesbar.


Empfehlung: Der SELFHTML-Farbauswähler kann Ihnen beim Ermitteln der Farbwerte helfen.

Vererbung[Bearbeiten]

Eine für ein Element festgelegte Schriftfarbe wird ohne Ihr Zutun an die Kindelemente vererbt.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
    <title>Demonstration von inherit</title>
    <style>
      body         { color: gray; font-family: arial, sans-serif; width: 30em; }
      .inherited a { color: inherit; }
      ul           { color: red; }
    </style>
  </head>
  <body>
    <h1>Textlinks in Textfarbe</h1>
    <p>
      Unbesuchte
      <a href="http://wiki.selfhtml.org">Verweise</a>
      werden von den meisten Browsern in blauer Farbe dargestellt.
      Dies ist im Browserstylesheet so festgelegt.
    </p>
    <p class="inherited">
      Wenn man dies nicht möchte, kann man im Stylesheet der Seite
      explizit angeben, dass
      <a href="http://forum.de.selfhtml.org">Verweise</a>
      die Farbe des Elternelements erhalten.
    </p>
    <ul class="inherited">
      <li><a href="#">Link in einer Liste</a></li>
      <li><a href="#">Link in einer Liste</a></li>
    </ul>
  </body>
</html>

Transparenz[Bearbeiten]

Das Festlegen von Farben durch die Angabe von Farbton, Sättigung und Helligkeit mittels hsl(h,s%,l%) wurde ebenso wie die Farbdefinitionen mit Transparenz (rgba(r,g,b,a) bzw. hsla(h,s%,l%,a)) nicht von allen Browsern unterstützt. Damit auch Browser, die dies nicht verstehen, eine Farbe anzeigen können, die der gewünschten nahe kommt, sollten Sie im CSS mehrere Angaben machen.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel
span {
  color: rgb(230,140,140);
  color: rgba(230,100,100,0.5);
}
Hier gilt für alle Browser zunächst die Farbangabe ohne Transparenz. Nur Browser, die auch die zweite Angabe verstehen, überschreiben mit dieser dann die erste.

Da die Versionen IE6-8 mitterweile ausgestorben sind, muss dies nicht mehr berücksichtigt werden.

siehe auch[Bearbeiten]

SVG


Weblinks[Bearbeiten]