Cascading Stylesheets
Stil mit <Stil>
Cascading Stylesheets
Stil mit <Stil>
Eigenschaften, die die Farbe des Vordergrundes und die Darstellung des Hintergrundes eines Elements steuern, also die Farbe des Textes in Absätzen und Tabellenzellen sowie Hintergrundbild oder Hintergrundfarbe, die Position des Hintergrundbildes und die Art seiner Wiederholung.
background legt nicht nur die Hintergrundfarbe oder ein Hintergrundbild für das gesamte Dokument fest, sondern alle Blockelemente können ebenfalls einen Hintergrund enthalten.
Die Position von Hintergrundbildern kann festgelegt werden, und zwar absolut oder relativ in Hinsicht auf das Browserfenster. Ebenfalls festgelegt werden kann die Anzahl der Wiederholungen des Musters in y- oder x-Richtung und ob das Hintergrundbild fest stehen soll oder mitscrollt, wenn das Dokument gescrollt wird. Eine Eigenschaft ist für den Vordergrund und sechs Eigenschaften sind insgesamt für die Darstellung des Hintergrundes spezifiziert:
color • background • background-attachment
• background-color • background-image
• background-position • background-repeat
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja |
color bestimmt die Farbe des Textes. Die Vorgabe ist Schwarz. | color |
color gibt die Farbe eines Elements als Schlüsselwort (red), als sechsstellige Hexadezimalzahl (#FFFFFF) oder als Tripel von drei RGB-Werten (255,255,255) an. Es gibt 16 Standardfarben in HTML:
| aqua #00FFFF rgb(0,255,255) |
gray #808080 rgb(128,128,128) |
silver #C0C0C0 rgb(192,192,192) |
navy #000080 rgb(0,0,128) |
| black #000000 rgb(0,0,0) |
green #800000 rgb(128,0,0) |
teal #008080 rgb(0,128,128) |
olive #808000 rgb(128,128,0) |
| blue #0000FF rgb(0,0,255) |
lime #00FF00 rgb(0,255,0) |
white #FFFFFF rgb(255,255,255) |
purple #800080 rgb(128,0,128) |
| fuchsia #FF00FF rgb(255,0,255) |
maroon #800000 rgb(128,0,0) |
yellow #FFFF00 rgb(255,255,0) |
red #FF0000 rgb(255,0,0) |
.gruen { color: green; font-size: 14px; font-weight: bold}
.teal { color: rgb(0,128,128); font-size: 14px; font-weight: bold}
.olive { color: #808000; font-size: 14px; font-weight: bold}
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
background fasst alle fünf individuellen Stylesheet-Eigenschaften des Hintergrundes zusammen. | background-color &| background-image &| background-repeat &| background-attachment &| background-position |
Beispiel
body { background: oldlace url(bilder/loewe-mt.jpg)
no-repeat fixed 50px 50px}
div.fliess { background: url(bilder/loewe.jpg)
no-repeat fixed 50px 50px; border: 1px solid gray;}
Opera 5+ unterstützt die Positionierung von Hintergrundbildern in anderen Elementen als dem body-Element nicht korrekt.
| IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein |
background-attachment entscheidet, ob der Hintergrund fest ist oder scrollt. | scroll | fixed |
scroll ist die Voreinstellung und lässt das Hintergrundbild zusammen mit dem Text und den Bildern scrollen, wenn das Browserfenster abwärts oder aufwärts, nach rechts oder links gescrollt wird.
fixed lässt den Hintergrund fest an seinem Platz im Browserfenster. Text und Bilder bewegen sich über dem Hintergrund, wenn das Browserfenster abwärts oder aufwärts, nach rechts oder links gescrollt wird.
Beispiel
body { background-image: url(bilder/loewe-mt.jpg);
background-attachment: fixed; }
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
background-color legt die Hintergrundfarbe eines Elementes fest. Da Hintergrundfarben einzelnen Elementen zugewiesen werden könnnen, kann es mehr als eine Hintergrundfarbe in einem Dokument geben. | transparent | color |
transparent ist die Voreinstellung und lässt die Hintergrundfarbe durch die Vordergrundfarbe von Bildern sichtbar erscheinen, ebenso Bereiche innerhalb eines Buchstabens wie hier der Weißraum im "O".
color ist entweder das Schlüsselwort für eine Farbe (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder ein Tripel aus drei RGB-Werten (255,255,255). Es gibt 16 Standardfarben in HTML:
| aqua #00FFFF rgb(0,255,255) |
gray #808080 rgb(128,128,128) |
silver #C0C0C0 rgb(192,192,192) |
navy #000080 rgb(0,0,128) |
| black #000000 rgb(0,0,0) |
green #800000 rgb(128,0,0) |
teal #008080 rgb(0,128,128) |
olive #808000 rgb(128,128,0) |
| blue #0000FF rgb(0,0,255) |
lime #00FF00 rgb(0,255,0) |
white #FFFFFF rgb(255,255,255) |
purple #800080 rgb(128,0,128) |
| fuchsia #FF00FF rgb(255,0,255) |
maroon #800000 rgb(128,0,0) |
yellow #FFFF00 rgb(255,255,0) |
red #FF0000 rgb(255,0,0) |
Beispiel
body { background-color: oldlace; }
div.fliess { background-color: ivory; }
div.fliess h1 { background-color: coral; }
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein |
background-image legt ein Bild als Hintergrund fest. | url ("urladdress") | none |
url ("urladdress") ist der Name eines Bildes mit seinem vollen Pfad.
none ist der Vorgabewert – per Vorgabe ist kein Hintergrundbild vorgesehen. Die explizite Notation von none sorgt dafür, dass alle vorangegangenen Deklarationen eines Hintergrundbildes ausgeschaltet werden.
Beispiel
body { background-image: url(loewe.gif) }
div.fliess { background-image: url(bg_hell.gif) }
div.fliess h1 { background-image: url(bg.gif); padding: 5px 4px }
| IE4+ N6 M1 O5+ Version: CSS1 Erblich: Nein |
background-position legt die anfängliche Position des Hintergrundbildes fest. | [ percentage | length ] {1,2} | [ [ top | center | bottom ] &| [ left | center | right ] ] |
percentage Prozentangaben werden üblicherweise als Wertepaar notiert, in dem die beiden Werte durch ein Leerzeichen getrennt sind. Die erste Prozentangabe bezieht sich auf die horizontale Achse und die zweite auf die vertikale Achse. 0% 0% (Voreinstellung) ist als obere linke Ecke und 100% 100% als rechte untere Ecke definiert. Wenn Sie nur einen Wert angeben, bezieht er sich automatisch auf die horizontale Achse und die vertikale Achse wird auf 50% eingestellt.
Sie können jede Kombination aus Prozentangaben und Längen einsetzen. Alternativ können Sie eines der Schlüsselwörter [top, center, bottom] und/oder [left, right, center] als Positionsangabe notieren. Sie können Schlüsselwörter nicht mit Prozentangaben und Längenangaben mischen.
Weitere Beispiele für Prozentangaben:
%-Paar Position 0% 50% left center 50% 0% center top 50% 50% center 0% 100% left bottom corner 100% 0% right top corner 50% 100% center bottom 100% 50% right center
| IE4+ N4+ M1 O5+ Version: CSS1 Erblich: Nein |
background-repeat wiederholt das Hintergrundbild entlang der vertikalen und/oder horizontalen Achse. Die Wiederholung des Bildes wird auch als "Kacheln" oder "tiling" bezeichnet. | repeat | repeat-x | repeat-y | no-repeat |
repeat wiederholt das Hintergrundbild sowohl in horizontaler als auch in vertikaler Richtung (Voreinstellung).
repeat-x wiederholt das Hintergrundbild in horizontaler Richtung (entlang der X-Achse).
repeat-y wiederholt das Hintergrundbild in vertikaler Richtung (entlang der Y-Achse).
no-repeat ist die Vorgabe – das Bild wird nicht gekachelt. Die Angabe von no-repeat kann dazu dienen, alle vorangegangenen Deklarationen auszuschalten.
Beispiel
body { background-image: url(logo.gif);
background-repeat: repeat-x}
div.fliess { background-image: url(flach.gif);
background-repeat: repeat-y }