Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #eeeeee und Farbwert #aaaaaa

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Beispiele zur Kombination von Farbwert #eeeeee und Farbwert #aaaaaa

Hintergrund/Text-Kombination mit Tag kbd

Hier ändern wir die Textfarbe von <kbd> auf Farbwert #aaaaaa und die Hintergrundfarbe von <kbd> auf Farbwert #eeeeee. Als Schriftart setzen wir monospace. Als Schriftgröße setzen wir 117%.

<style type="text/css"><!--
  kbd { 
    color: #aaaaaa; 
    background-color: #eee; 
    font-family: monospace; 
    font-size: 117%;
  }
//-->
</style>

Weiteres zum Thema können Sie in Text in HTML nachlesen. Der HTML-Befehl kbd ist in der HTML Referenz bei <kbd> ausführlich gezeigt.

Zebra-Effekt mit Tag th

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <th> mit den Hintergrundfarben Farbwert #eeeeee und Farbwert #aaaaaa.

<style type="text/css"><!--
  th.even { 
    background-color:#eee;
  }
  th.odd { 
    background-color: #aaaaaa;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd angewendet.

<table>
<tr><td class="even">GA~A</td><td class="odd">GB~A</td><td class="even">GC~A</td></tr>
<tr><td class="even">GA~B</td><td class="odd">GB~B</td><td class="even">GC~B</td></tr>
<tr><td class="even">GA~C</td><td class="odd">GB~C</td><td class="even">GC~C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachsehen. Weiteres zum Befehl th ist in der HTML Referenz bei <th> zusammengestellt.