HTML-Dateien selbst erstellen: Inhaltsverzeichnis


MS IE ab V3.0 Style-Sheets

 Über Style-Sheets
 Style-Sheets in HTML definieren
 Syntax beim Zuseisen von Eigenschaften
 Kurzreferenz der Eigenschaften
 Anzeigebeispiele: Style-Sheets


Über Style-Sheets

Style-Sheets sollen in HTML endlich ermöglichen, was in jeder halbwegs brauchbaren Textverarbeitung längst zum Standard gehört: definierte Absatzformate, die auf einzelne Textabsätze anwendbar sind. Dazu gehören Angaben zu Schriftarten, Absatzabständen, Einzügen usw.

Style-Sheets sind derzeit (zum Redaktionsschluß dieses Dokuments) noch nicht endgültig festgelegt. Style-Sheets für HTML sind seit geraumer Zeit heiß diskutiert. Aus den Diskussionen, die unter der Schirmherrschaft des W3-Konsortiums stattfinden, kristallisiert sich allmählich ein Style-Sheet-Konzept heraus. Die Beschreibungen in diesem Abschnitt beschreiben die wichtigsten Elemente des W3-Konzepts.

Der Microsoft Internet Explorer interpretiert ab Version 3.0 Style-Sheets entsprechend der gegenwärtigen Vorschläge. Da die Technik noch nicht ausgereift ist, kommt es jedoch nicht immer zu den gewünschten Anzeigeergebnissen.

Konflikt: DTP-Feinheiten contra Plattformunabhängigkeit

DTP-Feinheiten, wie sie durch Style-Sheets realisiert werden sollen, stehen in Konflikt zu den unterschiedlichen Betriebssystem- und Oberflächen-Ressourcen der Anwender. Als HTML-Entwickler wissen Sie nicht, womit Ihre WWW-Seiten gelesen werden, ob mit einem MS-Windows-PC, einem Atari, einem Mac, einem Amiga, einer Sun oder einem VMS-Großrechner. HTML stellt zwar einen einheitlichen Zeichensatz zur Verfügung, aber Sie werden kaum eine Schriftart finden, die auf wirklich jedem Rechner installiert ist. Auch erzwungene Schriftgrößen sind problematisch. Auf einem Bildschirm mit 1280x1024 Pixeln sieht eine 9-Punkt-Schrift ziemlich mikrig aus, auf einem Bildschirm mit 640x480 Pixeln dagegen recht ordentlich.

Echte DTP-Präzision wird HTML im Rahmen seines Ansatzes ohnehin nie erreichen können. Da sind Formate wie das des Acrobat Reader (PDF-Dateien) wesentlich ausgereifter. Und auch das PDF-Format ist plattformunabhängig. Nachteil gegenüber HTML sind die vergleichsweise teueren Editierwerkzeuge und die Dateigrößen.

Informationen über Style-Sheets im WWW

Im WWW finden Sie die aktuellen Vorschläge des W3-Konsortiums zum Thema Style-Sheets:

  Style-Sheets Internet-Draft

Der hier vorgestellte Stand wurde am 05.05.96 im WWW publiziert, und zwar von:
  Håkon W Lie
  Bert Bos


 Seitenanfang


Style-Sheets in HTML definieren

Innerhalb einer HTML-Datei können Sie Style-Sheets im Dateikopf, also zwischen <head> und </head>, definieren.

Beispiel


  <html>
  <head>
  <title>Dokument mit blauer H1-Überschrift in Helvetica</title>
  <style>
    h1 { color: blue }
    p { font : 9pt Times }
  </style>
  </head>
  <body>
  <h1>H1-Überschrift</h1>
  <p>Einfacher Textabsatz</p>
  </body>
  </html>

Mit <style> leiten Sie eine Style-Sheet-Definition ein. Zwischem diesem einleitenden Tag und seinem Gegenstück </style> definieren Sie Formate. Dabei verwenden Sie Standard-Tags von HTML. Diesen Standard-Tags können Sie Eigenschaften zuweisen. Die definierten Eigenschaften gelten dann für die gesamte HTML-Datei. Im Beispiel wird einer  Überschrift 1. Ordnung die Farbe blau zugewiesen. Normale  Absätze erhalten im Beispiel die Schriftart Times und eine Schriftgröße von 9 Punkt.


 Seitenanfang


Syntax beim Zuweisen von Eigenschaften

