Style Sheets sind Stilvorlagen, in denen (häufig vorkommende oder ganz spezielle) Stile (Formatierungen) festgelegt werden können. Bei konsequenter Anwendung könnte die gesamte Formatierung eines HTML-Dokumentes auf Stilvorlagen ausgelagert werden. Damit hätte man das Ideal "Trennung von Inhalt und Formatierung" erreicht. Der font-Tag und auch andere Tags sind dann überflüssig und sind deswegen vom W3C-Konsortium als "deprecated" eingestuft worden; sie werden in (ungewisser) Zukunft aus dem HTML-Standard entfernt, was nicht bedeutet, dass sie gleichzeitig auch aus den Browsern entfernt werden.
Die Realität sieht derzeit leider noch anders aus: Auch die jetzigen Browser (Stand 2002/03) sind nicht in der Lage, alle vom W3C-Konsortium festgelegten Stilvorlagen umzusetzen. Bei einem Browsertyp gibt es erhebliche Mängel. Um sicher zu gehen, muss man in der Praxis derzeit oft noch "deprecated" Tags einsetzen.
Die vom W3C-Konsortium definierte Stylesheet-Sprache "CSS" (cascading style sheets) ist die wichtigste Ergänzungssprache zu HTML. Allerdings werden in CCS andere Begriffe und eine andere Syntax benutzt. An Stelle des Begriffes "Attribut" tritt der Begriff "Eigenschaft" und somit statt Attributwert der Begriff Eigenschaftswert. Die Zuweisung erfolgt nicht über ein Gleichheitszeichen sondern über eine Doppelpunkt. Weitere Details zeigen die späteren Listings in diesem Dokument.
Zeichenweise Formatierung ist mit dem Tag-Paar <span>
und </span> möglich.
Für blockweise Formatierung ist dagegen das Tag-Paar <div>
und </div> zu verwenden.
Im Hinblick auf künftige Anwendungen sollte man im Header den Meta-Eintrag
<meta http-equiv="Content-Style-Type" content="text/css">
vorsehen, da die HTML-4.0-Definition verschiedene Sprachen zur Definition von Style Sheets zuläßt.
G = Größenangabe
T = Typ, a = absolut, r = relativ
| G | T | Erklärung | Beispiel |
|---|---|---|---|
| pt | a | Punkt. 1 pt = 1/72 inch = 25.4mm/72 = ca. 0,353 mm | font-size: 12pt; |
| pc | a | Pica. 1 pc = 12pt = ca. 4,233 mm | font-size: 0.6pc; |
| in | a | Inch. 1 inch = 25.4 mm | |
| mm | a | Millimeter | |
| cm | a | Zentimeter | |
| px | (a) | Pixel. Abhängig von Auflösung des Ausgabegerätes. | |
| em | r | Bezogen auf Schriftgröße. Wenn Schriftgröße selbst so formatiert wird, dann Bezug auf Elternelement. | line-height: 1.5em; font-size: 1.2em; |
| ex | r | Bezogen auf Höhe des Kleinbuchstaben "x". Wenn Schriftgröße selbst so formatiert wird, dann Bezug auf Elternelement. | |
| % | r | Prozent. Je nach CSS-Eigenschaft bezogen auf Elementgröße, Elternelement oder allgemeinen Kontext. | line-height: 120%; text-indent: 50%; |
Wie die Bezeichnung Cascading Style Sheets andeutet, kann ein HTML-Dokument Stile aus verschiedenen Stilvorlagen beziehen. Ist eine Stil-Definition in mehreren Quellen enthalten, wird die zuletzt aufgerufene Stil-Definition benutzt.
Es ist im Rahmen dieser Einführung nicht möglich, eine komplette Übersicht über alle Eigenschaften der Stilvorlagen zu geben. Die folgenden Demos sollen einige typische Anwendungen exemplarisch zeigen.
Bei diesem Dokument sieht der Header mit dem eingebetteten Style Sheet wie folgt aus. Ganz vorsichtigen Zeitgenossen sei empfohlen, die zwischen dem Tag-Paar <style> und </style> liegenden style-Anweisungen mit den HTML-Kommentarzeichen auszukommentieren, damit Browser, die keine Style Sheets kennen, nicht durcheinanderkommen.
Das folgende Listing zeigt die im Header dieses Dokumentes deklarierte Stilvorlage:
<head>
<title>080 Style Sheets</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
h1 { font-size: 24pt; /* So müssen in Style Sheets ... */
color: blue /* Kommentare geschrieben werden (C-like) */
/* Alle Eigenschaftsanweisungen mit Semikolon abschließen, */
/* bei der letzten Anweisung aber nicht nötig */
}
body { background: whitesmoke;
font-family: Arial, Helvetica, sans-serif; /* sans-serif = generische */
font-size: 10pt; /* Proportionalschrift ohne Serifen */
margin-left: 100;
margin-right: 300;
}
p { text-indent: 0 } /* Absatz ohne Einzug (Standard) */
p.ein { text-indent: 3em } /* Absatz mit 3 * Elementhöhe */
p.a1 { font-family: "Times New Roman", Times, serif; /* Eigene Klasse "a2" */
font-size: 14pt; /* serif = generische Proportional- */
margin-left: 50pt; /* schrift mit Serifen. */
margin-top: 55pt; /* Schriftbezeichner mit mehr als */
background: aqua /* einem Wort in Anführungszeichen */
}
p.a2 { font-family: "Courier New", Courier, monospace; /* Eigene Klasse "a2" */
font-size: 10pt; /* monospace = generische gleich- */
margin-left: 100pt; /* abständige Schrift. */
margin-top: -20pt; /* negativer Wert: nach oben !!!! */
background: fuchsia
}
/* Die folgenden Klassen beginnen mit einem Punkt und können in geeigneten */
/* Tags wie "div" (blockweise Gültigkeit der Formatierung), "span" (zeichenweise */
/* Formatierung), "p", "td", "pre" usw. verwendet werden. */
/* Vor dem Punkt dürfte auch ein Sternchen "*" als (verständlicheres) Symbol */
/* für einen beliebigen Tag stehen. */
.gross {text-transform: uppercase } /* Eigene Klasse "gross" */
.klein {text-transform: lowercase } /* Eigene Klasse "klein" */
.kap {text-transform: capitalize } /* Eigene Klasse "kap" */
.a12 { font-family: Arial, Helvetica, sans-serif; /* ... Klasse "a12" */
font-size: 12pt }
.a12Eng { font-family: Arial, Helvetica, sans-serif; /* ... Klasse "a12Eng" */
font-size: 12pt; /* Die Zeilenhöhe ist hier zur Demo sehr klein */
line-height: 100% } /* gewählt. Prozent bezogen auf Schriftgröße. */
.a12Weit { font-family: Arial, Helvetica, sans-serif; /* ... Klasse "a12Weit" */
font-size: 12pt; /* Die Zeilenhöhe ist hier zur Demo sehr groß */
line-height: 150% } /* gewählt. Prozent bezogen auf Schriftgröße. */
.t1214 { font-family: "Times New Roman", Times, serif; /* ... Klasse "t1214" */
font: 12pt/14pt; /* Diese praktische Eigenschaftskomination */
/* "Schriftgröße/Zeilenabstand" versteht der NS 4.x */
/* und 6.x nicht und somit den gesamten style */
/* nicht (4.x) bzw falsch (6.x). */
/* Besser: Getrennte Eigenschaften "font-size" und */
/* "line-height" benutzen. */
}
.cb9 { font-family: "Courier New", Courier, monospace; /* Eigene Klasse "cb9" */
font-size: 9pt;
color: blue;
background-color: mintcream
}
.cb10 { font-family: "Courier New", Courier, monospace; /* Eigene Klasse "cb10" */
font-size: 10pt;
color: blue;
background-color: mintcream
}
td { font-family: "Courier New", Courier, monospace;
font-size: 10pt;
color: blue;
}
td.e { font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: blue;
}
th { font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: blue;
}
-->
</style>
</head>
<h2 style="font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16pt;
color: dodgerblue;
text-align: left">Demo 1: Überschrift mit inline-style ...</h2>
Das ist ein Absatz, dessen relative Position in der Klasse "a1" mit den Eigenschaften "margin-left" und "margin-top" festgelegt wurde.
Das ist ein anderer Absatz, der mit der Klasse "a2" mit einem negativen Wert für die "margin-top" in den Vorgängerabsatz hineinplaziert wurde. Die Browser IE 5.x zeigt die Eigenschaft "background" über die gesamte Bildschirmbreite, der NS 4.x dagegen nur bis zum letzten Zeichen der Zeile, was den Autor stark stört.
Der HTML-Code:
<p class="a1"> Das ist ein Absatz, dessen relative Position in der Klasse "a1"
mit den Eigenschaften "margin-left" und "margin-top" festgelegt wurde.</p>
<p class="a2"> Das ist ein anderer Absatz, der mit der Klasse "a2" mit einem negativen Wert
für die "margin-top" in den Vorgängerabsatz hineinplaziert wurde.
Der Browser IE 5.x zeigt die Eigenschaft "background" über die gesamte
Bildschirmbreite, der NS 4.x dagegen nur bis zum letzten Zeichen der Zeile,
was den Autor stark stört. </p>
Das ist ein Absatz, der in der Klasse "ein" mit der Eigenschaft "text-indent: 3em" einen Einzug von "3em" (3 * Elementhöhe) zugewiesen bekommen hat. Dabei wird die aktuelle Schrift zum Maßstab genommen. Die Größenangabe des Einzugs kann auch in "..ex" (Höhe des kleinen "x") oder in px (Bildschirmpixel) oder in pt (1pt = 1/72inch) oder in Prozent der aktuellen Bildschirmbreite erfolgen.
Das ist ein Absatz ohne Einzug (Standard).
Der HTML-Code:
<div class="a12Eng"> Das ist die Arial 12pt. Aufruf über die Klasse "a12Eng".<br>
Mit "line-height: 100%"</div>
<br>
<div class="a12"> Das ist die Arial 12pt. Aufruf über die Klasse "a12".<br>
Ohne "line-height"</div>
<br>
<div class="a12Weit">Das ist die Arial 12pt. Aufruf über die Klasse "a12Weit".<br>
Mit "line-height: 150%"</div>
<br>
<div class="t1214">Das ist die Times 12pt/14pt. Aufruf über die Klasse "t1214".<br>
Die Eigenschaftskombination "font: 12pt/14pt" wird von NS 4.x und 6.x
nicht bzw. falsch unterstützt.</div>
<br>
<div class="gross"> Text in Grossbuchstaben mit "text-transform: uppercase" </div>
<div class="klein"> Text in Kleinbuchstaben mit "text-transform: lowercase" </div>
<div class="kap"> Text in Kapitälchen mit "text-transform: capitalize"
(Kapitälchen kann man im Internet vergessen)</div>
<br>
<p class="ein">Das ist ein Absatz, der in der Klasse "ein" mit der Eigenschaft
"text-indent: 3em" einen Einzug von "3em" (3 * Elementhöhe)
zugewiesen bekommen hat. Dabei wird die aktuelle Schrift zum Maßstab genommen.
Die Größenangabe des Einzugs kann auch in "..ex" (Höhe des kleinen "x")
oder in px (Bildschirmpixel) oder in pt (1pt = 1/72inch) oder in Prozent
der aktuellen Bildschirmbreite erfolgen.
</p>
<p>Das ist ein Absatz ohne Einzug (Standard).</p>
Hallo.
Hallo. Dieser rote Text wurde mit "margin-left" um 1px (Pixel) weiter nach rechts und mit "margin-top" um -37px nach oben versetzt (bei NS 4.5 fehlerhafte Anzeige).
<p style="margin-left: 0px">Hallo.</p>
<p style="margin-left: 1px; margin-top: -37px; color: red">
Hallo. Dieser rote Text wurde mit "margin-left" um 1px (Pixel) weiter nach rechts
und mit "margin-top" um -37px nach oben versetzt (bei NS 4.x fehlerhafte Anzeige).
</p>
<br>
<div style="font-weight: 100">font-weight: 100</div>
<div style="font-weight: 200">font-weight: 200</div>
<div style="font-weight: 300">font-weight: 300</div>
<div style="font-weight: 400">font-weight: 400, normal</div>
<div style="font-weight: 500">font-weight: 500</div>
<div style="font-weight: 600">font-weight: 600</div>
<div style="font-weight: 700">font-weight: 700</div>
<div style="font-weight: 800">font-weight: 800</div>
<div style="font-weight: 900">font-weight: 900</div>
<br>
<div style="text-decoration: overline">text-decoration: overline</div>
<div style="text-decoration: line-through">text-decoration: line through</div>
<div style="text-decoration: none">text-decoration: none</div>
<div style="text-decoration: blink">text-decoration: blink (nicht bei IE 5.0)</div>
<div style="text-decoration: underline">text-decoration: underline</div>
<br>
<div style="width: 600;
height: 30;
font-family: Times, 'Times New Roman', serif;
font-size: 22pt;
filter: dropShadow(color=Red, offX=1.5, offY=-1.0)">
Text mit Schatten, IE-Filter "dropShadow" (nicht mit NS 4.x)
</div>
<br>
<div style="width: 600;
height: 30;
font-family: Arial, Helvetica, sans-serif;
font-size: 22pt;
color: blue;
filter: glow(color=green, strength=3)">
Text mit Glimmer, IE-Filter "glaw" (nicht mit NS 4.x)
</div>
<br>