SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben
Sinnvoll sind die hier beschriebenen Angaben für alle 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>. So ist es beispielsweise möglich, eine 
blinde Tabelle zu definieren, in der aber doch einzelne Zellen einen Rahmen nach Wunsch erhalten - nämlich mit Hilfe von Style-Sheet-Angaben. Auch auf <body> lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall wird um den gesamten sichtbaren Körper einer HTML-Datei ein Rahmen gezeichnet.
Wenn Sie nichts bei Rahmendefinitionen nichts weiter angeben, kann es sein, daß die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.
Netscape und der MS Internet Explorer interpretieren die Angaben zur Rahmendefinition leider recht unterschiedlich. In den jeweiligen Abschnitten wird auf die Besonderheiten hingewiesen. Beachten Sie die Hinweise aufmerksam, um Style-Sheet-Angaben so zu notieren, daß sie mit beiden Browsern den gewünschten Effekt erzielen.
In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. so ist es sinnvoll, nicht nur eine Rahmendicke anzugeben, sondern auch die gewünschte Rahmenfarbe.
 
|
Rahmendicke oben (border-top-width)
Anzeigebeispiel: So sieht's aus
Sie können für eine Rahmenlinie an der Oberseite eines Elements die Dicke festlegen.
<style type="text/css">
h1,h2,h3 { border-top-width:thin; border-top-style:solid; }
body { border-top-width:5mm; border-top-style:groove; }
</style>
|
Mit border-top-width: können Sie die Stärke der Linie über dem Element bestimmen. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:
thin = dünn.
medium = mittelstark.
thick = dick.
Der MS Internet Explorer interpretiert die Angabe border-top-width nur, wenn außerdem die Angabe border-top-style notiert wird. Dabei gelten die gleichen Möglichkeiten wie beim Rahmentyp (border-style), also etwa:
<p style="border-top-style:solid; border-top-width:thin">
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.
Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie width:100% oder width:500px.
|
|
Rahmendicke unten (border-bottom-width) Anzeigebeispiel: So sieht's aus
Sie können für eine Rahmenlinie an der Unterseite eines Elements die Dicke festlegen.
<p style="border-bottom-width:2pt; border-bottom-style:solid;">Text</p> |
Mit border-bottom-width: können Sie Stärke der Linie unter dem Element bestimmen. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:
thin = dünn.
medium = mittelstark.
thick = dick.
Der MS Internet Explorer interpretiert die Angabe border-bottom-width nur, wenn außerdem die Angabe border-bottom-style notiert wird. Dabei gelten die gleichen Möglichkeiten wie beim Rahmentyp (border-style), also etwa:
<p style="border-bottom-style:solid; border-bottom-width:thin">
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.
Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie width:100% oder width:500px.
|
|
Rahmendicke links (border-left-width) Anzeigebeispiel: So sieht's aus
Sie können für eine Rahmenlinie an der linken Seite eines Elements die Dicke festlegen.
<style type="text/css">
blockquote.brecht { border-left-width:1cm; border-left-style:inset; }
</style>
|
Mit border-left-width: können Sie Stärke der Linie links neben dem Element bestimmen. Die Linie erstreckt sich über die Höhe, die das Element in Anspruch nimmt. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:
thin = dünn.
medium = mittelstark.
thick = dick.
Der MS Internet Explorer interpretiert die Angabe border-left-width nur, wenn außerdem die Angabe border-left-style notiert wird. Dabei gelten die gleichen Möglichkeiten wie beim Rahmentyp (border-style), also etwa:
<p style="border-left-style:solid; border-left-width:thin">
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.
|
|
Rahmendicke rechts (border-right-width) Anzeigebeispiel: So sieht's aus
Sie können für eine Rahmenlinie an der rechten Seite eines Elements die Dicke festlegen.
<blockquote style="border-right-width:thin; border-right-style:outset;quot;>Text</blockquote> |
Mit border-right-width: können Sie Stärke der Linie rechts neben dem Element bestimmen. Die Linie erstreckt sich über die Höhe, die das Element in Anspruch nimmt. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:
thin = dünn.
medium = mittelstark.
thick = dick.
Der MS Internet Explorer interpretiert die Angabe border-right-width nur, wenn außerdem die Angabe border-right-style notiert wird. Dabei gelten die gleichen Möglichkeiten wie beim Rahmentyp (border-style), also etwa:
<p style="border-right-style:solid; border-right-width:thin">
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.
|
|
Rahmendicke alle Seiten (border-width) Anzeigebeispiel: So sieht's aus
Sie können für einen Rahmen rund um ein Element die Dicke festlegen.
<style type="text/css">
img.spezial { border-width:2cm; border-style:groove; }
</style>
|
Mit border-width: können Sie Stärke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:
thin = dünn.
medium = mittelstark.
thick = dick.
Der MS Internet Explorer interpretiert die Angabe border-width nur, wenn außerdem der Rahmentyp (border-style), angegeben wird, also etwa:
<p style="border-style:solid; border-width:thin">
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.
Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie width:100% oder width:500px.
|
|
Rahmenfarbe (border-color) Anzeigebeispiel: So sieht's aus
Sie können für einen Rahmen, den Sie für bestimmte oder alle Seiten eines Elements definieren, die Farbe festlegen.
<div style="border-width:1cm; border-style:solid; border-color:#99CCFF;">Text</div> |
Mit border-color: können Sie die Rahmenfarbe bestimmen. Erlaubt ist eine Farbangabe.
Der MS Internet Explorer interpretiert die Angabe border-color nur, wenn außerdem der Rahmentyp (border-style), angegeben wird, also etwa:
<p style="border-style:solid; border-color:red">
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.
|
|
Rahmentyp (border-style) Anzeigebeispiel: So sieht's aus
Sie können für einen Rahmen, die Sie für bestimmte oder alle Seiten eines Elements definieren, das Erscheinungsbild des Rahmens festlegen.
<style type="text/css">
.Achtung { border-style:double; border-width:1cm; }
</style>
|
Mit border-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben.
none = kein Rahmen (bzw. unsichtbarer Rahmen).
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.
Netscape 4.x interpretiert die Angabe border-style nur, wenn außerdem die Rahmendicke (border-width) notiert wird, also etwa:
<p style="border-style:solid; border-width:thin">
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.
Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie width:100% oder width:500px.
Einige der Effekte (z.B. groove) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.
Beide Browser interpretieren die Angaben zu border-style nicht vollständig.
|
|
Rahmen oben allgemein (border-top) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-top-width
border-(top)-style
border-color
<p style="border-top:thick inset rgb(192,192,255);">Text</p> |
Mit border-top: können Sie das Aussehen der Linie oberhalb eines Elements bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.
Netscape 4.x interpretiert diese Angabe nicht. Um die entsprechenden Effekte auch für Netscape anzeigbar zu machen, müssen Sie Einzelangaben wie border-top-style, border-top-width und border-color verwenden.
|
|
Rahmen unten allgemein (border-bottom) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-bottom-width
border-(bottom)-style
border-color
<style type="text/css">
object.vrml { border-bottom:5mm solid red; }
</style>
|
Mit border-bottom: können Sie das Aussehen der Linie unterhalb eines Elements bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.
Netscape 4.x interpretiert diese Angabe nicht. Um die entsprechenden Effekte auch für Netscape anzeigbar zu machen, müssen Sie Einzelangaben wie border-bottom-style, border-bottom-width und border-color verwenden.
|
|
Rahmen links allgemein (border-left) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-left-width
border-(left)-style
border-color
<p style="border-left:thin solid">Text</p> |
Mit border-left: können Sie das Aussehen der Linie links eines Elements bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.
Netscape 4.x interpretiert diese Angabe nicht. Um die entsprechenden Effekte auch für Netscape anzeigbar zu machen, müssen Sie Einzelangaben wie border-left-style, border-left-width und border-color verwenden.
|
|
Rahmen rechts allgemein (border-right) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-right-width
border-(right)-style
border-color
<style type="text/css">
address { border-right:double 2cm #DDFFDD; }
</style>
|
Mit border-right: können Sie das Aussehen der Linie rechts eines Elements bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.
Netscape 4.x interpretiert diese Angabe nicht. Um die entsprechenden Effekte auch für Netscape anzeigbar zu machen, müssen Sie Einzelangaben wie border-right-style, border-right-width und border-color verwenden.
|
|
Rahmen allgemein (border) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-width
border-style
border-color
<div style="border:1cm groove #FF00FF;">Text</div> |
Mit border: können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.
Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie width:100% oder width:500px.
|
|
Innenabstand oben (padding-top) Anzeigebeispiel: So sieht's aus
Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und oberer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.
<style type="text/css">
td { padding-top:3mm; }
th { padding-top:5mm; }
p.LinieOben { border-top:thin solid red; padding-top:5mm; }
</style>
|
Mit padding-top: bestimmen Sie den Innenabstand zwischen Elementinhalt und der oberen Elementgrenze. Erlaubt ist eine numerische Angabe.
|
|
Innenabstand unten (padding-bottom) Anzeigebeispiel: So sieht's aus
Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und unterer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.
<p style="border-bottom:thick groove silver; padding-bottom:10px;">Text</p> |
Mit padding-bottom: bestimmen Sie den Innenabstand zwischen Elementinhalt und der unteren Elementgrenze. Erlaubt ist eine numerische Angabe.
|
|
Innenabstand links (padding-left) Anzeigebeispiel: So sieht's aus
Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und linker Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.
<style type="text/css">
p.wichtig { border-left:medium double blue; padding-left:12mm; }
</style>
|
Mit padding-left: bestimmen Sie den Innenabstand zwischen Elementinhalt und der linken Elementgrenze. Erlaubt ist eine numerische Angabe.
|
|
Innenabstand rechts (padding-right) Anzeigebeispiel: So sieht's aus
Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und rechter Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.
<h1 style="border-right-style:solid; border-right-width:3mm; padding-right:9mm;">Text</h1> |
Mit padding-right: bestimmen Sie den Innenabstand zwischen Elementinhalt und der oberen Elementgrenze. Erlaubt ist eine numerische Angabe.
|
|
Innenabstand allgemein (padding) Anzeigebeispiel: So sieht's aus
Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.
<style type="text/css">
body { border: 1.5cm groove #FFDDFF; padding:1cm; }
</style>
|
Mit padding: bestimmen Sie einen einheitlichen Innenabstand zwischen Elementinhalt und den vier Elementgrenzen oben, links, unten und rechts. Erlaubt ist eine numerische Angabe.
|
| |
weiter: |
Style-Sheet-Angaben: Hintergrundfarben und -bilder
|
zurück: |
Style-Sheet-Angaben: Abstände, Ränder, Ausrichtung
|