Die Syntax beim Zuweisen von Eigenschaften zu einem Standard-Absatztyp von HTML folgt bestimmten Regeln.

Beispiel


    h1 { color: blue; font-style: italic }

Zuerst notieren Sie das HTML-Tag, dem Sie Eigenschaften zuweisen wollen, im Beispiel h1 (Überschrift 1. Ordnung). Dahinter folgt, am besten durch ein Leerzeichen getrennt, eine öffnende geschweifte Klammer. Zwischen dieser Klammer und einer schließenden geschweiften Klammer notieren Sie die gewünschten Eigenschaften. Jede Eigenschaftszuweisung besteht aus einem Namen, z.B. color und einem Wert, z.B. blue. Zwischen Name und Wert der Eigenschaft steht ein Doppelpunkt. Wenn Sie einem HTML-Tag mehrere Eigenschaften zuweisen wollen, wie im Beispiel, trennen Sie die Eigenschaften jeweils durch einen Strichpunkt.

Mehreren HTML-Tags gleiche Eigenschaften zuweisen

Sie können mehreren HTML-Tags die gleichen Eigenschaften zuweisen.

Beispiel


    h1,h2,h3 { color: blue; font-style: italic }

Indem Sie vor den geschweiften Klammern, in denen die Eigenschaften definiert werden, mehrere HTML-Tags, durch Kommata getrennt, notieren, gelten die Eigenschaften für all diese Tags.

Unterklassen von HTML-Tags bilden

Mit dieser mächtigen Funktionalität haben Sie praktisch grenzenlose Freiheit beim Definieren von Formaten.

Beispiel


    p.Blau { color: blue }
    p.BlauKursiv { color: blue; font-style: italic }
    p.BlauFett { color: blue; font-weight: bold }
    p.Rot { color: red }
    p.RotKlein { color: red; line-height: 1.5; font-size: 8pt }

Unterklassen von HTML-Tags bilden Sie, indem Sie zuerst das Tag notieren, im Beispiel p. Dahinter folgt ein Punkt und dahinter ein Name für die Unterklasse. Diese Namen können Sie frei vergeben. Die Namen dürfen keine Leerzeichen enthalten. Groß- und Kleinschreibung werden unterschieden. Die Namen sollten nicht zu lang sein und das Format treffend beschreiben.

Innerhalb der HTML-Datei können Sie solche Unterklassen dann anwenden.

Beispiel


  <p class=BlauKursiv>Das ist ein Absatz mit blauer und kursiver Schrift</p>

Wichtig dabei ist, daß Sie immer ein einleitendes und ein abschließendes Tag verwenden. Das gilt auch für Tags wie <p>, die normalerweise alleine stehen können. Im einleitenden Tag notieren Sie die Zusatzangabe class=. Dahinter folgt der Name der Unterklasse, die Sie bei der Definition im Dateikopf vergeben haben.

Angaben für verschachtelte HTML-Tags

Sie können bestimmen, daß ein HTML-Tag eine bestimmte Eigenschaft dann und nur dann hat, wenn es innerhalb eines anderen HTML-Tags vorkommt.

Beispiel


    h1 { color: red }
    h1 i { color: red }

Im Beispiel wird festgelegt, daß Textabschnitte, die mit dem Tag <i> ... </i> (kursive Schrift) formatiert werden, rot dargestellt werden, aber nur dann, wenn das Tag innerhalb einer Überschrift erster Ordnung vorkommt. In allen anderen Fällen wird die normale Schriftfarbe verwendet. Dazu notieren Sie zuerst das übergeordnete Tag, im Beispiel h1, und dahinter, durch ein Leerzeichen getrennt, das untergeordnete Tag, im Beispiel i.

Diese Angaben sind aus folgendem Grund wichtig.

Beispiel innerhalb der HTML-Datei


    <h1>Wir lernen <i>Style-Sheets</i></h1>
    <h1>Wir lernen <em>Style-Sheets</em></h1>

Da im Beispiel oben für Überschriften 1. Ordnung und für kursiven, mit <i> ... </i> formatierten Text innerhalb solcher Überschriften die Farbe Rot definiert wurde, wird der kursive Teil bei Verwendung dieses Tags in der gleichen Farbe dargestellt wie der übrige Überschriftentext. Im zweiten Beispiel dagegen, wo das Tag <em> ... </em> zur Formatierung angewendet wird, wird der Textteil "Style-Sheets" in normaler Schriftfarbe angezeigt, da für em nichts anderes definiert wurde.

