Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray17 und Farbwert #555555

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 Farbe gray17 und Farbwert #555555

Zebra-Effekt bei Tag tr

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <tr> mit unterschiedlichen Hintergrundfarben Farbe gray17 und Farbwert #555555.

<style type="text/css"><!--
  tr.ger { 
    background-color: gray17;
  }
  tr.ung { 
    background-color: #555;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr class="ger"><td>Da~a</td><td>Db~a</td><td>Dc~a</td></tr>
<tr class="ung"><td>Da~b</td><td>Db~b</td><td>Dc~b</td></tr>
<tr class="ger"><td>Da~c</td><td>Db~c</td><td>Dc~c</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Der Tag tr ist in der HTML Referenz unter <tr> genau gezeigt.

Text- und Unterstreichungsfarben mit HTML-Tag samp

Bei diesem Beispiel ändern wir die Textfarbe von <samp> auf Farbwert #555555 und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf sans-serif und verkleinern die Schriftgröße auf 93%. Wir unterstreichen den Inhalt von <samp> mit Hilfe eines herausstehenden Rahmens mit 3 Punkte Dicke in Farbe gray17. Das geht mit HTML nicht. Daher nutzen wir CSS zur Formatierung.

<style type="text/css"><!--
  samp { 
    color:#555555; 
    border-bottom:3pt outset gray17; 
    font-family:sans-serif; 
    font-size:93%;
  }
//-->
</style>

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

Weiteres zum Thema samp können Sie in Text in HTML nachlesen. Weiteres zum HTML-Tag samp ist in der HTML Referenz bei <samp> ausführlich beschrieben.