von Thomas Salvador.
Farben werden in HTML entweder mit ihrem Namen oder mit ihrem Wert beschrieben.
Netscape führte seinerzeit die websicheren Farben ein. Neben diesen Farbwerten, die einem bestimmten Schema folgen, definierte man noch 120 Werte und ordnete ihnen Namen zu.
Hintergrundfarbe coral | ||||||
Detail | : | Hintergrundfarbe coral | Verlauf nach Weiß | Verlauf nach Schwarz | ||
Farbe | : | coral | #ff7f50 | #ff7f50 | #ff7f50 | #ff7f50 |
Farbwert | : | #ff7f50 | #ff9169 | #ff9169 | #da6c44 | #da6c44 |
HTML | : | coral | #ffa382 | #ffa382 | #b65a39 | #b65a39 |
CSS | : | coral | #ffb59b | #ffb59b | #91482d | #91482d |
CSS (Wert) | : | #ff7f50 | #ffc8b4 | #ffc8b4 | #6d3622 | #6d3622 |
CSS (kürzest) | : | #ff7f50 | #ffdacd | #ffdacd | #482416 | #482416 |
CSS (RGB) | : | rgb(255,127,80) | #ffece6 | #ffece6 | #24120b | #24120b |
CSS (%RGB) | : | rgb(100%,49%,31%) | #ffffff | #ffffff | #000000 | #000000 |
Ein Hyperlink wird mit HTML-Tag <a> gesetzt. Dieser kann farblich gestaltet und hervorgehoben werden.
Hier unterstreichen wir <a> mit Hilfe eines herausstehenden Rahmens mit 4 Pixel Dicke in Farbe coral. Mit HTML ist dies nicht möglich. Deshalb verwenden wir hier CSS.
<style type="text/css"><!-- a { border-bottom-width: 4px; border-bottom-color: coral; border-bottom-style: outset; } //--> </style>
Die Idee ist dabei, unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sieht man diesen Effekt bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Das ist jedoch keine "wirkliche" Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.
Mehr zum Thema erfahren Sie in Verweise und Protokolle in HTML. Mehr zum hier genutzten HTML-Befehl <a>.
Mit Befehl <h1> erzeugen Sie eine Überschrift. Diese können Sie farblich gestalten und hervorheben.
Hier legen wir die Hintergrundfarbe von <h1> auf Farbe coral fest. Die Textfarbe lassen wir unverändert. Die Schriftart ändern wir auf courier new. Die Größe der Schrift vergrößern wir auf 119%.
<style type="text/css"><!-- h1 { background-color:coral; font-size:119%; font-family:courier new; } //--> </style>
Mehr zum Thema h1 können Sie in Grundlegende Gestaltungselemente in HTML lesen. Mehr zum hier gezeigten Befehl h1 lesen Sie in der HTML Referenz unter <h1>.