Multimediakurs Leinfelder, Anlage: CSS

Multimediakurs Leinfelder: Modul 11 - Anlagen: Cascading Style Sheets

(© copyright) Letzte Änderungen:18.04.2002

Modul 11: Anlage 5: weitere Hinweise zu Cascading Style Sheets

von Reinhold Leinfelder

Cascading? | Direkte CSS-Formatierung | CSS-Typen und Parameter | CSS1 oder CSS 2? | CSS-Steuerung mit JavaScript

Cascading Style Sheets wurden in Kursmodul 6.2 behandelt; dort wurde Einsatz, Erstellung mittels geeigneter Webeditoren und die Syntax von CSS an Hand von Beispielen behandelt. Arbeiten Sie bitte zuvor Kursmodul 6.2 durch, falls Sie bislang nicht mit CSS vertraut sind. Sie können bei Vorkenntnissen aber auch nur diese Anlage durchsehen und dann ggf. zu Kursmodul 6.2 wechseln.

Der Einsatz von StyleSheets ist nicht nur eine Vereinfachung des Arbeitens für Webseitenerstellung in html, sondern wird insbesondere auch für zukünftige Webseitenerstellung im xml-Format unverzichtbar werden (vgl. Anlage 4). Sie finden nachstehend deshalb einige Ergänzungen zum CSS-Kursmodul.

Was ist an den Stilvorlagen kaskadierend?

Mit Stilvorlagen (oft auch Stilformat- oder Formatvorlagen genannt) sind Sie sicherlich aus verschiedenen anderen Anwendungsprogrammen (z.B. Textverarbeitung, Layoutprogrammen) vertraut. Warum heißen die Web-Stilvorlagen aber cascading style sheets? Hier die Antwort:

Wie Sie wissen, können Sie in einem html-Dokument verschiedene Stylesheets kombinieren. Hierbei ist es egal, ob es sich um interne Stylesheets, einer Verknüpfung mit einem externen Stylesheet ergänzt durch interne Stylesheets oder auch eine Kombination mehrerer interner und externer Stylesheets handelt. Entscheidend ist die Reihenfolge der Definition im Header des html-Dokuments.

Wiederholung: Die Definition erfolgt ja für interne Stylesheets jeweils zwischen dem Tagpaar <style type="text/css"> und </style>. Externe Stylesheets werden ja folgendermaßen eingebunden: <link rel="stylesheet" href="pfad/stylesheetname.css">.

Das erste so definierte Stylesheet hat die wichtigste Funktion. Nachrangige, d.h. nachfolgend aufgeführte Stylesheets werden nur für die Formatierung derjenigen Elemente verwendet, die im erstrangigen nicht definiert waren. Die Nachrangigen erben also diese Stile vom Erstrangingen. Häufig kommt vor, dass Sie in einem externen Stylesheet nur wesentliche Elemente definieren und dann in einem internen Stylesheet oder durch Verlinken auf ein spezielleres zusätzliches externes Stylesheet weitere CSS-Formatierungen anweisen. Wenn aber Elementeigenschaften, die im erstrangigen Stylesheet definiert wurden (z.B. Textfarbe rot), in einem Nachrangigen geändert werden (z.T. Textfarbe grün), wird das letztdefinierte Element umgesetzt (also hier Textfarbe grün). Die Abarbeitung erfolgt also kaskadierend, d.h. wie in einem Wasserfall (Kaskaden). Was von oben kommt, wird durchgelassen, es sei denn eine neue Klippe (ein neues Stylesheet) wird weiter unterhalb eingeführt, was dann den Verlauf des gesamten Wasserfalls (des Stils des html-Dokuments) entsprechend beeinflusst.

Direkte Stylesheet-Formatierung im Body

Grundsätzlich sollen Stylesheets im Header angelegt werden bzw. über Link in den Header importiert werden (bei externen Stylesheets), damit sie für das komplette Dokument verfügbar sind. Ich empfehle dieses Vorgehen dringend (nicht nur, weil es den Empfehlungen des W3C entspricht).

