Arbeiten mit dem Style Sheet

Sehen Sie sich zuerst an, wie die Styles aussehen, indem Sie die Datei css_test.html in einem Webbrowser öffnen (beachten Sie, daß Sie IE 3 oder 4 bzw. Netscape 4 benutzen müssen und daß das Ergebnis davon abhängt, welchen Browser Sie benutzen. IE 3.0x stellt z.B. die Ränder nicht dar).

Nun da Sie die ursprünglichen Styles gesehen haben, werden wir mit dem Experimentieren beginnen, indem wir die Datei sample1.css editieren (beachten Sie, daß Sie die Änderungen natürlich in separaten Dateien speichern können -- z.B. sample2.css usw. -- wenn Sie das machen, müssen Sie das den Wert des Attributs href im Tag link in der Datei css_test.html für jedes neue Style Sheet anpassen, um die Ergebnisse zu sehen).

Bemerkung: blättern Sie ruhig zurück zu den Tabellen mit Style-Eigenschaften, um Ihr Gedächtnis aufzufrischen und die Syntax zu überprüfen.

Beginnen Sie mit einigen einfachen Änderungen:

1. ändern Sie die Schriftgröße und die Hintergrundfarbe für die Tags H1, H2 und H3
2. ändern Sie die Schriftgröße für Absätze auf 12pt

Sehen Sie sich nun die Resultate in der Datei css_test.html an; benutzen Sie Ihren Webbrowser.

(Die nächsten beiden Änderungen wirken sich nur auf die Anzeige in IE 4.0 oder Netscape 4.0 aus)

1. ändern Sie die Breite der Border-Elemente in den Klassen .first und .last classes zu 'thin'
2. ändern Sie den Border-style für das Element H1 zu 'solid'

Sehen Sie sich die Ergebnisse an.

Versuchen Sie nun, selbst neue Klassen hinzuzufügen:

1. erstellen Sie eine Klasse .highlight -- setzen Sie die Hintergrundfarbe auf gelb (#FFFF00)
2. erstellen Sie die Klasse .ufo -- setzen Sie die Schriftfamilie auf monospace, die Größe auf large, die Farbe auf grün (#00FF00) und den Hintergrund auf Schwarz (#000000)
3. modifizieren Sie die Datei css_test.html, um diese neuen Klassen zu beherbergen. Sie können sie anzeigen, indem Sie ein beliebiges Tag mit einem 'class'-Attribut versehen, das auf den Namen der Klasse gesetzt wurde (ohne den Punkt) -- Beispiel: <div class="ufo">Das ist die Klasse ufo</div>

Sehen Sie sich die Resultate an.

Jetzt sollten Sie den Dreh in etwa 'raus haben. Ausgehend vom Beispiel oder von einer neuen CSS-Datei können Sie jetzt Ihre eigenen Styles erstellen. Sie können die Tabellen der Eigenschaften und Werte als Referenz verwenden und sollten daran denken, daß in den HTML-Dateien, mit denen Sie das Style Sheet verwenden, eventuell class-Attribute zu den Tags geschrieben werden müssen.

Bernhard Friedrich

doozer@hsguide.com