Color

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Das 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  

 

Details

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.

Beispiel

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
Mehr Details

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.

Beispiel

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

  1. Bearbeiten Sie Ihre CSS Datei.
  2. 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;}
    
  3. Save the file and refresh your browser to see the result.
Cascading Style Sheets
Cascading Style Sheets
Herausforderung

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.)

Possible solution

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
Sehen Sie sich die Lösung an.

What next?

Your sample document and your sample stylesheet strictly separate content from style. The next section explains how you can make exceptions to this strict separation.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: spiegelp, thkoch
 Zuletzt aktualisiert von: spiegelp,