Farben und CSS

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Mit Hilfe von Stylesheets können Sie die Farbe eines jeden HTML-Elements kontrollieren, das in Farbe darstellbar ist. Die wichtigsten Elemente sind:

  • Text
  • Überschriften (als eine spezielle Form von Text)
  • Hintergründe
  • Hintergrundfarben von Text und Überschriften

Wenn Sie sich nun vor Augen führen, wann, wie und vor allem in welchen Kombinationen Sie die Farben dieser Elemente mit CSS definieren können, tut sich eine ganze Reihe neuer Möglichkeiten auf.

Verändern Sie etwa die Textfarbe und fügen dann noch einen farbigen Hintergrund hinzu, vermittelt eine zuvor recht gewöhnlich aussehende Seite (siehe Abbildung Version mit schwarzer Schrift auf weißem Hintergrund) einen ganz neuen Eindruck. Die Abbildung Version mit gelber Schrift auf schwarzem Hintergrund zeigt, wie die gleiche Seite aussieht, wenn Sie gelben Text auf schwarzem Hintergrund einsetzen. In der Abbildung Die Schwarz-auf-Gelb-Variante sehen Sie das Gegenteil: schwarzer Text auf gelbem Hintergrund. Man kann zwar darüber streiten, ob die farbige Version genauso gut lesbar ist wie das schwarz-weiße Original in der Abbildung Version mit schwarzer Schrift auf weißem Hintergrund. Zumindest fallen die beiden Versionen deutlich besser auf.

Version mit schwarzer Schrift auf weißem Hintergrund

Abbildung: Version mit schwarzer Schrift auf weißem Hintergrund.

Version mit gelber Schrift auf schwarzem Hintergrund

Abbildung: Version mit gelber Schrift auf schwarzem Hintergrund.

Hier die Stilregel für den Effekt in der Abbildung Version mit gelber Schrift auf schwarzem Hintergrund. Sie sehen, es ist ziemlich einfach, aber im Ergebnis umso deutlicher:

body {
  color: yellow;
  background-color: black;
}

Die Definition des Wertes mit Hilfe des Farbnamens ist nur eine von mehreren Möglichkeiten, Farben in CSS festzulegen. (Ausführliche Informationen dazu finden Sie unter Etwas Farbe ins Spiel bringen.)

Hier die Stilregel für den Effekt in der Abbildung Die Schwarz-auf-Gelb-Variante. Seien Sie nicht überrascht, es ist genau das Gegenteil der Stilregel von der Abbildung Version mit gelber Schrift auf schwarzem Hintergrund:

body {
  color: black;
  background-color: yellow;
}

Die Schwarz-auf-Gelb-Variante

Abbildung: Die Schwarz-auf-Gelb-Variante.

Vielleicht empfinden Sie die Verwendung einer absoluten Kontrastfarbe als Hintergrund zu überwältigend. In der Abbildung Die Seite mit gelb-schwarzen Überschriften ist eine neue Variation zum Thema Text und Farbe. Hier haben wir nur die Texte der Überschriften gelb auf schwarzen Grund gesetzt. Der Rest der Seite wurde unverändert vom ersten Beispiel in der Abbildung Version mit schwarzer Schrift auf weißem Hintergrund übernommen.

Folgende Stilregel erzeugt die Überschrift in der Abbildung Die Seite mit gelb-schwarzen Überschriften:

h1, h2, h3, h4, h5, h6 {
  color: yellow;
  background-color: black;
}

Wie Sie im Code sehen, verwenden wir hier keine außergewöhnlichen Stylesheet-Tricks (wie z. B. die Überschriften in ein <div>-Tag zu stellen oder eine Box um sie herum zu erzeugen). In der Browseransicht ist die Überschrift nämlich ein Element auf Blockebene, das ohne zusätzliche Anweisung in der gesamten Breite des Browsers dargestellt wird. Weisen Sie also einer Überschrift einen Wert für die Eigenschaft background-color zu, wird sie auch auf den gesamten horizontalen Bereich um die Überschrift herum angewandt.

Die Seite mit gelb-schwarzen Überschriften

Abbildung: Die Seite mit gelb-schwarzen Überschriften.

CSS bietet farbbewussten Designern noch eine ganze Reihe weiterer Vorteile; sie stehen unter Etwas Farbe ins Spiel bringen. Hier wollen wir bloß verschiedene Dinge ansprechen, die auf Sie zukommen, wenn Sie CSS richtig einsetzen wollen.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg