HTML-Dateien selbst erstellen
Dokumentation: HTML
Style-Sheets - Formatvorlagen

Style-Sheet-Angaben definieren

 Formate für HTML-Tags definieren
 Unterklassen von HTML-Tags mit Formaten definieren
 Formate für verschachtelte HTML-Tags definieren
 Pseudo-Elemente definieren
 Tag-unabhängige Formate mit Bezeichnernamen definieren
 Freie Formate mit <span>-Tag definieren
 Kommentare in Style-Sheet-Definitionen

MSIE3.0 Formate für HTML-Tags definieren

Beispiel
Anzeigebeispiel: So sieht's aus

Sie können gewöhnliche HTML-Tags für  Absatztypen und Textgestaltung mit Hilfe von Style-Sheet-Angaben "umdefinieren". Wenn Sie das entsprechende HTML-Tag dann in der HTML-Datei verwenden, werden alle Formate angewendet, die Sie für das betreffende HTML-Tag definiert haben. So können Sie beispielsweise für Überschriften 1. Ordnung, definieren, daß diese in Helvetica, 20 Punkt, rot, fett und kursiv mit einem Absatznachabstand von 16 Punkt angezeigt werden. Wenn Sie dann im Text der HTML-Datei eine Überschrift 1. Ordnung wie gewohnt definieren, werden die definierten Formateigenschaften bei der Anzeige im WWW-Browser berücksichtigt.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
h1 { font-size: 48 pt; color: blue; font-style: italic }
p,li  { font-size: 12 pt;
     line-height: 14 pt; 
     font-family: helvetica; 
     font-variant: normal;
     font-style: normal; }
</style>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung mit Formaten</h1>
<p>Normaler Textabsatz, ebenfalls mit Formaten</p>
</body>
</html>

Erläuterung:

An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe  Arten, Style-Sheets zu definieren).

Dazu notieren Sie zuerst das gewünschte HTML-Tag, und zwar ohne spitze Klammern. Im obigen Beispiel werden die HTML-Tags h1 (Überschrift 1. Ordnung), p (Textabsatz) und li (Listeneintrag) auf diese Weise notiert. Wenn Sie gleichartige Formate für mehrere HTML-Tags definieren wollen, geben Sie alle gewünschten Tags an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p, li.

Dahinter folgen die dazugehörigen, gewünschten Formatdefinitionen, und zwar in geschweiften Klammern { und }. Innerhalb solcher geschweifter Klammern können Sie eine oder mehrere Formateigenschaften definieren. 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 mehrere Eigenschaften zuweisen wollen, wie im obigen Beispiel, trennen Sie die Eigenschaften jeweils durch einen Strichpunkt.

Im obigen Beispiel wird dem HTML-Tag für Überschriften 1. Ordnung auf diese Weise eine Schriftgröße von 48 Punkt (font-size: 48 pt;), die Schriftfarbe blau (color: blue;) und der Schriftstil kursiv (font-style: italic) zugewiesen. Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe  Kurzreferenz: Style-Sheet-Angaben.

MS IE3.0 Unterklassen von HTML-Tags mit Formaten definieren

Beispiel
Anzeigebeispiel: So sieht's aus

Sie können mit Hilfe von Style-Sheetes Unterklassen von gewöhnlichen HTML-Tags für  Absatztypen und Textgestaltung erzeugen. So können Sie beispielsweise vom HTML-Tag für Überschriften 1. Ordnung zwei Varianten erzeugen, etwa eine mit schwarzer und eine mit roter Schrift. Dazu vergeben Sie Namen für die entsprechenden Unterklassen.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
p.normal { font-size: 10 pt; color: black }
p.gross { font-size: 12 pt; color: black }
p.klein { font-size: 8 pt; color: black }
p.rot { font-size: 10 pt; color: red }
p.blau { font-size: 10 pt; color: blue }
</style>
</head>
<body>
<h1>Beispiele</h1>
<p class=normal>Normaler Textabsatz mit Schrift 10 Punkt schwarz</p>
<p class=gross>Textabsatz mit Schrift 12 Punkt schwarz</p>
<p class=klein>Textabsatz mit Schrift 8 Punkt schwarz</p>
<p class=rot>Textabsatz mit Schrift 10 Punkt rot</p>
<p class=blue>Textabsatz mit Schrift 10 Punkt blau</p>
</body>
</html>

Erläuterung:

An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe  Arten, Style-Sheets zu definieren).

Unterklassen von HTML-Tags bilden Sie dort, indem Sie zuerst das Tag notieren, im obigen 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. Dazu notieren Sie im einleitenden HTML-Tag die Angabe class= und dahinter den Namen, der Unterklasse, den Sie zuvor vergeben haben.

Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe  Kurzreferenz: Style-Sheet-Angaben.

MS IE3.0 Formate für verschachtelte HTML-Tags definieren

Beispiel
Anzeigebeispiel: So sieht's aus

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:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
    h1 { color: red }
    h1 i { color: red }
</style>
</head>
<body>
<h1>Wir lernen <i>Style-Sheets</i></h1>
<h1>Wir lernen <em>Style-Sheets</em></h1>
<p>Wir lernen <i>Style-Sheets</i></p>
</body>
</html>

Erläuterung:

An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe  Arten, Style-Sheets zu definieren).

Im obigen Beispiel wird dort 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.

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 Befehl 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.

Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe  Kurzreferenz: Style-Sheet-Angaben.

Pseudo-Elemente definieren

