Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #444444 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 #444444 und Farbwert #aaaaaa

Zebra-Effekt bei Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man von einem so genannten Zebra-Effekt. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <td> mit unterschiedlichen Hintergrundfarben Farbwert #444444 und Farbwert #aaaaaa.

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

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ger">Ka/a</td><td class="ung">Kb/a</td><td class="ger">Kc/a</td></tr>
<tr><td class="ger">Ka/b</td><td class="ung">Kb/b</td><td class="ger">Kc/b</td></tr>
<tr><td class="ger">Ka/c</td><td class="ung">Kb/c</td><td class="ger">Kc/c</td></tr>
</table>

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

Füllen und Umranden von HTML-Befehl p

In diesem Beispiel umranden wir <p> mit einem gefurchten, 2 Pixel dicken Rahmen in Farbwert #aaaaaa . Die Hintergrundfarbe für <p> färben wir mit Farbwert #444444. Dies ist mit HTML nicht möglich. Wir verwenden daher CSS.

<style type="text/css"><!--
  p { 
    border-style:groove; 
    border-color:#aaa; 
    background-color:#444; 
    border-width:2px;
  }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Weiteres zum Tag <p>.