Ressourcen: 16 Graustufen in HTML - Kombination von Farbe black und Farbwert #cccccc

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 black und Farbwert #cccccc

Zebra-Effekt mit Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom Zebra-Effekt. Er unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <td> mit unterschiedlichen Hintergrundfarben Farbe black und Farbwert #cccccc.

<style type="text/css"><!--
  td.ger { 
    background-color:black;
  }
  td.ung { 
    background-color: #cccccc;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr><td class="ger">I1/1</td><td class="ung">I2/1</td><td class="ger">I3/1</td></tr>
<tr><td class="ger">I1/2</td><td class="ung">I2/2</td><td class="ger">I3/2</td></tr>
<tr><td class="ger">I1/3</td><td class="ung">I2/3</td><td class="ger">I3/3</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Weiteres zum hier verwendeten HTML-Tag td erfahren Sie in der HTML Referenz unter <td>.

Hintergrund/Text-Kombination mit HTML-Befehl colgroup

Hier ändern wir die Textfarbe von <colgroup> auf Farbwert #cccccc und die Hintergrundfarbe von <colgroup> auf Farbe black. Die Schriftart setzen wir auf arial und als Schriftgröße entscheiden wir uns für 128%.

<style type="text/css"><!--
  colgroup { 
    color: #ccc; 
    background-color: black; 
    font-size: 128%; 
    font-family: arial;
  }
//-->
</style>

Weiteres zum Thema colgroup können Sie in Tabellen in HTML lesen. Weiteres zum Tag <colgroup>.