Prinzipiell können Sie aber auch mal zwischendurch nur eine Textstelle auf die Schnelle via lokalem Style-Sheet definieren.

Hier ein Beispiel:

<p>Dies ist ein echter <b style="color: maroon; font-style:verdana; font-weight: 500; font-size: 16px; letter-spacing: 3px">Leckerbissen</b>, nicht wahr?</p>

Hier in der Umsetzung:

Dies ist ein echter Leckerbissen, nicht wahr?

Auch direkte Formatierungen im Body brechen Stylesheet-Definitionen, die in höheren Kategorien angelegt wurden. So verwendet diese Seite ein Style-Sheet, welches u.a. Text innerhalb von <p> und </p>-Tags in der Schrift Arial formatiert. Wie Sie sehen, hat obiges Beispiel diese Formatierung durch Verwendung der Schrift Verdana durchbrochen.

Wollen Sie mehrere Teile des Textes in gleicher Weise formatieren, ist die Verwendung eines "echten" Stylesheets im Header ungleich vorteilhafter und schneller. Außerdem belasten Sie durch umfassende direkte Formatierungen die Dateigröße der html-Datei unnötig.

Stylesheet-Typen und Style-Sheet-Formatierparameter

Kleine Wiederholung:

Stylesheets, welche im Header oder als externes Stylesheet angelegt werden, können drei Grundtypen entsprechen:

1. Element-Vorlagen: hier wird den einzelnen, entsprechend definierten html-Tags dateiweit ein bestimmtes Format zugewiesen.

z.B. nachfolgend für die <p>, <a> und <b> -Tags

<style type="text/css"></style>

2. Klassen-Vorlagen: diese werden mit einleitendem Punkt und beliebigem Namen definiert.

<style type="text/css"></style>

Die Zuweisung erfolgt im Body, z.B. via <p class="spacing">text</p>. Zuweisungen von Klassen werden häufig auch über die div oder span-Tags vorgenommen.

3. ID-Formatcontainer: Etwas ähnlich zu oben, aber alle zu formatierenden Body-Teile liegen jeweils in einem Formatcontainer, dieser wird über die div oder span-Tags definiert. Formatcontainer haben zusätzliche Formatiermöglichkeiten, sie können z.B. absolut positioniert werden und sich gegenseitig überlappen. Außerdem können sie via JavaScript auf sichtbar bzw. unsichtbar gesetzt sowie animiert werden (vgl. auch Anlage zu dhtml).

<style type="text/css"> </style>

Formatierparameter mit Hilfe von Attributen

Welche Formatiermöglichkeiten gegeben sind, unterscheidet sich je nach CSS-Typ etwas (sie können z.B. das Visible-Attribut nicht für Element-Vorlagen verwenden). Grundsätzlich sind sie jedoch bei jedem Typ gleich aufgebaut.

