Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray68 und Farbwert #111111

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 gray68 und Farbwert #111111

Hintergrund/Text-Kombination bei Tag pre

Wir ändern in diesem Beispiel die Textfarbe von <pre> auf Farbwert #111111 und die Hintergrundfarbe von <pre> auf Farbe gray68. Als Schriftart wählen wir courier new und vergrößern die Schriftgröße auf 118%.

<style type="text/css"><!--
  pre { 
    font-size: 118%; 
    font-family: courier new; 
    background-color: gray68; 
    color: #111111;
  }
//-->
</style>

Mehr zu pre erfahren Sie in Blockorientierte Elemente in HTML. Zur Beschreibung des Befehl <pre>.

Zebra-Effekt bei Tag tr

Man spricht von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <tr> mit den Hintergrundfarben Farbe gray68 und Farbwert #111111.

<style type="text/css"><!--
  tr.gerade { 
    background-color:gray68;
  }
  tr.ungerade { 
    background-color: #111111;
  }
//-->
</style>

Diese Klassen werden abwechselnd verwendet.

<table>
<tr class="gerade"><td>Ca/a</td><td>Cb/a</td><td>Cc/a</td></tr>
<tr class="ungerade"><td>Ca/b</td><td>Cb/b</td><td>Cc/b</td></tr>
<tr class="gerade"><td>Ca/c</td><td>Cb/c</td><td>Cc/c</td></tr>
</table>

Mehr zum Thema tr lesen Sie in Tabellen in HTML. Einzelheiten des hier verwendeten HTML-Tag tr sind in der HTML Referenz unter <tr> genau zusammengestellt.