Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #d1d1d1 und Farbe gray124

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Beispiele zur Kombination von Farbwert #d1d1d1 und Farbe gray124

Zebra-Effekt mit Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <tr> mit den Hintergrundfarben Farbwert #d1d1d1 und Farbe gray124.

<style type="text/css"><!--
  tr.odd { 
    background-color:#d1d1d1;
  }
  tr.even { 
    background-color:gray124;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr class="odd"><td>Ba:a</td><td>Bb:a</td><td>Bc:a</td></tr>
<tr class="even"><td>Ba:b</td><td>Bb:b</td><td>Bc:b</td></tr>
<tr class="odd"><td>Ba:c</td><td>Bb:c</td><td>Bc:c</td></tr>
</table>

Mehr zu tr können Sie in Tabellen in HTML finden. Einzelheiten vom hier verwendeten HTML-Tag <tr>.

Hintergrund/Text-Kombination bei HTML-Tag h5

Mit HTML-Tag <h5> setzen Sie eine Überschrift der 5. Stufe. Sie kann farblich gestaltet werden.

Hier ändern wir die Textfarbe von <h5> auf Farbe gray124 und die Hintergrundfarbe von <h5> auf Farbwert #d1d1d1. Die Schriftart ändern wir auf arial. Die Schriftgröße setzen wir auf 9pt.

<style type="text/css"><!--
  h5 { 
    color:gray124; 
    background-color:#d1d1d1; 
    font-family:arial; 
    font-size:9pt;
  }
//-->
</style>

Weiteres zum Thema h5 lesen Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des hier genutzten HTML-Befehl <h5>.