SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben
Sinnvoll sind die hier beschriebenen Angaben vor allem für HTML-Tags, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für <h[1-6]>, <p>, <blockquote>, <address> oder <pre>. Blockelemente sind aber auch HTML-Tags wie <center>, <div>, <table>, <tr>, <th> und <td>. Auch auf <body> lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall beziehen sich die Angaben auf den gesamten sichtbaren Körper der HTML-Datei. Es ist aber auch möglich, einzelne Wörter, z.B. mit Hilfe des 
<span>-Tags, mit einer eigenen Hintergrundfarbe zu belegen.
Sie können also mit Hilfe von Style-Sheet-Angaben für einzelne Textblöcke und beliebige Textabschnitte separate Hintergrundfarben und Hintergrundbilder definieren, die sich von der definierten Hintergrundfarbe der HTML-Datei oder von dateiweiten Hintergrundbildern abheben. Sehr schöne Effekte können Sie erzielen, indem Sie Angaben zu Hintergrundfarben bzw. Hintergrundbildern einzelner Elemente mit Style-Sheet-Angaben zu Rahmen und Innenabständen kombinieren.
Netscape und der MS Internet Explorer interpretieren die Angaben zu Hintergrundfarben und Hintergrundbild je nach Anwendungsfall mit leichten Unterschieden. In den folgenden Beschreibungen wird auf Besonderheiten hingewiesen.
 
|
Hintergrundfarbe (background-color)
Anzeigebeispiel: So sieht's aus
Sie können für ein HTML-Element eine eigene Hintergrundfarbe definieren.
<style type="text/css">
h1 { background-color:#003366; }
</style>
|
Mit background-color: können Sie eine Hintergrundfarbe bestimmen. Erlaubt ist eine Farbangabe.
Netscape 4.0 bildet bei mehrzeiligen Textabsätzen keinen echten Farbblock, sondern dehnt die Hintergrundfarbe am Zeilenende nur bis zum zufälligen Ende des Textes (siehe erstes der Beispiele). Um dies zu verhindern, können Sie zusätzlich die Angaben border-style:none; border-width:thin; notieren. Näheres dazu in den Abschnitten Rahmentyp (border-style) und Rahmendicke (border-width).
Wenn Ihnen bei Textelementen wie etwa Überschriften der Abstand zwischen Textgrenzen und dem Rahmen, der sich durch die Hintergrundfarbe ergibt, zu klein ist, können Sie einen Innenabstand (padding) definieren.
|
|
Hintergrundbild (background-image) Anzeigebeispiel: So sieht's aus
Sie können für einzelne HTML-Elemente ein eigenes Hintergrundbild definieren.
<p style="background-image:url(back.gif);">Text</p> |
Mit background-image:url([Dateiname]): können Sie eine Hintergrundgrafik bestimmen. Per Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt, so wie bei der Angabe eines Hintergrundbildes im HTML-Tag <body>. Text und referenzierte Grafiken erscheinen über dieser Hintergrundgrafik. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPG-Grafiken benutzen.
Im Beispiel wird vorausgesetzt, daß sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML.
Wenn das Element, für das die Hintergrundgrafik definiert wird, in der Höhe oder Breite kleiner ist als die Hintergrundgrafik, wird die Hintergrundgrafik in der Darstellung an den Grenzen des Elements abgeschnitten.
|
|
Wiederholungs-Effekt (background-repeat) Anzeigebeispiel: So sieht's aus
Normalerweise wird eine Hintergrundgrafik im Wallpaper-Effekt über den gesamten zur Verfügung stehenden Raum wiederholt. Sie können jedoch ein anderes Verhalten erzwingen.
<style type="text/css">
body { background-image:url(back.gif); background-repeat:no-repeat; }
</style>
|
Mit background-repeat: können Sie das Wiederholungsverhalten einer Hintergrundgrafik, die Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.
repeat = wiederholen (Voreinstellung).
repeat-x = nur "eine Zeile lang" waagerecht wiederholen.
repeat-y = nur "eine Spalte lang" senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.
Netscape 4.0 interpretiert diese Angabe zwar, hatte bei Tests aber massive Schwierigkeiten bei der Darstellung von Elementinhalten.
|
|
Wasserzeichen-Effekt (background-attachment) Anzeigebeispiel: So sieht's aus
Bei längeren Elementen wandert ein Hintergrundbild beim Scrollen im Text optisch mit. Sie können jedoch erzwingen, daß das Hintergrund stehen bleibt (Wasserzeichen-Effekt).
<div style="background-image:url(back.gif); background-attachment:fixed;">Text</div> |
Mit background-attachment: können Sie das Scroll-Verhalten einer Hintergrundgrafik, die Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.
scroll = mitscrollen (Voreinstellung).
fixed = Hintergrundbild bleibt stehen.
Netscape 4.x interpretiert diese Angabe nicht. Tests zufolge klappt der Wasserzeichen-Effekt auch beim MS Internet Explorer nur, wenn er auf das <body>-Tag angewendet wird, nicht in Textabsätzen oder dergleichem.
|
|
Hintergrundposition (background-position) Anzeigebeispiel: So sieht's aus
Diese Angabe ist vor allem dann interessant, wenn Sie mit einer entsprechenden Angabe zum Wiederholungs-Effekt (background-repeat) erzwingen, daß eine Hintergrundgrafik nur einmal angezeigt wird. Für diesen Fall können Sie mit der Hintergrundposition festlegen, wo genau die Hintergrundgrafik innerhalb des HTML-Elements plaziert werden soll.
<style type="text/css">
body { background-image:url(back.gif); background-position:1cm 2cm; }
</style>
|
Mit background-position: können Sie festlegen, wo die linke obere Ecke der Hintergrundgrafik sein soll. Bezugspunkt ist das HTML-Element, für das die Hintergrundgrafik definiert wird. Erlaubt sind entweder zwei numerische Werte, der erste für den Abstand von links und der zweite für den Abstand von oben. Oder eine oder sinnvolle Kombinationen der folgenden Angaben.
top = vertikal obenbündig.
center = horizontal zentriert.
middle = vertikal mittig.
bottom = vertikal untenbündig.
left = horizontal linksbündig.
right = horizontal rechtsbündig.
Netscape 4.0 interpretiert diese Angabe nicht. Er stellt zwar das Hintergrundbild dar, ignoriert aber die Angaben zu einer erzwungenen Position.
|
|
Hintergrund (allgemein) (background) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
Hintergrundbild (background-image)
Wiederholungs-Effekt (background-repeat)
Wasserzeichen-Effekt (background-attachment)
Hintergrundposition (background-position)
<p style="background:url(back.gif) no-repeat middle center;">Text</p> |
Mit background: können Sie Angaben für eine Hintergrundgrafik zusammenfassen. Notieren Sie Angaben zum Hintergrundbild, zu Wiederholungs- und Wasserzeicheneffekt sowie zur Position mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.
Netscape 4.0 interpretiert die erweiterten Angaben zum Hintergrundbild nicht und hatte beim Testen merkwürdige Darstellungsprobleme.
|
| |
weiter: |
Style-Sheet-Angaben: Listen und Tabellen
|
zurück: |
Style-Sheet-Angaben: Rahmen und Innenabstände
|
