Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Zurück zur vorherigen Seite:
Text stylesDas ist der achte Teil des CSS Getting Started Tutorials. Er erklärt, wie man Farben in CSS angeben kann. In Ihrem Stylesheet werden Sie Hintergrundfarben einführen.
Information: Farbe
In diesem Tutorial haben Sie soweit wenige der benannten Farben verwendet. CSS 2 unterstützt insgesamt 17 benannte Farben. Einige der Namen lauten aber nicht wie erwartet:
| black | gray | silver | white | |||||||||||
| primär | red | lime | blue | |||||||||||
| sekundär | yellow | aqua | fuchsia | |||||||||||
| maroon | orange | olive | purple | green | navy | teal |
Ihr Webbrowser könnte viel mehr benannte Farben unterstützen, wie zum Beispiel:
| dodgerblue | peachpuff | tan | firebrick | aquamarine |
Mehr Details zur erweiterten Liste finden Sie unter SVG color keywords im CSS 3 Color Module. Vermeiden Sie Farben, die vom Webbrowser des Lesers möglicheweise nicht unterstützt werden.
Für eine größere Farbpalette geben Sie die rot, grün und blau Komponenten der gewünschten Farbe mit einem Nummernzeichen (Hash) und drei hexadezimalen Ziffern im Bereich von 0 – 9 und a – f an. Die Buchstaben a – f repräsentieren die Werte 10 – 15:
| schwarz | #000 |
|
| reines rot | #f00 |
|
| reines grün | #0f0 |
|
| reines blau | #00f |
|
| weiß | #fff |
Für die volle Farbpalette geben sie zwei hexadezimale Ziffern für jede Farbkomponente an:
| schwarz | #000000 |
|
| reines rot | #ff0000 |
|
| reines grün | #00ff00 |
|
| reines blau | #0000ff |
|
| weiß | #ffffff |
Sie können normalerweise diese sechstelligen hexadezimalen Code in einem Grafikprogramm oder einem anderen Tool finden.
Mit ein wenig Übung können Sie dreistellige Farben für die meisten Zwecke manuell anpassen:
| Starten Sie mit reinem rot: | #f00 |
|
| Um es blasser zu machen, fügen Sie ein wenig grün und blau hinzu: | #f77 |
|
| Um es mehr orange zu machen, fügen Sie ein wenig mehr grün hinzu: | #fa7 |
|
| Um es dunkler zu machen, reduzieren sie alle Farbkomponenten: | #c74 |
|
| Um die Sättigung zu reduzieren, gleichen sie die Farbkomponenten ein wenig an: | #c98 |
|
| Wenn die Farbkomponenten exakt gleich sind, erhalten Sie grau: | #ccc |
Für einen Pastellton wie ein blasses blau:
| Starten Sie mit reinem weiß: | #fff |
|
| Reduzieren Sie die anderen Farbkomponenten ein wenig: | #eef |
Sie können Farben auch mit dezimalen RGB Werten im Bereich von 0 – 255 oder mit Prozenten angeben.
Das ist zum Beispiel Kastanienbraun (dunkles rot):
rgb(128, 0, 0)
Alle Details zur Angabe von Farben finden sie unter Colors in der CSS Spezifikation.
Mehr Information zur Abstimmung von Farbsystemen wie Menu und ThreeDFace finden Sie unter CSS2 System Colors in der CSS Spezifikation.
Farbeigenschaften
Sie haben bereits die color Eigenschaft auf Text angewendet.
Sie können auch die background-color Eigenschaft verwenden, um die Hintergrundfarbe eines Elements zu verändern.
Hintergründe können auf transparent gesetzt werden, um explizit die Hintergrundfarbe zu entfernen. Somit ist der Hintergrund des Elternelements sichtbar.
Die Beispiel-Boxen in diesem Tutorial verwenden dieses blasse gelb als Hintergrund:
background-color: #fffff4;
Die Mehr Details-Boxen verwenden dieses blasse grau:
background-color: #f4f4f4;
Aktion: Farbcodes verwenden
- Bearbeiten Sie Ihre CSS Datei.
- Make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)
/*** CSS Tutorial: Color page ***/ /* page font */ body {font: 16px "Comic Sans MS", cursive;} /* paragraphs */ p {color: blue;} #first {font-style: italic;} /* initial letters */ strong { color: red; background-color: #ddf; font: 200% serif; } .carrot {color: red;} .spinach {color: green;} - Save the file and refresh your browser to see the result.
| Cascading Style Sheets |
| Cascading Style Sheets |
In your CSS file, change all the color names to 3-digit color codes without affecting the result.
(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)
The following values are reasonable approximations of the named colors:
strong {
color: #f00; /* red */
background-color: #ddf; /* pale blue */
font: 200% serif;
}
.carrot {
color: #fa0; /* orange */
}
.spinach {
color: #080; /* dark green */
}
p {
color: #00f; /* blue */
}
Hide solution
What next?
Go to Next Section:
ContentYour sample document and your sample stylesheet strictly separate content from style. The next section explains how you can make exceptions to this strict separation.