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

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

Zebra-Effekt von Tag tr

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #aaaaaa und Farbwert #bbbbbb.

<style type="text/css"><!--
  tr.gerade { 
    background-color: #aaaaaa;
  }
  tr.ungerade { 
    background-color: #bbbbbb;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr class="gerade"><td>Ha~a</td><td>Hb~a</td><td>Hc~a</td></tr>
<tr class="ungerade"><td>Ha~b</td><td>Hb~b</td><td>Hc~b</td></tr>
<tr class="gerade"><td>Ha~c</td><td>Hb~c</td><td>Hc~c</td></tr>
</table>

Weiteres zu tr finden Sie in Tabellen in HTML. Weiteres zum Tag tr ist in der HTML Referenz bei <tr> ausführlich beschrieben.

Text- und Unterstreichungsfarben von HTML-Tag address

Für dieses Beispiel ändern wir die Textfarbe von <address> auf Farbwert #bbbbbb und lassen die Hintergrundfarbe unverändert. Die Schriftart setzen wir auf sans-serif. Die Schriftgröße verringern wir auf 85%. Wir unterstreichen den Inhalt von <address> mit Hilfe eines einfallenden Rahmens mit 2 Pixel Dicke in Farbwert #aaaaaa. Das ist in HTML kaum möglich. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  address { 
    font-size: 85%; 
    color: #bbbbbb; 
    font-family: sans-serif; 
    border-bottom: 2px inset #aaa;
  }
//-->
</style>

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

Mehr zum Thema lesen Sie in Blockorientierte Elemente in HTML. Zur Beschreibung des HTML-Tag <address>.