Tripod-HTML-Kurs (1)
Tripod-HTML-Kurs (2): Einführung
- <BODY>-Tag
- <IMG>-Tag
- Imagemaps
- Farbmodelle
- Bildformate
- <META>-Tag
- farbige Tabellen
- Style Sheets
- Formulare
- Test
Tripod-HTML-Kurs (2): Style Sheets
HTML ist im eigentlichen Sinne keine Formatierungssprache.
HTML wurde definiert, um Inhalt darzustellen, um die einzelnen
Elemente eines Dokumentes wie Überschriften, Abschnitte und
Listen darzustellen, d.h. HTML ist eine Dokumentenbeschreibungssprache.
Die Präsentation des Inhaltes wurde innerhalb von
HTML mit Tags implementiert, die Schrift fett oder kursiv oder in einer anderen
Schriftgröße setzen.
Mit diesen Tags ist es allerdings nicht oder nur mit einiger Mühe möglich
eine exakte Ausrichtung von Text und Überschriften zu erreichen: der Text soll
in der Schriftart Helvetica, Schriftgröße 14 mm, 5.25 cm unterhalb der
Überschrift gesetzt werden. Solche Aufgabenstellungen sind viel einfacher mit
den Style Sheets zu erledigen. Style Sheets sind Dokumentenvorlagen, z.B. um
ein Seitenlayout für eine Webpage zu erstellen.
Die CSS sind eine Reaktion des W3C auf die Bedürfnisse der Designer von Webseiten.
Die bekanntesten und vom W3C empfohlenen sind die CSS, die Cascading Style Sheets.
Mittlerweile gibt es bereits zwei Generationen der CSS:
die Cascading Style Sheets, Level 1 (Dezember 1996) und die
Cascading Style Sheets, Level 2 (Mai 1998).
Die Links führen Sie zu den W3C-Dokumentationen (in englisch).
In der HTML 4.0-Dokumentation heißt es zur Trennung von Struktur und
Präsentation eines Dokuments:
"(.....) separating a documents structure from its presentation
produces more effective and maintainable documents (...)", d.h. werden die
Struktur und die Präsentation eines Dokumentes getrennt, können so
Dokumente erzeugt werden, die effektvoller sind (Präsentation!) und leichter
instand zu halten, d.h. inhaltliche Änderungen können einfacher vollzogen
werden. CSS2 sind die vorgegebenen Style Sheets in HTML 4.0.
Im HEAD wird mit Hilfe des META-Tags die Style Sheet Language festgesetzt, hier
die CSS:
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>
Haben Sie sich nun voller Mut in die Dokumenation von CSS gestürzt,
sie haben keinen alten Browser und probieren die in der CSS-Dokumentation
angegebenen Tags und deren Attribute aus und es funktioniert .... nichts! Wieso das?!
Es kann natürlich sein, daß Sie sich vertippt haben .... aber bitte
bedenken Sie: die Dokumenationen stellen lediglich eine Empfehlung an die
Hersteller dar, ein Browser-Hersteller ist natürlich nicht verpflichtet
diese Empfehlungen einzuhalten. Und an diesem Punkt beginnt die Verwirrung.
Manche Tags werden von einem Browser dargestellt, von einem anderen nicht. Und
die Darstellung in den verschiedenen Browser ist unterschiedlich.
Die CSS1 werden von Microsofts' Internet Explorer 3.x und Netscapes' Navigator
4.x nahezu vollständig interpretiert,
CSS2 wird von Microsofts' Internet Explorer 4.x in großen Teilen
interpretiert.
Haben Sie einen Browser, der Style Sheets interpretiert, muß außerdem
die Darstellung von Style Sheets im Browser aktiviert sein.
Sie können das bei Netscapes Navigator so überprüfen:
Wählen Sie unter "Bearbeiten" den Menüpunkt "Einstellungen" aus.
Gehen Sie auf "Erweitert", gibt es dort ein Häckchen im Kasten "Formatvorlagen
aktivieren", dann akzeptiert Ihr Browser die Style Sheets (d.h. nicht, daß er
alle Vorschläge, die das W3C zu CSS macht, auch interpretiert, s.o.).
Wenn Sie das überprüft haben, kommt nun der
Sehen Sie hier farbigen, gelblichen Text? Wenn ja:
Ihr Browser kann Style Sheets interpretieren - mit derselben Einschränkung wie
oben: nicht alle Tags ......
Style Sheet-Information kann entweder flexibel nur für einzelne Elemente
("inline styles") oder auch für mehrere Elemente
im gesamten Dokument verwendet werden
("embedded styles").
Die Style Sheet-Information kann auch in einer externen Datei beschrieben werden und
kann dann mit dem LINK-Tag mit dem betreffenden HTML-Dokument verknüpft werden
("linked styles").
Inline styles können sehr flexibel eingesetzt werden, da sie nur für
einzelne Elemente eingesetzt werden. Mit embedded styles können HTML-Dateien
übersichtlich gestaltet werden, da die Style-Information an zentraler Stelle
definiert wird und für das ganze Dokument verwendet wird. Mit linked styles
können Sie eine ganze Website (einen gesamten Internetauftritt) mit einem
einheitlichen Aussehen versehen.
Variationen, Klassen von Styles
unterschiedliche Ausgabemedien
Hierarchie, in welcher Reihenfolge werden Style Sheet-Angaben beachtet........
Zunächst wird gezeigt, wie diese verschiedenen Styles (inline, embedded, linked) eingebunden werden,
die Syntax der eigentlichen Formatierbefehle (name: value) folgt weiter
unten.
"inline styles" werden im Tag direkt definiert:
<BODY>
<b style="name:value; name:value; name:value">Beispieltext</b>
</BODY>
Direkt im Tag werden mit Hilfe der STYLE-Angabe die gewünschten Formatierungen gesetzt.
In diesem Beispiel werden Style-Informationen für das <B>-</B>-Tag definiert, das den Text
"Beispieltext" umschließt.
"embedded styles" werden im HEAD definiert und wirken dann auf das gesamte
Dokument:
<HEAD>
<STYLE type="text/css">
< ! --
H1 {name:value; name:value}
H2 {name:value; name:value}
P, H3, H4 {name:value; name:value}
// -- >
</STYLE>
</HEAD>
Auc hier kommt das STYLE-Tag zum Einsatz, um die Formatierungen zu setzen.
Hier werden Style-Informationen für die Überschriften-Tags <H1></H1>, <H2></H2>,
<H3></H3>, <H4></H4> und das Abschnitts-Tag <P> definiert.
Diese Definitionen greifen jedesmal wenn diese Tags benutzt werden.
Die Style Sheet-Angaben werden in HTML-Kommentare gestellt, damit nicht Style
Sheet-fähige Browser keine unverständlichen Angaben produzieren.
"linked styles" werden in einer getrennten Datei definiert und werden
im HEAD mit dem link-Tag eingebunden.
<HEAD>
<link rel=stylesheet type="text/css" href="extern.css">
style-tags nicht nötig, aber möglich!
</HEAD>
In der externen Datei *.css, im Beispiel oben haben wir den Namen
extern.css gewählt, werden die Formatierbefehle aufgezählt, ohne irgendwelche
HTML-Tags:
body {name:value;}
H1 {name:value; name:value}
H2 {name:value; name:value}
P, H3, H4 {name:value; name:value}
Wie sieht ein Formatierbefehl in CSS aus?
Ein Formatierbefehl hat die Form
