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 <div>, <table>, <tr>, <th> und <td>. Auch auf <body> lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall wird der gesamte sichtbare Körper einer HTML-Datei wie ein Block behandelt.
Rand bzw. Abstand bedeutet: der Rand/Abstand des aktuellen Elements zu seinem logischen "Eltern-Element". Im normalen Fließtext ist dies das <body>-Tag, innerhalb einer Tabellenzelle etwa ist es jedoch das <td>- oder <th>-Tag, in dem sich das aktuelle Element befindet. Wenn das aktuelle Element etwa innerhalb eines <div>-Tags vorkommt, das selbst Ränder bzw. Abstände definiert, sind die Angaben relativ dazu.
Mit negativen Werten, also Angaben wie beispielsweise -18mm, können Sie für besondere gestalterischen Zwecke erreichen, daß sich Elemente überlappen. An anderer Stelle innerhalb dieses Dokuments finden Sie 
ein Beispiel dafür.
 
|
Abstand/Rand oben (margin-top)
Anzeigebeispiel: So sieht's aus
Sie können den oberen Abstand/Rand eines Elements zu seinem vorausgehenden Element festlegen.
<style type="text/css">
h1,h2,h3 { margin-top:2cm; }
div.beispiel { margin-top:30px; }
div.beispiel h1,h2,h3 { margin-top:1cm; }
</style>
|
Mit margin-top: können Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine numerische Angabe. Im obigen Beispiel wird für Überschriften 1., 2. und dritter Ordnung ein vorausgehender Abstand von 2cm definiert. Ferner wird eine Klasse beispiel für das <div>-Tag definiert. Solche Bereiche haben laut Definition im Beispiel 30 Pixel Abstand zu ihrem vorausgehenden Element. Für Überschriften 1., 2. und 3. Ordnung, die innerhalb eines solchen Bereichs vorkommen, wird ein Abstand von 1cm festgelegt.
Netscape 4.x und der MS Internet Explorer (3.x, 4.x) reagieren zum Teil unterschiedlich, wenn ein Element einen definierten Abstand unten enthält und ein nachfolgendes Element einen Abstand oben.
Bei Netscape hat die Angabe margin-top (für den Abstand oben) in jedem Fall Vorrang vor der Angabe margin-bottom (für den Abstand unten). Wenn also ein Element einen Abstand unten von 1cm hat und ein nachfolgendes Element einen Abstand oben von 2cm, dann stellt Netscape die beiden Elemente in einem Abstand von 2cm dar.
Der MS Internet Explorer vergleicht beide Angaben und interpretiert diejenige mit dem höheren Wert. Wenn also ein Element einen Abstand unten von 1cm hat und ein nachfolgendes Element einen Abstand oben von 2cm, dann stellt auch der Internet Explorer beiden Elemente in einem Abstand von 2cm dar. Wenn aber das obere Element einen Abstand unten von 3cm hat und das nachfolgende Element einen Abstand oben von 2cm, erweitert der Internet Explorer den Abstand der beiden Elemente auf 3cm, während Netscape den Abstand bei 2cm beläßt.
|
|
Abstand/Rand unten (margin-bottom) Anzeigebeispiel: So sieht's aus
Sie können den unteren Abstand/Rand eines Elements zu seinem nachfolgenden Element festlegen.
<p style="margin-bottom:20pt">Text</p> <p style="margin-top:15pt">Text</p> |
Mit margin-bottom: können Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine numerische Angabe. Im obigen Beispiel wird für einen Absatz im Text ein Abstand von 20pt zum nächsten Absatz definiert.
Netscape 4.x und der MS Internet Explorer (3.x, 4.x) reagieren zum Teil unterschiedlich, wenn ein Element einen definierten Abstand unten enthält und ein nachfolgendes Element einen Abstand oben.
Bei Netscape hat die Angabe margin-top (für den Abstand oben) in jedem Fall Vorrang vor der Angabe margin-bottom (für den Abstand unten). Wenn also ein Element einen Abstand unten von 20pt hat und ein nachfolgendes Element einen Abstand oben von 15pt (so wie im Beispiel oben), dann stellt Netscape die beiden Elemente in einem Abstand von 15pt dar.
Der MS Internet Explorer vergleicht beide Angaben und interpretiert diejenige mit dem höheren Wert. Wenn also ein Element einen Abstand unten von 20pt hat und ein nachfolgendes Element einen Abstand oben von 15pt, dann stellt der Internet Explorer beide Elemente in einem Abstand von 20pt dar.
|
|
Abstand/Rand links (margin-left) Anzeigebeispiel: So sieht's aus
Sie können den linken Abstand/Rand eines Elements festlegen. Wenn das Element einen linken Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die zweite der beiden), dann bedeutet die Angabe den Abstand zum links davon liegenden Element. Wenn das Element keinen linken Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das <body>-Tag festgelegt ist). Wenn kein übergeordnetes Elternelement mehr da ist (etwa beim <body>-Tag selbst), dann bezieht sich die Angabe auf den linken Abstand des Elements zum Anzeigefenster.
<style type="text/css">
body { margin-left:20px; }
p,ul,ol,blockquote,table,img { margin-left:15px; }
hr { margin-left:-20px; }
</style>
|
Mit margin-left: können Sie den Rand/Abstand links bestimmen. Erlaubt ist eine numerische Angabe. Im obigen Beispiel wird zunächst ein globaler linker Seitenrand von 20 Pixeln definiert, indem diese Angabe dem <body>-Tag zugewiesen wird. Für Fließtextabsätze, Listen, Zitate, Tabellen und Grafiken wird zusätzlich ein linker Rand von 15 Pixeln definiert, sodaß sich bei diesen Elementen isg. ein linker Rand von 35 Pixeln zum linken Fensterrand ergibt. Überschriften etwa, für die nichts weiter festgelegt ist, erscheinen dann links ausgerückt. Für Trennlinien wird in dem Beispiel ein negativer linker Rand von -20 Pixeln definiert. Dadurch können Trennlinien trotz des definierten seitenglobalen linken Randes von 20 Pixeln ganz vorne von links beginnen.
Wenn Sie beispielsweise zwei Grafiken nebeneinander referenzieren und dabei mit Werten für margin-left oder margin-right arbeiten, reagiert Netscape (4.x) zum Teil sehr unterschiedlich und nicht besonders nachvollziehbar.
|
|
Abstand/Rand rechts (margin-right) Anzeigebeispiel: So sieht's aus
Sie können den rechten Abstand/Rand eines Elements festlegen. Wenn das Element einen rechten Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die erste der beiden), dann bedeutet die Angabe den Abstand zum rechts davon liegenden Element. Wenn das Element keinen rechten Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das <body>-Tag festgelegt ist.). Wenn kein übergeordnetes Elternelement mehr da ist (etwa beim <body>-Tag selbst), dann bezieht sich die Angabe auf den rechten Abstand des Elements zum Anzeigefenster.
<img src="bild1.gif" style="margin-right:1cm"> |
Mit margin-right: können Sie den Rand/Abstand rechts bestimmen. Erlaubt ist eine numerische Angabe. Im obigen Beispiel erhält eine referenzierte Grafik einen rechten Abstand von 1cm.
Netscape 4.x ignoriert margin-right.
|
|
Abstand/Rand allgemein (margin) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden fakultativen Einzelangaben:
margin-top
margin-bottom
margin-left
margin-right
<style type="text/css">
body { margin:2cm; } /* 2cm oben, rechts, unten und links */
p.typA { margin: 1cm 2cm; } /* 1cm oben und unten, 2 cm rechts und links */
p.typB { margin: 1cm 2cm 3cm; } /* 1cm oben, 2cm rechts und links und 3 cm unten */
p.typC { margin: 1cm 2cm 3cm 4cm; } /* 1cm oben, 2cm rechts, 3 cm unten und 4 cm links */
</style>
|
Mit margin: können Sie einen einheitlichen Rand/Abstand für oben, unten, links und rechts bestimmen. Erlaubt sind ein bis vier numerische Angaben.
Eine Angabe bedeutet: alle vier Ränder erhalten den gleichen Abstand/Rand.
Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite Zahl den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.
|
|
Texteinrückung (text-indent) Anzeigebeispiel: So sieht's aus
Sie können für einen mehrzeiligen Fließtext bestimmen, daß die erste Zeile eingerückt wird. Dieses Gestaltungselement ist in Büchern und Zeitschriften sehr verbreitet.
<p style="text-indent:7.5mm">viel Text</p> |
Mit text-indent: können Sie eine Einrückung für die erste Zeile bestimmen. Erlaubt ist eine numerische Angabe.
Mit einem negativen Wert für text-indent bewirken Sie eine Textausrückung in der ersten Fließtextzeile.
|
|
Zeilenhöhe (line-height) Anzeigebeispiel: So sieht's aus
Sie können für Elemente mit viel Fließtext die Zeilenhöhe bestimmen. Diese Angabe ist vor allem in Verbindung mit einer Angabe zur Schriftgröße interessant.
<style type="text/css">
p.gross { font-size:14pt; line-height:16pt; }
p.klein { font-size:8pt; line-height:8pt; }
</style>
|
Mit line-height: können Sie die Zeilenhöhe bestimmen. Erlaubt ist eine numerische Angabe.
Bei erzwungener Zeilenhöhe ist es denkbar, daß ein interpretierendes Programm dieser Angabe den Vorrang einräumt und Elemente abschneidet, die höher sind, beispielsweise eine im Fließtext referenzierte Grafik.
|
|
Vertikale Ausrichtung (vertical-align) Anzeigebeispiel: So sieht's aus
Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpsassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile im Verhältnis zueinander ausrichten.
<table> <tr> <td style="vertical-align:top">...</td> <td style="vertical-align:middle">...</td> <td style="vertical-align:bottom">...</td> </tr> </table> |
Mit vertical align: können Sie die vertikale Ausrichtung bestimmen. Folgende Angaben sind möglich:
top = obenbündig ausrichten.
middle = mittig ausrichten.
bottom = untenbündig ausrichten.
baseline = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt).
sub = tieferstellen (ohne die Schriftgröße zu reduzieren).
super = höherstellen (ohne die Schriftgröße zu reduzieren).
text-top = am oberen Schriftrand ausrichten.
text-bottom = am unteren Schriftrand ausrichten.
Bei Fließtext ist auch eine prozentuale Angabe ist möglich. Die Ausrichtung orientiert sich dann an der elementeigenen Zeilenhöhe.
|
|
Horizontale Ausrichtung (text-align, alignment) Anzeigebeispiel: So sieht's aus
Sie können Textabsätze ausrichten.
<style type="text/css">
p,blockquote { text-align:justify }
p,blockquote { alignment:justify }
</style>
|
Mit text-align: oder alignment: können Sie gewünschte Elemente für Textinhalte ausrichten. Folgende Angaben sind möglich:
left = linksbündig ausrichten (Voreinstellung).
center = zentriert ausrichten.
right = rechtsbündig ausrichten.
justify = als Blocksatz ausrichten.
In Version 1.0 der CSS-Style-Sheets wurde die Syntax text-align vorgeschlagen, die auch in Netscape und im MS Internet Explorer implementiert ist. In der Version 2.0 der CSS-Sprache schlägt das W3-Konsortium die Syntax alignment vor, die jedoch von den Browsern (noch) nicht interpretiert wird. Die Verwendung von text-align ist derzeit vorzuziehen, weil sie näher an der Praxis ist.
|
|
Textumbruch (white-space) Anzeigebeispiel: So sieht's aus
Sie können festlegen, wie der Zeilenumbruch innerhalb von Elementen mit Text erfolgen soll.
<p style="white-space:pre">Text Text</p> <p style="white-space:nowrap">Text Text</p> |
Mit white-space: können Sie das Verhalten für den Zeilenumbruch festlegen. Folgende Angaben sind möglich:
normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>).
nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags.
Diese Angabe gehört zur Version 2.0 der Style-Sheet-Sprache. Der MS Internet Explorer 4.0 interpretiert sie noch gar nicht, Netscape 4.0 interpretiert zumindest den Wert pre.
|
| |
weiter: |
Style-Sheet-Angaben: Rahmen und Innenabstände
|
zurück: |
Style-Sheet-Angaben: Schriftformatierung mit Schriftartendatei
|
