Websiteentwicklung: CSS: Farben
Aus Wikibooks
Inhaltsverzeichnis |
[Bearbeiten] Farben
Farbdefinitionen kann mittels CSS bequem in Vier Arten realisiert werden:
- Farbnamen
- HEX-Code
- RGB-Wert
- RGB-Prozentangabe
[Bearbeiten] Farbnamen
color: yellow; color: black; color: white; color: silver;
ACHTUNG: Der W3C CSS Standard ist nur auf 16 Farbnamen definiert:
Ab CSS 3 werden jedoch alle SVG-Farbnamen offiziell verwendet werden dürfen.
| black | #000000 | gray | #808080 |
| maroon | #800000 | red | #FF0000 |
| green | #008000 | lime | #00FF00 |
| olive | #808000 | yellow | #FFFF00 |
| navy | #000080 | blue | #0000FF |
| purple | #800080 | fuchsia | #FF00FF |
| teal | #008080 | aqua | #00FFFF |
| silver | #C0C0C0 | white | #FFFFFF |
[Bearbeiten] Systemfarben in CSS 2:
Die Systemfarben richten sich nach den System-Einstellungen des Nutzers. Man kann diese Farbangaben beispielsweise verwenden, um eine Seite zu erstellen, die der Benutzeroberfläche des Nutzers ähnlich sieht.
- activeborder
- activecaption
- appworkspace
- background
- buttonface
- buttonhighlight
- buttonshadow
- buttontext
- captiontext
- graytext
- highlight
- highlighttext
- inactiveborder
- inactivecaption
- inactivecaptiontext
- infobackground
- infotext
- menu
- menutext
- scrollbar
- threeddarkshadow
- threedface
- threedhighlight
- threedlightshadow
- threedshadow
- window
- windowframe
- windowtext
[Bearbeiten] HEX-Code
color: #ffff00; color: #000000; color: #ffffff; color: #c0c0c0;
TIPP: Wenn sich die Werte der jeweiligen RGB Zahl wiederholt, kann man auch eine verkürzte Variante schreiben:
color: #ffff00; /*ist das gleiche wie*/ color: #ff0;
color: #aa6633 /*ist das gleiche wie*/ color: #a63;
Falsch hingegen jedoch ist:
color: #ca6633; color: #ca63; /*dies ist eine falsche Definition!*/
[Bearbeiten] RGB-Wert
color: rgb(255,255,0); color: rgb(0,0,0); color: rgb(255,255,255); color: rgb(192,192,192);
Hier werden die jeweiligen RGB Werte von 0 bis 255 (256 Abstufungen) definiert.
[Bearbeiten] RGB-Prozentangabe
color: rgb(100%,100%,0%); color: rgb(0%,0%,0%); color: rgb(100%,100%,100%); color: rgb(75%,75%,75%);
TIPP: Es kann auch mit Kommawerten gearbeitet werden.
color: rgb(7.5%,99.1%,33.3%);
[Bearbeiten] CSS Farben Links
CSS Farb-Spezifikation auf w3.org
