HTML-Dateien selbst erstellen: Inhaltsverzeichnis
Style-Sheets
Über Style-Sheets Style-Sheets in HTML definieren Syntax beim Zuseisen von Eigenschaften Kurzreferenz der Eigenschaften
Anzeigebeispiele: Style-Sheets
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.
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.
Der hier vorgestellte Stand wurde am 05.05.96 im WWW publiziert,
und zwar von:
Håkon W Lie 
Bert Bos
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.
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.
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.
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.
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.
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 */.
| 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