Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #dddddd und Farbwert #222222

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 #dddddd und Farbwert #222222

Zebra-Effekt bei Tag td

Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <td> mit unterschiedlichen Hintergrundfarben Farbwert #dddddd und Farbwert #222222.

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

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ger">H1/1</td><td class="ung">H2/1</td><td class="ger">H3/1</td></tr>
<tr><td class="ger">H1/2</td><td class="ung">H2/2</td><td class="ger">H3/2</td></tr>
<tr><td class="ger">H1/3</td><td class="ung">H2/3</td><td class="ger">H3/3</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML finden. Mehr zum hier verwendeten HTML-Tag td lesen Sie in der HTML Referenz unter <td>.

Füllen und Umranden bei HTML-Befehl hr

Hier umranden wir <hr> mit einem gepunkteten, 2 Punkte dicken Rahmen in Farbwert #222222 . Den Hintergrund von <hr> setzen wir entsprechend auf Farbwert #dddddd. Dies ist mit HTML kaum möglich. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  hr { 
    border-style:dotted; 
    border-color:#222222; 
    border-width:2pt; 
    background-color:#ddd;
  }
//-->
</style>

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Weiteres zum Befehl <hr>.