Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray187 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 Farbe gray187 und Farbwert #222222

Zebra-Effekt bei Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem Zebra-Effekt. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <th> mit den Hintergrundfarben Farbe gray187 und Farbwert #222222.

<style type="text/css"><!--
  th.yang { 
    background-color: gray187;
  }
  th.ying { 
    background-color: #222;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd angewendet.

<table>
<tr><td class="yang">Xa:a</td><td class="ying">Xb:a</td><td class="yang">Xc:a</td></tr>
<tr><td class="yang">Xa:b</td><td class="ying">Xb:b</td><td class="yang">Xc:b</td></tr>
<tr><td class="yang">Xa:c</td><td class="ying">Xb:c</td><td class="yang">Xc:c</td></tr>
</table>

Mehr zu th können Sie in Tabellen in HTML nachsehen. Möglichkeiten des Tag th finden Sie in der HTML Referenz unter <th>.

Text- und Unterstreichungsfarben bei Tag h3

Eine Überschrift erzeugen Sie mit Tag <h3>. Sie kann hervorgehoben und farblich gestaltet werden.

Für dieses Beispiel ändern wir die Textfarbe von <h3> auf Farbwert #222222 und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf monospace und erhöhen die Schriftgröße auf 129%. Wir unterstreichen den Inhalt von <h3> mit Hilfe eines herausstehenden Rahmens mit 2 Punkte Dicke in Farbe gray187. Das ist mit HTML nicht möglich. Wir verwenden daher CSS.

<style type="text/css"><!--
  h3 { 
    font-size:129%; 
    border-bottom-style:outset; 
    border-bottom-color:gray187; 
    color:#222; 
    border-bottom-width:2pt; 
    font-family:monospace;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zum Thema h3 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Möglichkeiten des hier verwendeten HTML-Befehl h3 sind in der HTML Referenz unter <h3> genau gezeigt.