Pseudo-Elemente

Pseudo-Elemente sind in diesem Zusammenhang Textbestandteile, die sich nicht durch ein eindeutiges HTML-Tag ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis". Auch solchen Elementen können Sie in Style-Sheets Eigenschaften zuweisen.

Beispiel


    a:link { color: red }
    a:visited { color: green }
    a:active { color: blue }
    p:firstline { font-weight: bold }
    p:firstletter { font-size: 150% }

Pseudo-Elemente betreffen vor allem die Sprachelemente Verweis und Absatz. In den Beispielen werden drei Pseudo-Elemente zu Verweisen vorgestellt, beginnend mit a:, und zwei Pseudo-Elemente zu Abs&quml;tzen, beginnend mit p:.

Bei Pseudo-Elemente bedeuten:
p:link = Verweise zu noch nicht besuchten Seiten
p:visited = Verweise zu bereits besuchten Seiten
p:active = Verweise, die gerade angeklickt werden
p:firstline = Erste Zeile eines Absatzes
p:firstletter = Erster Buchstaben eines Absatzes

Kommentare bei Style-Sheet-Definitionen

Sie können Ihre Style-Sheet-Definitionen auskommentieren.

Beispiel


    h1 { color: red }  /* Rote H1-Ueberschrift */

Der Kommentar beginnt mit der Zeichenfolge /* und endet mit der Zeichenfolge */.


 Seitenanfang


Kurzreferenz der Eigenschaften

In diesem Abschnitt werden wichtige Eigenschaften aufgelistet, die Sie in Style-Sheet-Definitionen verwenden können.

Eigenschaft Syntax Werte / Wertebereiche Beispiele
Absatzein/-ausrückung text-indent: Wert in mm, cm, em, pt oder pc
Wert in %
Negative Werte für Absatzausrückung
p { text-indent: 5mm }
h2 { text-indent: 10% }
Abstand oben margin-top: Wert in mm, cm, em, pt oder pc
Wert in %
p { margin-top: 18pt }
body { margin-top: 2cm }
Abstand links margin-left: Wert in mm, cm, em, pt oder pc
Wert in %
h3 { margin-left: 1cm }
body { margin-left: 2cm }
Abstand rechts margin-right: Wert in mm, cm, em, pt oder pc
Wert in %
h3 { margin-right: 15mm }
body { margin-right: 1cm }
Abstand unten margin-bottom: Wert in mm, cm, em, pt oder pc
Wert in %
p { margin-bottom: 6pt }
body { margin-bottom: 3cm }
Farbe Hintergrund background: hexadezimal oder Farbnamen dl { background: #CCFFFF }
body { background: beige }
Farbe Vordergrund color: hexadezimal oder Farbnamen b { color: #000099 }
dd { color: green }
Listen-Typ list-style: disc, circle, square,
decimal, lower-roman, upper-roman,
lower-alpha, upper-alpha
ul { list-style: square }
ol { list-style: lower-roman }
Schriftart font-style: normal, italic, small-caps,
oblique, small-caps, small-caps
em { font-style: oblique }
h1 { font-style: italic }
Schriftfamilie font-family: Schriftfamilie h2 { font-familiy: gill }
Schriftgewicht font-weight: extra-light,light,demi-light,
medium,demi-bold,bold,
extra-bold,bolder,lighter
strong { font-weight: demi-bold }
li { font-weight: light }
Schriftgröße font-size: xx-small,x-small,small,
medium,large,x-large,xx-large
Wert in pt oder Wert in %
p { font-size: 12pt }
dfn { font-size: 80% }
Schriftweite letter-spacing: Wert in mm, cm, em, pt oder pc p { letter-spacing: 1pt }
h1 { letter-spacing: 4mm }
Wortabstand word-spacing: Wert in mm, cm, em, pt oder pc h3 { word-spacing: 5mm }
em { word-spacing: 4em }
Zeilenhöhe line-height: Ordinalangabe,
Wert in mm, cm, em, pt oder pc
Wert in %
p { line-height: 1.4 }
h2 { line-height: 105% }


 HTML-Dateien selbst erstellen: Inhaltsverzeichnis
 Seitenanfang

Blättern:
Marquee-Effekte und Dia-Shows  |  Frames (Bildschirmbereiche)


© 1996  Stefan Münz