Ressourcen: 17 HTML Standard Farbnamen - Kombination von Farbe gray und Farbe green

HTML verfügt seit jeher über 17 Standard Farbnamen.

Sie entstehen dadurch, dass die 8 Grundfarben jeweils maximal und zu 50% enthalten sind.

Zu diesen 16 Farben kommt mit grey eine alternative Schreibweise für gray.

Beispiele zur Kombination von Farbe gray und Farbe green

Zebra-Effekt mit Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <th> mit unterschiedlichen Hintergrundfarben Farbe gray und Farbe green.

<style type="text/css"><!--
  th.ungerade { 
    background-color: gray;
  }
  th.gerade { 
    background-color: green;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr><td class="ungerade">S1/1</td><td class="gerade">S2/1</td><td class="ungerade">S3/1</td></tr>
<tr><td class="ungerade">S1/2</td><td class="gerade">S2/2</td><td class="ungerade">S3/2</td></tr>
<tr><td class="ungerade">S1/3</td><td class="gerade">S2/3</td><td class="ungerade">S3/3</td></tr>
</table>

Mehr zum Thema erfahren Sie in Tabellen in HTML. Einzelheiten vom HTML-Tag th sind in der HTML Referenz bei <th> genau beschrieben.

Text- und Unterstreichungsfarben mit HTML-Tag h2

Eine Überschrift der 2. Stufe erzeugen Sie mit HTML-Tag <h2>. Diese kann farblich gestaltet und hervorgehoben werden.

Für dieses Beispiel ändern wir die Textfarbe von <h2> auf Farbe green und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf arial und setzen die Schriftgröße auf 13px. Wir unterstreichen den Inhalt von <h2> mit Hilfe eines gefurchten Rahmens mit 2 Pixel Dicke in Farbe gray. Das geht in HTML kaum. Daher verwenden wir CSS.

<style type="text/css"><!--
  h2 { 
    font-family:arial; 
    color:green; 
    font-size:13px; 
    border-bottom-width:2px; 
    border-bottom-color:gray; 
    border-bottom-style:groove;
  }
//-->
</style>

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

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Die Beschreibung vom hier genutzten Befehl h2 erfahren Sie in der HTML Referenz unter <h2>.