CSS/Eigenschaften/Textformatierung/color

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

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.
  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
    <title>color</title>
    <style>
      body      { font-family: arial, sans-serif; width: 30em; }
      p         { color: green; font-size: 18px; font-weight: bold; line-height: 1.5em; }
      h1        { color: #abc; }
      a         { color: #de5410; }
      a:visited { color: rgb(153,68,0); }
      span      { color: hsl(240,100%,50%); }
    </style>
  </head>
  <body>
    <h1>color - Schriftfarbe festlegen</h1>
    <p>
      <a href="http://wiki.selfhtml.org">Verweise</a>
      werden von den meisten Browsern in
      <span>blauer Farbe</span>
      dargestellt. Wenn das
      <a href="http://wiki.selfhtml.org/wiki/Glossar">Verweisziel</a>
      bereits besucht wurde, ändert sich die
      <span>Farbe</span>
      des Links.
    </p>
  </body>
</html>

Erlaubt sind dabei folgende Werte:

Beachten Sie: color: currentcolor; und color: inherit; bewirken dasselbe, da die Schriftfarbe ohnehin vererbt wird.
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]

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

Das Festlegen von Farben durch die Angabe von Farbton, Sättigung und Helligkeit mittels hsl(h,s%,l%) wird 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.

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.

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]