Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray34 und Farbwert #eeeeee

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 gray34 und Farbwert #eeeeee

Text- und Unterstreichungsfarben von HTML-Tag strike

Wir ändern Hher die Textfarbe von <strike> auf Farbwert #eeeeee. Die Schriftart ändern wir auf courier new. Die Schriftgröße setzen wir auf 9px. Wir unterstreichen den Inhalt von <strike> mit Hilfe eines gefurchten Rahmens mit 5 Punkte Dicke in Farbe gray34. In HTML ist dies nicht machbar. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  strike { 
    font-size:9px; 
    border-bottom-style:groove; 
    color:#eeeeee; 
    border-bottom-width:5pt; 
    border-bottom-color:gray34; 
    font-family:courier new;
  }
//-->
</style>

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

Mehr zum Thema strike lesen Sie in Text in HTML. Weiteres zum hier gezeigten HTML-Befehl strike ist in der HTML Referenz unter <strike> ausführlich beschrieben.

Zebra-Effekt von Befehl th

Man spricht von einem 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 .ung und .ger für <th> mit unterschiedlichen Hintergrundfarben Farbe gray34 und Farbwert #eeeeee.

<style type="text/css"><!--
  th.ung { 
    background-color:gray34;
  }
  th.ger { 
    background-color: #eee;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="ung">M1:1</td><td class="ger">M2:1</td><td class="ung">M3:1</td></tr>
<tr><td class="ung">M1:2</td><td class="ger">M2:2</td><td class="ung">M3:2</td></tr>
<tr><td class="ung">M1:3</td><td class="ger">M2:3</td><td class="ung">M3:3</td></tr>
</table>

Mehr zum Thema th erfahren Sie in Tabellen in HTML. Einzelheiten des hier gezeigten HTML-Tag <th>.