CSS-Eigenschaft: color, Kategorien: Farben (allgemein), Colors and Backgrounds (CSS 2.1), Color (CSS 3)
Schriftfarbe
Bestimmt die Textfarbe.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Schriftfarbe |
| depends on user agent |
|
Verwandte Eigenschaften aus der Kategorie: Farben (allgemein), Colors and Backgrounds (CSS 2.1), Color (CSS 3):
Folgendes ist beim Einsatz von color zu beachten:
- Im Grunde nicht viel ;-) . Der Farbwert stellt den Text in entsprechender Farbe dar.
- Es stehen allerdings vielfältige Möglichkeiten, den Farbwert anzugeben:
- 16 Schlüsselworte für Farbnamen für die 16 Basisfarben: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white und yellow. Diese Farbnamen sind nicht case-sensitiv, es spielt also keine Rolle, ob diese klein oder groß geschrieben werden.
- Hexadezimale Farbwerte: Hier wird als sechsstelliger Wert der Farbwert bestimmt. Dieser wird mit einer Raute eingeleitet, z.B.
color: #ff0000
. Dabei gelten die ersten beiden Werte für den Rotanteil, der 3. und 4. Wert für den Grünanteil, die letzen beiden für den Blauanteil. Es besteht die Möglichkeit per Kurzschreibweise, statt 6 werden 3 Angaben gemacht, die vom Browser automatisch als sechs-stelliger Wert ausgelesen wird:color: #9c0
wird automatisch incolor: #99cc00
umgewandelt. - RGB-Farbangabe: z.B.
color: rgb(100,20,0)
. Wie bei der Angabe als Hexadezimalangabe werden die Farbanteile in der Reihenfolge Rotanteil, Grünanteil, Blauanteil übergeben (rgb steht für red-green-blue). Die Angabe ist dabei als ganze Zahlen möglich, z.B.color: rgb(255, 0, 0)
oder in Prozentangaben:color: rgb(20%, 50%, 100%)
. Angaben unter 0% oder über 100% bzw. unter 0 oder über 255 werden automatisch zum Minimal bzw. Maximalwert umgewandelt. - Das Schlüsselwort transparent ist ebenfalls eine gültige Angabe und stellt den Farbwert auf transparent.
- Neben den 16 Basis-Farbnamen stehen weitere Farbnamen zur Verfügung, sogenannte Erweiterte Farb-Schlüsselworte. Farbnamen wie dodgerblue oder mediumseagreen tauchen auf. Eine Übersicht findet man unter http://www.w3.org/TR/css3-color/#svg-color. Auf dieser Seite sind generell alle Angaben zu Farben zu finden, einschließlich der Aussichten, welche Farbangaben CSS3 unterstützen wird bzw. soll.
- Bullets- oder Nummern-Zeichen in Listen nehmen automatisch die Farbangabe an.
- Vergleichbares gilt für Rahmenfarben. Wenn eine border gesetzt wird, dort aber keine Farbangabe vorgenommen wird, wird der vergebene Wert von color verwendet.
- Als Standardwert vermerkt das W3C depends on user agent, bei den aktuell relevanten Browser ist das schwarz.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu color:
- W3C Spezifikation:
http://www.w3.org/TR/css3-color/#color0
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
clip - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
column-count
Beispiele
HTML:
<p>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
CSS:
/* Ohne Farbangabe wird der Browser-Default-Wert verwendet - in der Regel schwarz */
Beispiel Nr. 1 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doRed">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
CSS:
.doRed {
color: red;
}
/* hier wird der Farbwert angegeben */
Beispiel Nr. 2 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doBlue">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
CSS:
.doBlue {
color: #0000ff;
}
/* Hexa-Dezimal-Wert */
Beispiel Nr. 3 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doGreen">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
CSS:
.doGreen {
color: #080;
}
/* Hexa-Dezimal-Wert in Kurzschreibweise. Wenn der Parametter jeweils zwei identische Parameter haben, kann die Kurzschreibweise gewäht werden, und statt #008800 auch #080 geschrieben werden.*/
Beispiel Nr. 4 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doOrange">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
CSS:
.doOrange {
color: rgb(255,192,0);
}
Beispiel Nr. 5 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<ul class="liste">
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>
<ol class="liste">
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ol>
CSS:
.liste {
color: red;
}
/* Bullets bzw. Zahlen in Listen nehmen den "color"-Wert an */
Beispiel Nr. 6 So sieht's aus:
- eins
- zwei
- drei
- eins
- zwei
- drei
HTML:
<p class="doBorder">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
CSS:
.doBorder {
color: blue;
border: 10px double;
padding: 10px;
}
/* Die Standardrahmenfarbe wird ebenfalls von "color"-Wert bestimmt, insofern in der "border"-Deklaration nicht angegeben */
Beispiel Nr. 7 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!