SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben
Die hier beschriebenen Style-Sheet-Angaben eröffnen HTML und seiner Ergänzungssprache CSS völlig neue Räume, denn mit diesen Angaben wird es möglich, Drucklayouts zu definieren. Das könnte in Zukunft gewaltige Konsequenzen für die gesamte DTP-Branche haben. HTML und CSS werden durch diese Bereicherung zu einer ernstzunehmenden Konkurrenz für software-abhängige Dateiformate, etwa denen von QuarkExpress, FrameMaker oder Ventura Publisher. Der Vorteil von HTML/CSS gegenüber den software-abhängigen Formaten liegt in der freien Verfügbarkeit und der strengen Plattformunabhängigkeit. Niemand wird mehr auf eine bestimmte DTP-Software angewiesen sein, um ansprechende und professionell aussehende Druckerzeugnisse wie Zeitschriften, Handbücher oder Broschüren zu erstellen. Probleme mit zweigleisigem Publizieren im Internet und in Printform (Stichwort: cross media publishing) könnten entfallen, wenn HTML/CSS sich als Standard für beide Publikationsformen etabliert. Die Möglichkeit des zweigleisigen Editierens wird auch durch die Möglichkeit unterstützt, 
Style-Sheet-Dateien für unterschiedliche Ausgabemedien zu definieren.
Die Style-Sheet-Angaben zu Seitenlayout und Seitenumbruch sind jedoch nicht nur für Druckerzeugnisse interessant. Ein entsprechendes Präsentationswerkzeug bzw. ein entsprechend ausgerichteter WWW-Browser könnte diese Angaben auch zur bildschirmseiten-orientierten Präsentation benutzen. Diese Style-Sheet-Angaben stellen deshalb auch einen Angriff auf bildschirmseiten-orientierte Präsentations-Software dar, also etwa auf MS PowerPoint. Auch dabei gilt: der Vorteil von HTML/CSS ist die Software- und Plattformunabhängigkeit.
Zur Zeit ist das alles jedoch noch Zukunftsmusik. Die Style-Sheet-Befehle liegen vor, gehören jedoch zum Sprachstandard 2.0 der CSS-Sprache. Von den Befehlen interpretiert lediglich der MS Internet Explorer 4.x diejenigen für den Seitenumbruch.
 