Beispiel
Anzeigebeispiel: So sieht's aus

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:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
    a:link { color: red; font-weight: bold }
    a:visited { color: green; font-weight: bold }
    a:active { color: blue; font-weight: bold }
    p:firstline { text-transform: uppercase; color: blue }
    p:firstletter { font-size: 300%; float: left }
</style>
</head>
<body>
<p>Erste Zeile<br>
<a href="selfhtml.htm">Verweis</a></p>
</body>
</html>

Erläuterung:

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ätzen, beginnend mit p:.

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

Bei Verweisen haben Sie dadurch erweiterte Möglichkeiten als bei den Angaben im einleitenden <body>-Tag. So können Sie nicht nur Verweisfarben festlegen, sondern auch Schriftgrößen, Schriftarten, Schriftstile usw.

Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe  Kurzreferenz: Style-Sheet-Angaben.

MS IE3.0 Tag-unabhängige Formate mit Bezeichnernamen definieren

Beispiel
Anzeigebeispiel: So sieht's aus

Sie können Formate definieren, die keinem HTML-Tag oder einer Unterklasse davon zugeordnet sind. Die freien Formate erhalten einen eindeutigen Bezeichnernamen. Mit dem Bezeichnernamen können Sie ein solches Format dann jederzeit im Text einer HTML-Datei anwenden.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
  #a001 { color: blue }
</style>
</head>
<body>
<h1 id=a001>&Uuml;berschrift 1. Ordnung blau</h1>
<p id=a001>Normaler Textabsatz, ebenfalls blau</p>
</body>
</html>

Erläuterung:

An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe  Arten, Style-Sheets zu definieren).

Tag-unabhängige Formate mit Bezeichnernamen werden innerhalb erlaubter Definitionsbereiche mit dem Gatter # eingeleitet. Dahinter folgt der Bezeichnernamen. Im Anschluß daran notieren Sie wie gewohnt die gewünschten Formateigenschaften. Im obigen Beispiel wird mit dem Bezeichnernamen a001 ein tag-unabhängiges Format mit der Formateigenschaft "blauer Text" definiert.

Im Text der HTML-Datei kann so ein Format in den einleitenden Tags verschiedener Elemente vorkommen. Im obigen Beispiel wird das Format zum Beispiel im Einleitungs-Tag einer Überschrift 1. Ordnung und im Einleitungs-Tag eines Textabsatzes verwendet. Die entsprechenden Absätze erhalten dadurch eine blaue Textfarbe, behalten aber sonst ihre typischen Eigenschaften (Schriftgröße usw.) bei. Um ein solches Format einzubinden, müssen Sie im einleitenden HTML-Tag die Angabe id= notieren. Dahinter folgt der Bezeichnername. Unter diesem Bezeichnernamen muß das Format zuvor definiert worden sein.

Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe  Kurzreferenz: Style-Sheet-Angaben.

Beachten Sie:

Die Bezeichnernamen können Sie frei vergeben. Das erste Zeichen muß jedoch ein Buchstabe sein. Ferner sind Ziffern, Bindestriche und Punkte darin erlaubt. Als Buchstaben dürfen nur A-Z und a-z verwendet werden, also keine deutschen Umlaute.

MS IE3.0 Freie Formate mit <span>-Tag definieren

Beispiel
Anzeigebeispiel: So sieht's aus

Sie können freie Formate definieren, die keinem herkömmlichen HTML-Tag oder einer Unterklasse davon zugeordnet sind. Dafür steht ein neues HTML-Tag zur Verfügung, daß sonst keine eigene Bedeutung hat und nur zum Definieren von Style-Sheet-Angaben dient.

Beispiel:

<h1>&Uuml;berschrift 1. Ordnung mit <span style="color: blue">blauem Text</span></h1>
<p>Normaler Textabsatz mit 
<span style="font-style: small-caps" color: red>kleinen roten Grossbuchstaben</span></p>

Erläuterung:

An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe  Arten, Style-Sheets zu definieren). Sinnvoll ist dabei vor allem die Verwendung direkt im Textkörper der HTML-Datei.

Im obigen Beispiel werden mit <span style=...> ... </span> Textabschnitte auf die gewünschte Art formatiert. Hinter der Angabe style= notieren Sie das oder die gewüpnschten Formateigenschaften wie gewohnt. Die Angabe muß in Anführungszeichen stehen.

Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe  Kurzreferenz: Style-Sheet-Angaben.

MS IE3.0 Kommentare in Style-Sheet-Definitionen

Um Ihre Formatdefinitionen intern auszukommentieren, steht eine spezielle, an die Programmiersprache C angelehnte Syntax zur Verfügung.

Beispiel:

 
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
  #a001 { color: blue } /* freies Format für blauen Text, kreiert am 4.1.1997 */
</style>
</head>
<body>
<h1 id=a001>&Uuml;berschrift 1. Ordnung blau</h1>
<p id=a001>Normaler Textabsatz, ebenfalls blau</p>
</body>
</html>

Erläuterung:

An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe  Arten, Style-Sheets zu definieren). An solchen Stellen sind auch die hier beschriebenen Kommentare erlaubt.

Mit /* - also einem Schrägstrich und einem Sternzeichen in Folge - leiten Sie einen Kommentar ein. Mit der umgekehrten Zeichenfolge - also mit */ - beenden Sie den Kommentar.

Blättern:
Style-Sheets in HTML einbinden     Kurzreferenz: Style-Sheet-Angaben

HTML-Dateien selbst erstellen
Dokumentation: HTML
Style-Sheets - Formatvorlagen

© 1997  Stefan Münz, s.muenz@euromail.com