In der CSS-Referenz können Sie die Möglichkeiten nachschlagen (offizielle Referenzen zu CSS 1 und CSS 2 via: http://www.w3org/Style/CSS/ Die proposed recommendation zu CSS2 können Sie auch direkt aufrufen unter: http://www.w3.org/TR/PR-CSS2/

Ein paar Beispiele für mögliche Attribute finden Sie nachstehend (längst nicht komplett, für weitere Möglichkeiten siehe Referenz).

Schriftformate:

Schrifttyp: font:"...";
Schriftfamilie: font-family:"..., ..., ...., ...";
Schriftgröße: font-size:"......" am besten in pixel angeben, z.B. "18px"
Schriftstärke: font-weight:"..."; (z.B. normal)
Schriftstile: font-style:"...."; (z.B. italic)
Schriftfarbe color:"...";

Textlauf und Ausrichtung:

Abstand zwischen Buchstaben: letter-spacing:"..."; z.B. 3px, auch negative Werte möglich
Abstand zwischen Wörtern: word-spacing:"..."; wie oben
Zeilenhöhe: line-height:"..."
Unterstreichungen: text-decoration:(...); z.B. underline, overline, line-through

Rahmen und Positionierung

Rahmenfarbe: border-color:"...";
Rahmenstil: border-style:(...); z.B. dotted, dashed, solid, double, groove, ridge
Rahmenbreite: border-width:"...";
Innenabstand: padding:"...";
Position eines Bereichs/einer Box: top:"..."; (z.B. 100px); alanlog für left, bottom, right, height, width (nicht alle Attribute notwendig)
absolute / relative Positionierung: position="...."; z.B. absolute, relative (letztes in Beziehung zum vorhergehenden Element)
Stapelung: z-index:".."; z.B. 0, 1, 2: 2 liegt höher als 1, 1 höher als 0
Sichtbarkeit: visibility:"visible"; (oder "hidden")

Hintergründe und Farben:

Hintergrundfarbe des Elements: background-color:"...";
HIntergrundbild für das Element: background-image:"....";

CSS 1 oder CSS 2?

Derzeit liegen zwei Spezifikationen (bzw. Recommendations) für Stylesheets vor: CSS und CSS 2. Die CSS-2-Recommendation existiert zwar bereits seit 1998, dennoch ist CSS 2 noch nicht im vollen Umfang in alle wichtigen Browser eingebaut, obwohl offiziell diese Spezifikation z.B. ab NC 4 und IE 4 unterstützt wird.

Was erfreulicherweise in allen Browsern funktioniert, ist die Positionierfähigkeit und Stapelfähigkeit (sowie Visibilitätskontrolle) von Floating Boxen sowie deren Animierungsmöglichkeit via dhtml/JavaScript. Dies sind CSS 2-Elemente. Vergleichen Sie hierzu Kursmodul 6.2.

Sehr nette Möglichkeiten gibt es mit dem Attribut position in CSS2: wenn Sie position="fixed" verwenden, bleibt eine Floating-Box im Browserfenster an einer bestimmten Position stehen und der Rest der Seite kann darunter hindurch scrollen. Funktioniert derzeit jedoch nur im IE ab 5, nicht in NC4 bzw. NN6. Ein entsprechendes Beispiel finden Sie in Kursmodul 6.2 (auch direkt hier aufrufbar)

Erweiterte CSS-2 Klassendefinition für Tags: dies wäre eine tolle Sache, ich habe jedoch bislang noch keinen Browser gefunden, bei dem dies komplett funktionieren würde. Im Prinzip läuft es aber folgendermaßen:

Tags können ja via Element-CSS formatiert werden. Damit hat aber jedes Tag dann nur eine bestimmte Formatierung. Wenn Sie dies nicht wollen, gibt es zwei Workarounds:

Sie ändern die dokumentweite Element-Tag-Formatierung via lokalem Stylesheet an der gewünschten Stelle.

Sie verwenden beliebige Platzhalter-Tags wie z.B. <blau> </blau>, die sie via Element-Tag-Formatierung definieren und im Text dann beliebig verwenden können.

Sehr viel einfacher wäre es jedoch, wenn Element-CSS und Klassenformatierung verknüpft werden könnten. Mit CSS 2 ist dies (theoretisch, s.o.) möglich:

In einem Klassenstylesheet können Sie z.B. folgende Formatierungen für das i-Tag vorgeben.

i.klein {font-size:"10px"; color:"black"} i.gross {font-size:"14px"; color:"red"}

Weiterhin definieren Sie noch eine frei einsetzbare Klasse für beliebige Tags.

all.gruen {font-size:"12px"; color:"green"}

Im Bodytext könnten Sie dies dann folgendermaßen verwenden:

<body> <p><i class="klein">dies wird klein und schwarz geschrieben. </i> <i class="gross"> dies wird groß und rot geschrieben. </i> </p> <p class="gruen">Dieser Text wird mittelgroß und grün dargestellt. </p> </body>

Steuerung von CSS-Eigenschaften via JavaScript:

Hierzu haben Sie in Kursmodul 6.2 schon vieles gehört. Dhtml ist z.B. nichts anderes als die Veränderung von CSS-Attributwerten durch JavaScript via Benutzereingaben bzw. Zeitablauf. Häufig verwendete Beispiele hierzu sind das Ein- und Ausschalten der Sichtbarkeit, sowie die Veränderung der Positon von Containerboxen (sehen Sie hierzu Modul 6.2.2 und Anlage dhtml). Aber auch alle anderen durch Attribute definierten CSS-Eigenschaften lassen sich entsprechend steuern, sofern moderne Browser eingesetzt werden (NN ab Vers. 6,, IE ab Version 5, mit Einschränkungen ab Version 4). Da dies jedoch wiederum ein Feld mit vielen Browserspezialitäten und Inkompatibilitäten darstellt, beschränke ich mich auf ein Beispiel (entnommen aus dem u.a. Buch von M. Seeboerger-Weichselbaum):

Rollovereffekt für Text:

Hier zuerst das Beispiel.

Einige Code-Erläuterungen:

Zuerst das vereinfachte JavaScript im Header:

<script language="JavaScript"> function css_change(farbe,id,groesse) { document.getElementById(id).style.color=farbe; document.getElementById(id).style.fontSize=groesse; } </script>

Es wird also das Stylesheet via JavaScript definiert. Für ein beliebiges id-Element (die Namenszuweisung erfolgt dann lokal im Body, siehe unten) wird das Dokument-Unterobjekt style angelegt, sowie die Eigenschaften color und fontsize mit variablen belegt.

Im Body wird dann dem a-Tag jeweils ein id-Elementname zugewiesen. Die JavaScript-Eventhandler rufen die function css_change () mit den gewünschten Attributwerten für die Stylesheet-Formatierung auf. Diese Attributwerte sind gleichzeitig die Werte der im JavaScript definierten Eigenschaften des Style-Objektes (wenn Ihnen diese Erklärung nach Böhmischen Dörfern vorkommt, müssen Sie das Kursmodul 7 (JavaScript) durcharbeiten).

Nachfolgend der entsprechende Code im Body:

<p><a id="textlink1" href="seite1.html" onmouseover="css_change('red','textlink1','20pt')" onmouseout="css_change('blue','textlink1','15pt')">weiter zu Seite 1</a><br> <a id="textlink2" href="seite2.html" onmouseover="css_change('red','textlink2','20pt')" onmouseout="css_change('blue','textlink2','15pt')">weiter zu Seite 2</a><br> <a id="textlink3" href="seite3.html" onmouseover="css_change('red','textlink3','20pt')" onmouseout="css_change('blue','textlink3','15pt')">weiter zu Seite 3</a></p>

Freuen Sie sich aber nicht zu früh. Obiges Skript funktioniert für NN6 und IE 5, aber in anderen Browsern gäbe es eine Fehlermeldung, da sie mit dieser JavaScript-Version nichts anfangen können (vers. 1.5). Man muss deshalb zusätzlichen Skriptcode einfügen, der verhindert, dass frühere Browserversionen dieses Skript überhaupt laden. Dann gibt es für die anderen Browser zwar keine Fehlermeldung, aber natürlich auch keinen Rollover-Effekt. Das angepasste Skript können Sie sich im Quellcode-Modus des obigen Beispiels ansehen.

Bezüglich der Steuerung von CSS via JavaScript ist noch sehr viel mehr möglich. Browserunterschiede machen einem hier jedoch das Leben sehr schwer. Lesen Sie insbesondere in Anlage 5b über völlig unerwartete Effekte bei der Verwendung von Klassen mit Netscape 4.x. Außerdem finden Sie dort einen Test samt Templaten für N 4x-Benutzer zur Überprüfung ihrer Konfiguration. Über die weiteren Möglichkeiten (incl. vieler Beispiele) informiert Sie z.B. in hervorragender Weise M.Seeboergers JavaScript-Buch, welches ich sehr empfehlen kann und aus welchem auch obiges Beispiel stammt.

Fazit: CSS sind eine tolle Sache, CSS-Steuerung via JavaScript ist absolut "cool". Allerdings: Für die Verwendung komplexerer Stylesheets gilt genauso wie bei der Verwendung von JavaScript und dhtml: mit möglichst vielen Browsern testen, testen, testen, bevor Sie Ihr Produkt online bringen.

Inhaltsseite

Anlagenverzeichnis