|
Seitenlayout definieren (@page)Um ein Seitenlayout zu erzeugen, müssen Sie den hier beschriebenen CSS-Befehl anwenden.
<style type="text/css">
@page { /* Angaben zum Seitenlayout */ }
</style>
|
Mit @page können Sie ein Seitenlayout erstellen. Die Angabe ist ein Behälter für die einzelnen Angaben zum Aussehen des Layouts. Dazu gehören die Seitengröße (size), die Seitenränder (margin usw.) und bei Bedarf auch Angaben zu Registermarken (marks). Diese Angaben stehen in den geschweiften Klammern im Anschluß an @page.
Zwischen dem Layout-Befehl @page und den Angaben in den geschweiften Klammern kann auch ein Doppelpunkt folgen. Dahinter können Sie Angaben für unterschiedliche Seiten links/rechts und für laufende Kopf-/Fußzeilen notieren.
Die Angabe @page stellt sicher, daß sich die Definitionen zum Seitenlayout in den geschweiften Klammern nur auf Druckseiten und Bildschirmseiten beziehen und vom WWW-Browser nicht irrtümlich als Definitionen für das normale Erscheinungsbild der HTML-Datei am Bildschirm interpretiert wird. So können Sie mit dieser Angabe z.B. völlig unabhängig von sonstigen Style-Sheet-Angaben im gleichen Bereich ein Seitenlayout für den Ausdruck Ihrer Web-Seiten erstellen.
|
|
Seitengröße (size)
Anzeigebeispiel: So sieht's aus
Sie können bestimmen, welche Breite und Höhe Ihr Seitenlayout haben soll. Für Druckdokumente definieren Sie auf diese Weise das gewünschte Papierformat. Für bildschirmseitenorientierte Präsentationen können Sie die Größe aller Bildschirmseiten festlegen.
<style type="text/css">
@page { size:21.0cm 29.7cm; }
</style>
|
Mit size: können Sie im Anschluß an @page die Seitengröße definieren. Erlaubt sind zwei numerische Angaben, durch ein Leerzeichen voneinander getrennt. Dabei bedeutet die erste Angabe die Breite der Seite (im obigen Beispiel 21.0cm) und die zweite Angabe die Höhe der Seite (im obigen Beispiel 29.7cm). Ferner sind folgende Angaben erlaubt:
auto = Das normale Format des Ausgabemediums (Normaleinstellung).
landscape = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch querkant.
portrait = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch hochkant.
|
|
Seitenränder (margin usw.) Anzeigebeispiel: So sieht's aus
Sie können die Abstände zwischen Papierrand/Bildschirmfensterrand und Seiteninhalt festlegen.
<style type="text/css">
@page { size:21.0cm 14.85cm; margin-top:1.7cm; margin-bottom:1.4cm;
margin-left:2cm; margin-right:2cm }
</style>
|
Um die Seitenränder einzeln zu definieren, stehen folgende Angaben zur Verfügung:
margin-top = oberer Seitenrand.
margin-bottom = unterer Seitenrand.
margin-left = linker Seitenrand.
margin-right = rechter Seitenrand.
Wenn Sie für alle vier Seitenränder einen einheitlichen Wert definieren wollen, können Sie anstelle dieser Angaben auch die Angabe margin: verwenden.
Für alle Seitenrandangaben ist eine eine numerische Angabe erlaubt.
Diese Angaben haben keinen Einfluß auf Seitenränder bei der normalen Browser-Präsentation am Bildschirm, da sie hinter der Seitenlayout-Angabe @page stehen. Für die normale HTML-Präsentation im WWW-Browser gibt es entsprechende Style-Sheet-Angaben zu Rändern.
|
|
Schnitt- und Passermarken (marks) Anzeigebeispiel: So sieht's aus
Schnittmarken (engl. crop marks) sind Hilfslinien, die bei der Weiterverarbeitung in Belichtung und Druck zum Zuschneiden von Seiten benutzt werden.
Passermarken, auch Registermarken (engl. cross marks oder register marks) sind Markierungen zum exakten Ausrichten des Satzspiegels bei Belichtung und Druck.
Wenn Sie also beispielsweise ein Seitenformat von 10.8cm mal 18.2cm definieren und dieses auf DIN A 4-Papier ausdrucken, können Sie solche Marken setzen, die sichtbar im Ausdruck erscheinen und für die Satzspiegelvorbereitung in der Belichtung oder in der Druckerei das genaue Seitenformat anzeigen.
<style type="text/css">
@page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross; }
</style>
|
Mit marks: können Sie im Anschluß an @page Schnitt- und Passermarken definieren. Folgende Angaben sind erlaubt:
none = Keine Marken (Normaleinstellung).
crop = Schnittmarken setzen.
cross = Passermarken setzen.
Die Angaben crop und cross können Sie beide angeben, durch Leerzeichen getrennt. Dann werden beide Markentypen berücksichtigt.
|
|
Seiten rechts/linksSie können für linke und rechte Seiten unterschiedliche Angaben notieren. Dadurch können Sie beispielsweise Heft- oder Binderänder ausgleichen.
<style type="text/css">
@page { size:21.0cm 14.85cm; margin-top:1.5cm; margin-bottom:2cm }
@page :left { margin-left:1.5cm; margin-right:2cm }
@page :right { margin-left:2cm; margin-right:1.5cm }
</style>
|
Unterschiedliche Seiten für rechts und links erzeugen Sie, indem Sie hinter @page, getrennt durch ein Leerzeichen, einen Doppelpunkt norieren und sofort dahinter eines der Schlüsselwörter left (zur Bezeichnung linker Seiten) oder right (zur Bezeichnung rechter Seiten) angeben. Dahinter können Sie in geschweiften Klammern Angaben zu Größe, Seitenrändern und Schnitt-/Passermarken für die beiden Seitentypen notieren. In der Praxis ist die Unterscheidung vor allem nützlich, um (wie im obigen Beispiel) spiegelverkehrte Werte zum rechten und linken Seitenrand anzugeben. So lassen sich Heft-/Binderänder ausgleichen.
Weitere Seitentypen, z.B. ein Typ "erste Seite", sind geplant. In der Version 2.0 der CSS-Sprache sind jedoch nur die beiden Seitentypen links und rechts vorgesehen.
|
|
Laufende Kopf-/FußzeilenSie können für ein Seitenformat laufende Kopf- und Fußzeilenbereiche definieren, die auf allen Seiten wiederholt werden. Wenn Sie linke und rechte Seiten definieren, können Sie für beide Seitentypen auch unterschiedliche Kopf-/Fußzeilenbereiche definieren.
<style type="text/css">
@page { size:21.0cm 14.85cm; }
@page :header
{ content: ,first(chapter), ; border-bottom:thin solid black; }
@page :footer
{ content: ,"Seite " decimal(pageno), ; border-top:thin solid black; }
</style>
|
<style type="text/css">
@page { size:21.0cm 14.85cm; }
@page :left { margin-left:1.5cm; margin-right:2cm }
@page :right { margin-left:2cm; margin-right:1.5cm }
@page :left :header
{ content: decimal(pageno),,first(chapter); border-bottom:thin solid black; }
@page :right :header
{ content: first(section),,decimal(pageno); border-bottom:thin solid black; }
@page :left :footer
{ content: "Seite " decimal(pageno); text-align:center; }
@page :right :footer
{ content: "Seite " decimal(pageno); text-align:center; }
</style>
|
Kopf- und Fußzeilen erzeugen Sie, indem Sie hinter @page, getrennt durch ein Leerzeichen, einen Doppelpunkt norieren und sofort dahinter eines der Schlüsselwörter header (zur Bezeichnung von Kopfzeilen) oder footer (zur Bezeichnung von Fußzeilen) angeben. Wenn Sie linke und rechte Seiten definieren, können Sie alle Angaben kombinieren. Isg. sind folgende Kombinationen denkbar:
@page :header = Kopfzeile für alle Seiten.
@page :footer = Fußzeile für alle Seiten.
@page :left :header = Kopfzeile für alle linken Seiten.
@page :right :header = Kopfzeile für alle rechten Seiten.
@page :left :footer = Fußzeile für alle linken Seiten.
@page :right :footer = Fußzeile für alle rechten Seiten.
Definieren Sie nur die Bereiche, die Sie wünschen. Wenn Sie beispielsweise keine Fußzeile haben wollen, lassen Sie die entsprechenden Definitionen einfach weg.
Hinter :header bzw. :footer können Sie den Kopf- bzw. Fußzeilenbereich definieren. Dazu stehen Ihnen alle üblichen Style-Sheet-Angaben zur Formatierung zur Verfügung. In den obigen Beispielen erhalten Kopfzeilen beispielsweise eine Line unterhalb (border-bottom).
Die wichtigste Angabe innerhalb der geschweiften Klammern ist jedoch content:. Damit können Sie den eigentlichen Inhalt der Kopf- oder Fußzeilen bestimmen. Eine Kopf- oder eine Fußzeile kann eines, zwei oder drei Elemente enthalten. Das erste Element wird links ausgerichtet, das zweite Element zentriert und das dritte Element rechts. Die Elemente werden durch Kommata getrennt. Notieren Sie hinter content am besten stets zwei Kommata. Vor das erste Komma notieren Sie das Element, das links ausgerichtet werden soll, zwischen die beiden Kommata das Element, das zentriert ausgerichtet werden soll, und hinter das zweite Komma das Element, das rechts ausgerichtet werden soll. Wenn Sie für eines oder zwei der Elemente keine Angabe machen möchten, lassen Sie die Kommata stehen, machen aber an der entsprechenden Stelle keine Angabe. Im obigen Beispiel 1 etwa können Sie erkennen, wie auf diese Weise bei Kopf- und Fußzeile je nur ein Element definiert wird. Da das Element zentriert werden soll, steht es zwischen den beiden Kommata. In Beispiel 2 können Sie hinter @page :left :header sehen, wie zwei Elemente definiert werden - eines links und eines rechts ausgerichtet. Der Bereich in der Mitte bleibt frei. Daher die zwei Kommata hintereinander und links bzw. rechts davon die beiden Elemente.
Ein Element, das hinter content: erlaubt ist, kann ein feststehender Text sein. Solche feststehenden Texte müssen Sie in Anführungszeichen setzen. In den obigen Beispielen ist das z.B. der Text "Seite ". Neben solchen feststehenden Texten gibt es jedoch noch eine Reihe dynamischer, variabler Textteile. Folgende Angaben sind dabei erlaubt:
decimal(pageno) = Aktuelle Seitenzahl in dezimaler Form (1,2,3,4 usw.).
lower-roman(pageno) = Aktuelle Seitenzahl in römischer Form klein (i,ii,iii,iv usw.).
upper-roman(pageno) = Aktuelle Seitenzahl in römischer Form groß (I,II,III,IV usw.).
lower-alpha(pageno) = Aktuelle Seitenzahl in alphabetisch klein (a,b,c,d usw.).
upper-alpha(pageno) = Aktuelle Seitenzahl in alphabetisch groß (A,B,C,D usw.).
decimal(pages) = Gesamtseitenzahl in dezimaler Form.
lower-roman(pages) = Gesamtseitenzahl in römischer Form klein.
upper-roman(pages) = Gesamtseitenzahl in römischer Form groß.
lower-alpha(pages) = Gesamtseitenzahl in alphabetisch klein.
upper-alpha(pages) = Gesamtseitenzahl in alphabetisch groß.
first(title) = Inhalt des ersten Elements auf der Seite mit running-head:title (siehe unten).
first(chapter) = Inhalt des ersten Elements auf der Seite mit running-head:chapter (siehe unten).
first(section) = Inhalt des ersten Elements auf der Seite mit running-head:section (siehe unten).
last(title) = Inhalt des letzten Elements auf der Seite mit running-head:title (siehe unten).
last(chapter) = Inhalt des letzten Elements auf der Seite mit running-head:chapter (siehe unten).
last(section) = Inhalt des letzten Elements auf der Seite mit running-head:section (siehe unten).
previous(title) = Inhalt des letzten zuvor notierten Elements mit running-head:title (siehe unten).
previous(chapter) = Inhalt des letzten zuvor notierten Elements mit running-head:chapter (siehe unten).
previous(section) = Inhalt des letzten zuvor notierten Elements mit running-head:section (siehe unten).
url = URL-Adresse des Dokuments.
date = Lokales Datum und Uhrzeit.
|
|
HTML-Elemente für laufende Kopf-/Fußzeilen markieren (running-head)Diese Angabe ist von Bedeutung, wenn Sie laufende Kopf-/Fußzeilen definieren und dabei erlaubte variable Inhalte definieren. Sinnvoll ist es beispielsweise, Überschriften mit dieser Style-Sheet-Angabe zu kennzeichnen.
<html>
<head>
<title>Beispiel</title>
<style type="text/css">
@page { size:21.0cm 14.85cm; }
@page :header
{ content: first(title),,first(chapter); }
</style>
</head>
<body>
<h1 style="running-head:title">Titel des Dokuments</h1>
<h2 style="running-head:chapter">Ein Kapitel</h2>
viel Inhalt
<h2 style="running-head:chapter">Ein anderes Kapitel</h2>
viel Inhalt
</body>
</html>
|
Mit running-head: können Sie geeignete HTML-Inhalte für variable Kopf-/Fußzeilen markieren. Im obigen Beispiel wird eine Kopfzeile definiert, die links den Titel des Dokuments (first(title)) ausgibt und rechts das aktuelle Kapitel (first(chapter)). Im Text wird dazu eine Überschrift 1. Ordnung, die am Beginn steht, mit running-head:title als Titel für die Kopfzeile definiert. Überschriften 2. Ordnung, die im Dokument folgen, werden mit running-head:chapter als Kapitel definiert.
Erlaubt sind bei running-head: folgende Angaben:
title = Inhalt des HTML-Elements für first(title), last(title) oder previous(title) markieren.
chapter = Inhalt des HTML-Elements für first(chapter), last(chapter) oder previous(chapter) markieren.
section = Inhalt des HTML-Elements für first(section), last(section) oder previous(section) markieren.
none = Inhalt des HTML-Elements nicht markieren (Normalfall).
|
|
Seitenumbruch vor einem Element (page-break-before) Anzeigebeispiel: So sieht's aus
Sie können einen Seitenumbruch vor einem HTML-Element erzwingen oder verhindern.
<h1 style="page-break-before:always">Überschrift mit Seitenumruch oberhalb</h1> |
Mit page-break-before: können Sie einen Seitenumbruch vor dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:
always = immer einen Seitenumbruch vor dem aktuellen Element einfügen.
avoid = nie einen Seitenumbruch vor dem aktuellen Element einfügen.
left = bei linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste linke Seite.
right = bei linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste rechte Seite.
auto = keine Angabe zum Seitenumbruch (Normaleinstellung).
|
|
Seitenumbruch nach einem Element (page-break-after) Anzeigebeispiel: So sieht's aus
Sie können einen Seitenumbruch nach einem HTML-Element erzwingen oder verhindern.
<p style="page-break-after:avoid">Textabsatz ohne Seitenumbruch unterhalb</p> |
Mit page-break-after: können Sie einen Seitenumbruch vor dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:
always = immer einen Seitenumbruch nach dem aktuellen Element einfügen.
avoid = nie einen Seitenumbruch nach dem aktuellen Element einfügen.
left = bei linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste linke Seite.
right = bei linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste rechte Seite.
auto = keine Angabe zum Seitenumbruch (Normaleinstellung).
|
|
Alleinstehende Zeilen am Seitenende - Schusterjungen (orphans)Sie können verhindern, daß Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, daß eine einzelne Zeile auf der einen Seite steht und alle anderen Absatzzeilen auf die nächsten Seite kommen.
<style type="text/css">
p,blockqoute,div { orphans:3; }
</style>
|
Mit orphans: können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite vor dem Umbruch mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.
|
|
Alleinstehende Zeilen am Seitenanfang - Hurenkinder (widows)Sie können verhindern, daß Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, daß eine einzelne Zeile auf der neuen Seite steht und alle anderen Absatzzeilen auf der Seite vor dem Seitenumbruch bleiben.
<style type="text/css">
p,blockqoute,div { widow:3; }
</style>
|
Mit widow: können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite nach dem Umbruch auf der neuen Seite mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.
|
| |
weiter: |
Style-Sheet-Angaben: Sound-Kontrolle für Sprachausgabe
|
zurück: |
Style-Sheet-Angaben: Mehrspaltiger Textfluß
|
