von Thomas Salvador.
Farben werden in HTML entweder mit ihrem Namen oder mit ihrem Wert beschrieben.
HTML verfügt seit jeher über 17 Standard Farbnamen.
Sie entstehen dadurch, dass die 8 Grundfarben jeweils maximal und zu 50% enthalten sind.
Zu diesen 16 Farben kommt mit grey eine alternative Schreibweise für gray.
Hintergrundfarbe silver | ||||||
Detail | : | Hintergrundfarbe silver | Verlauf nach Weiß | Verlauf nach Schwarz | ||
Farbe | : | silver | #c0c0c0 | #c0c0c0 | #c0c0c0 | #c0c0c0 |
Farbwert | : | #c0c0c0 | #c9c9c9 | #c9c9c9 | #a4a4a4 | #a4a4a4 |
HTML | : | silver | #d2d2d2 | #d2d2d2 | #898989 | #898989 |
CSS | : | silver | #dbdbdb | #dbdbdb | #6d6d6d | #6d6d6d |
CSS (Wert) | : | #c0c0c0 | #e4e4e4 | #e4e4e4 | #525252 | #525252 |
CSS (kürzest) | : | #c0c0c0 | #ededed | #ededed | #363636 | #363636 |
CSS (RGB) | : | rgb(192,192,192) | #f6f6f6 | #f6f6f6 | #1b1b1b | #1b1b1b |
CSS (%RGB) | : | rgb(75%,75%,75%) | #ffffff | #ffffff | #000000 | #000000 |
Mit Tag <a> erzeugen Sie einen Hyperlink. Dieser kann farblich gestaltet werden.
In diesem Beispiel unterstreichen wir <a> mit Hilfe eines doppelten Rahmens mit 3 Pixel Dicke in Farbe silver. In HTML ist das kaum möglich. Wir verwenden deshalb CSS zur Formatierung.
<style type="text/css"><!-- a { border-bottom-style: double; border-bottom-width: 3px; border-bottom-color: silver; } //--> </style>
Die Idee ist hierbei, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sehen Sie das bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Dies ist aber keine normale Unterstreichung, der Text ist überhaupt nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.
Mehr zum Thema erfahren Sie in Verweise und Protokolle in HTML. Die Beschreibung vom hier verwendeten HTML-Tag a lesen Sie in der HTML Referenz unter <a>.
In diesem Beispiel umranden wir <img> mit einem 2 Pixel dicken, gestrichelten Rahmen in Farbe silver. In HTML geht das nicht. Deshalb formatieren wir hier mit CSS.
<style type="text/css"><!-- img { border:2px dashed silver; } //--> </style>
Weiteres zum Thema lesen Sie in Grafik in HTML. Möglichkeiten vom hier genutzten HTML-Befehl <img>.
Hintergrund | Farbwert | Farbe | und | Schrift | Farbwert | Farbkombination |
---|---|---|---|---|---|---|
aqua | #00ffff | + | aqua | #00ffff | aqua / silver | |
black | #000000 | + | black | #000000 | black / silver | |
blue | #0000ff | + | blue | #0000ff | blue / silver | |
fuchsia | #ff00ff | + | fuchsia | #ff00ff | fuchsia / silver | |
gray | #808080 | + | gray | #808080 | gray / silver | |
grey | #808080 | + | grey | #808080 | grey / silver | |
green | #008000 | + | green | #008000 | green / silver | |
lime | #00ff00 | + | lime | #00ff00 | lime / silver | |
maroon | #800000 | + | maroon | #800000 | maroon / silver | |
navy | #000080 | + | navy | #000080 | navy / silver | |
olive | #808000 | + | olive | #808000 | olive / silver | |
purple | #800080 | + | purple | #800080 | purple / silver | |
red | #ff0000 | + | red | #ff0000 | red / silver | |
silver | #c0c0c0 | + | silver | #c0c0c0 | silver / silver | |
teal | #008080 | + | teal | #008080 | teal / silver | |
white | #ffffff | + | white | #ffffff | white / silver | |
yellow | #ffff00 | + | yellow | #ffff00 | yellow / silver |