Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #333333 und Farbwert #999999

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 #333333 und Farbwert #999999

Zebra-Effekt bei Tag tr

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <tr> mit den Hintergrundfarben Farbwert #333333 und Farbwert #999999.

<style type="text/css"><!--
  tr.even { 
    background-color:#333333;
  }
  tr.odd { 
    background-color:#999;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr class="even"><td>B1:1</td><td>B2:1</td><td>B3:1</td></tr>
<tr class="odd"><td>B1:2</td><td>B2:2</td><td>B3:2</td></tr>
<tr class="even"><td>B1:3</td><td>B2:3</td><td>B3:3</td></tr>
</table>

Weiteres zu tr können Sie in Tabellen in HTML erfahren. Weiteres zum HTML-Befehl <tr>.

Hintergrund/Text-Kombination von Befehl p

Wir ändern für dieses Beispiel die Textfarbe von <p> auf Farbwert #999999 und die Hintergrundfarbe von <p> auf Farbwert #333333. Als Schriftart setzen wir courier new und erhöhen die Schriftgröße auf 117%.

<style type="text/css"><!--
  p { 
    color: #999; 
    font-family: courier new; 
    font-size: 117%; 
    background-color: #333;
  }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML finden. Einzelheiten vom HTML-Befehl p finden Sie in der HTML Referenz unter <p>.