Ressourcen: 137 HTML Farbnamen - Kombination von Farbe chocolate und Farbwert #f5f5dc

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Beispiele zur Kombination von Farbe chocolate und Farbwert #f5f5dc

Text- und Unterstreichungsfarben von HTML-Befehl h1

Eine Überschrift der 1. Stufe erzeugen Sie mit HTML-Tag <h1>. Diese kann man farblich gestalten.

Wir ändern für dieses Beispiel die Textfarbe von <h1> auf Farbwert #f5f5dc. Die Schriftart setzen wir auf verdana und verkleinern die Schriftgröße auf 92%. Wir unterstreichen den Inhalt von <h1> mit Hilfe eines gezahnten Rahmens mit 4 Pixel Dicke in Farbe chocolate. Mit HTML ist das nicht machbar. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  h1 { 
    border-bottom: 4px ridge chocolate; 
    color: #f5f5dc; 
    font-family: verdana; 
    font-size: 92%;
  }
//-->
</style>

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

Weiteres zu h1 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Der HTML-Befehl h1 ist in der HTML Referenz bei <h1> ausführlich zusammengestellt.

Zebra-Effekt mit HTML-Befehl tr

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

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

Diese CSS-Klassen werden dann abwechselnd angewendet.

<table>
<tr class="odd"><td>Ea~a</td><td>Eb~a</td><td>Ec~a</td></tr>
<tr class="even"><td>Ea~b</td><td>Eb~b</td><td>Ec~b</td></tr>
<tr class="odd"><td>Ea~c</td><td>Eb~c</td><td>Ec~c</td></tr>
</table>

Mehr zu tr können Sie in Tabellen in HTML nachsehen. Weiteres zum hier gezeigten Tag tr ist in der HTML Referenz bei <tr> genau beschrieben.