Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray238 und Farbwert #777777

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 gray238 und Farbwert #777777

Zebra-Effekt mit Tag tr

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <tr> mit den Hintergrundfarben Farbe gray238 und Farbwert #777777.

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

Diese CSS-Klassen werden abwechselnd genutzt.

<table>
<tr class="gerade"><td>WA:A</td><td>WB:A</td><td>WC:A</td></tr>
<tr class="ungerade"><td>WA:B</td><td>WB:B</td><td>WC:B</td></tr>
<tr class="gerade"><td>WA:C</td><td>WB:C</td><td>WC:C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML finden. Einzelheiten des hier gezeigten HTML-Tag tr erfahren Sie in der HTML Referenz unter <tr>.

Füllen und Umranden bei Tag dt

Hier umranden wir <dt> mit einem . Die Hintergrundfarbe für <dt> setzen wir auf Farbe gray238. In HTML geht das kaum. Wir nutzen daher CSS zur Formatierung.

<style type="text/css"><!--
  dt { 
    border-color: #777777; 
    background-color: gray238; 
    border-style: inset; 
    border-width: 1px;
  }
//-->
</style>

Weiteres zum Thema dt lesen Sie in Listen und Glossare in HTML. Mehr zum HTML-Befehl dt erfahren Sie in der HTML Referenz unter <dt>.