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

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 Farbe gray136 und Farbwert #eeeeee

Hintergrund/Text-Kombination von Tag em

Für dieses Beispiel ändern wir die Textfarbe von <em> auf Farbwert #eeeeee und die Hintergrundfarbe von <em> auf Farbe gray136. Die Schriftart setzen wir auf courier new. Als Schriftgröße setzen wir 129%.

<style type="text/css"><!--
  em { 
    color:#eeeeee; 
    font-size:129%; 
    background-color:gray136; 
    font-family:courier new;
  }
//-->
</style>

Weiteres zum Thema können Sie in Text in HTML erfahren. Mehr zum hier verwendeten Tag <em>.

Zebra-Effekt mit HTML-Befehl th

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <th> mit den Hintergrundfarben Farbe gray136 und Farbwert #eeeeee.

<style type="text/css"><!--
  th.ying { 
    background-color: gray136;
  }
  th.yang { 
    background-color:#eeeeee;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="ying">Q1~1</td><td class="yang">Q2~1</td><td class="ying">Q3~1</td></tr>
<tr><td class="ying">Q1~2</td><td class="yang">Q2~2</td><td class="ying">Q3~2</td></tr>
<tr><td class="ying">Q1~3</td><td class="yang">Q2~3</td><td class="ying">Q3~3</td></tr>
</table>

Weiteres zum Thema th finden Sie in Tabellen in HTML. Einzelheiten vom hier genutzten HTML-Tag th sind in der HTML Referenz unter <th> zusammengestellt.