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

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

Text- und Unterstreichungsfarben von HTML-Befehl h6

Mit Befehl <h6> setzen Sie eine Überschrift. Diese kann man farblich gestalten und hervorheben.

Wir ändern bei diesem Beispiel die Textfarbe von <h6> auf Farbwert #aaaaaa. Die Schriftart ändern wir auf courier new und setzen die Schriftgröße auf 12pt. Wir unterstreichen den Inhalt von <h6> mit Hilfe eines gefurchten Rahmens mit 2 Pixel Dicke in Farbwert #777777. Das geht in HTML kaum. Wir verwenden daher CSS.

<style type="text/css"><!--
  h6 { 
    border-bottom-width:2px; 
    font-size:12pt; 
    border-bottom-color:#777; 
    font-family:courier new; 
    border-bottom-style:groove; 
    color:#aaa;
  }
//-->
</style>

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

Weiteres zum Thema lesen Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum hier genutzten HTML-Tag <h6>.

Zebra-Effekt mit HTML-Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man von einem Zebra-Effekt. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit den Hintergrundfarben Farbwert #777777 und Farbwert #aaaaaa.

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

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ger">JA~A</td><td class="ung">JB~A</td><td class="ger">JC~A</td></tr>
<tr><td class="ger">JA~B</td><td class="ung">JB~B</td><td class="ger">JC~B</td></tr>
<tr><td class="ger">JA~C</td><td class="ung">JB~C</td><td class="ger">JC~C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML finden. Der hier gezeigte HTML-Befehl th ist in der HTML Referenz bei <th> ausführlich beschrieben.