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

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 #888888

Text- und Unterstreichungsfarben bei HTML-Befehl blockquote

Hier ändern wir die Textfarbe von <blockquote> auf Farbwert #888888. Die Schriftart ändern wir auf verdana und vergrößern die Schriftgröße auf 115%. Wir unterstreichen den Inhalt von <blockquote> mit Hilfe eines doppelten Rahmens mit 4 Pixel Dicke in Farbwert #777777. Das geht in HTML kaum. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  blockquote { 
    color: #888888; 
    border-bottom-color: #777777; 
    font-family: verdana; 
    border-bottom-width: 4px; 
    font-size: 115%; 
    border-bottom-style: double;
  }
//-->
</style>

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

Mehr zum Thema lesen Sie in Blockorientierte Elemente in HTML. Der hier gezeigte HTML-Tag blockquote ist in der HTML Referenz bei <blockquote> ausführlich gezeigt.

Zebra-Effekt von HTML-Tag tr

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <tr> mit den Hintergrundfarben Farbwert #777777 und Farbwert #888888.

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

Diese werden dann abwechselnd verwendet.

<table>
<tr class="ungerade"><td>F1.1</td><td>F2.1</td><td>F3.1</td></tr>
<tr class="gerade"><td>F1.2</td><td>F2.2</td><td>F3.2</td></tr>
<tr class="ungerade"><td>F1.3</td><td>F2.3</td><td>F3.3</td></tr>
</table>

Mehr zu tr erfahren Sie in Tabellen in HTML. Mehr zum Befehl tr erfahren Sie in der HTML Referenz unter <tr>.