SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben
Was Netscape seinerzeit mit der Version 3.0 seines Browsers eingeführt hat - die Möglichkeit zum 
mehrspaltigen Textfluß - wird nun mit Hilfe von Style-Sheet-Angaben auch zum offiziellen Standard erhoben. Die entsprechenden HTML-Befehle von Netscape, die nie Eingang fanden in den offiziellen HTML-Standard und in der Praxis auch nicht viel verwendet wurden, werden dadurch in Zukunft sicher obsolet (möglich, aber unerwünscht) werden. Nachteil der hier beschriebenen Style-Sheet-Angaben ist jedoch, daß sie erst zum CSS-2.0-Standard gehören. Weder Netscape noch der MS Internet Explorer interpretieren diese Angaben in ihren 4er-Versionen.
Mehrspaltiger Textfluß erlaubt das automatische Verteilen von größeren Fließtextabschnitten auf mehrere Textspalten. Anders als bei blinden Tabellen müssen Sie sich nicht selbst darum kümmern, was in welcher Spalte steht. Der Browser bricht den Text bei der Präsentation automatisch so um, daß er sich optimal auf die Anzahl der definierten Spalten verteilt.
Sinnvoll sind die hier beschriebenen Angaben vor allem für HTML-Tags, die einen größeren Bereich definieren, vor allem für <div>...</div>. So können Sie innerhalb des Bereichs andere Gestaltungselemente wie Überschriften, Textabsätze, Grafiken usw. notieren, die alle in den mehrspaltigen Textfluß mit eingehen.
 
|
Anzahl Spalten (columns)
Anzeigebeispiel: So sieht's aus
Um für ein HTML-Element oder einen Bereich einen mehrspaltigen Textfluß zu definieren, müssen Sie die Anzahl der Spalten angeben.
<style type="text/css">
div.zweipaltig { columns:2; }
</style>
|
Mit columns: können Sie die Anzahl der gewünschten Spalten bestimmen. Der Text wird dann automatisch so umgebrochen, daß alle Spalten optimal gefüllt werden.
|
|
Spaltenabstand (column-gap) Anzeigebeispiel: So sieht's aus
Sie können bestimmen, wie groß der Abstand zwischen den einzelnen Spalten sein soll. Bei mehr als zwei Spalten gilt diese Angabe für alle Spaltenabstände.
<div style="columns:3; column-gap:0.5cm">Inhalt</div> |
Mit column-gap: können Sie den Spaltenabstand bestimmen. Erlaubt ist eine numerische Angabe.
|
|
Trennstrichdicke (column-rule-width) Anzeigebeispiel: So sieht's aus
Sie können die Dicke eines Trennstrichs zwischen den Spalten eines mehrspaltigen Textflusses bestimmen. Bei mehr als zwei Spalten wird der Trennstrich zwischen allen Spalten wiederholt. Diese Angabe sollten Sie stets mit einer Angabe zum Trennstrichtyp kombinieren. Nur durch beide Angaben werden Trennstriche definiert.
<style type="text/css">
div.dreispaltig { columns:3; column-rule-width:1mm; column-rule-style:solid; }
</style>
|
Mit column-rule-width: können Sie die Dicke eines Trennstriches zwischen den Spalten bestimmen. Erlaubt ist eine numerische Angabe.
|
|
Trennstrichtyp (cloumn-rule-style) Anzeigebeispiel: So sieht's aus
Sie können bestimmen, daß die Spalten eines mehrspaltigen Textflusses durch senkrechte Trennstriche getrennt werden. Dazu können Sie angeben, wie die Trennstriche aussehen sollen. Diese Angabe sollten Sie stets mit einer Angabe zur Trennstrichdicke kombinieren. Nur durch beide Angaben werden Trennstriche definiert.
<div style="columns:2; column-rule-style:solid; column-rule-width:2mm">Inhalt</div> |
Mit column-rule-style: können Sie das Aussehen der Trennstriche zwischen den Spalten bestimmen. Erlaubt sind dabei die gleichen Angaben wie beim Rahmentyp für Rahmen zu einem beliebigen HTML-Element:
none = keine Trennstriche (Normaleinstellung).
dotted = gepunktete Trennstriche.
dashed = gestrichelte Trennstriche.
solid = durchgezogene Trennstriche.
double = doppelt durchgezogene Trennstriche.
groove = 3D-Effekt bei Trennstrichen.
ridge = 3D-Effekt bei Trennstrichen.
inset = 3D-Effekt bei Trennstrichen.
outset = 3D-Effekt bei Trennstrichen.
|
|
Trennstrichfarbe (column-rule-color) Anzeigebeispiel: So sieht's aus
Sie können für Trennstriche zwischen den Spalten eines mehrspaltigen Textflusses die Farbe der Trennlinien bestimmen. Voraussetzung sind gleichzeitige Angaben zur Trennstrichdicke und zum Trennstrichtyp.
<style type="text/css">
div.Glosse { columns:2; column-rule-style:solid; column-rule-width:2mm; column-rule-color:#FF0000; }
</style>
|
Mit column-rule-color: können Sie die Farbe für die Trennstriche angeben. Erlaubt ist eine Farbangabe.
|
|
Trennstrich (allgemein) - column-rule Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
Trennstrichdicke (column-rule-width)
Trennstrichtyp (column-rule-style)
Trennstrichfarbe (column-rule-color)
<div style="column-rule:2mm solid green">Inhalt</div> |
Mit column-rule: können Sie Angaben für Trennstriche zwischen den Spalten eines mehrspaltigen Textflusses zusammenfassen. Notieren Sie Angaben zur Trennstrichdicke, zum Trennstrichtyp sowie zur Trennstrichfarbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Die Angabe zur Trennstrichfarbe ist optional.
|
| |
weiter: |
Style-Sheet-Angaben: Seitenlayout und Seitenumbruch
|
zurück: |
Style-Sheet-Angaben: Elemente positionieren
|
