JavaScript – M+T Pocket . Das Programmier-Handbuch (Office Einzeltitel) [Taschenbuch]

3.3
Style-Sheets

In das Umfeld von HTML, aber auch JavaScript, fallen
Style-Sheets. Wie JavaScript sind sie eine der primären Erweiterungen von HTML.
Während JavaScript die Abtrennung oder sogar erst Hinzufügung von
Logikprozessen zu einer Webseite bedeutet, sind Style-Sheets die Umsetzung von
Layoutfunktionalität jenseits von HTML.

Style-Sheets sind einmal der (durch mangelhafte Umsetzung
der Browserhersteller leider oft untaugliche) Versuch, den unterschiedlichen
Interpretationen von Webseiten auf verschiedenen Plattformen und unter
abweichenden Bedingungen beim Anwender einen Riegel vorzuschieben. Gegenüber
HTML bieten Style-Sheets einmal bedeutend mehr Gestaltungsanweisungen, so dass
das Layout von Webseiten (zumindest theoretisch) recht genau festgelegt werden
kann. Allerdings bewegen sich Style-Sheets auf sehr dünnem Eis, denn sie setzen
bei der Zielplattform relativ neue Software (Betriebsystem und Browser) und
eine erhebliche Kompatibilität zu einem vorgegebenen Standard voraus.
Insbesondere setzen die Browser-Hersteller bei Ihren Surfbrettern offizielle
Standards meist nur so unvollständig um, wie sie es auch mit HTML tun. Die
erweiterten Grafikmöglichkeiten von Style-Sheets sind also nur ein Aspekt, der
in einer Webseite unter »nice-to-have« laufen darf. Sollte ein
Webseitenersteller Style-Sheets als notwendiges Mittel zu korrekten Darstellung
der Webseite einsetzen, reduziert er damit die Anzahl der potentiellen
Besucher, die etwas Vernünftiges zu sehen bekommen, erheblich.

Die eigentlichen Vorteile von Style-Sheets liegen auf einem
anderen Gebiet. Sie erlauben die Aufhebung der Vermischung von
Gestaltungsbefehlen und Informationsträgern, wie sie unter reinem HTML gegeben
ist. Es kann eine klare Trennung von Struktur und Layout erreicht werden. Das
Beispiel Formatvorlagen aus Textverarbeitungssystemen ist stark verwandt. Viele
HTML-Gestaltungelemente werden bei konsequenter Anwendung von Style-Sheets
überflüssig.

Style-Sheets sind keine eigene Sprache. Es gibt für die
Erstellung von Style-Sheets verschiedene Sprachen. Die genauen Regeln für die
konkrete Umsetzung von Style-Sheets werden je nach verwendeter
Style-Sheet-Sprache etwas differieren, aber meist recht ähnlich sein. Die
wichtigsten Vertreter einer Style-Sheets-Sprache sind die so genannten
Cascading Style-Sheets (abgekürzt CSS ), die vom W3C als offizieller Standard für das WWW empfohlen werden. Seit 1997 gibt es CSS in der Version 1 und bereits seit
März 1998 die Version 2. Die Version 1 ist aber Mitte 2001 noch immer nicht in
allen Browsern vollständig umgesetzt. Nur die neusten Versionen der wichtigsten
Browser verstehen die Version CSS1. CSS2 ist in diesen meist nur sehr
eingeschränkt implementiert. Netscape hatte übrigens für den Navigator bereits
recht früh eine eigene Style-Sheets-Sprache entwickelt, welche JSSS (JavaScript Style-Sheets) genannt wird. Diese ist von ihrem Leistungsumfang vergleichbar mit dem CSS1-Standard und hat ihn weitreichend beeinflusst. Sie unterscheidet
sich weitgehend nur in der konkreten Schreibweise der Anweisungen. Da
allerdings interessierte Kreise im W3C von Netscape erfundene Entwicklungen
grundsätzlich boykottieren, konnte sich der JSSS-Standard nicht durchsetzen. Für mehr Informationen zur Kompatibilitäten siehe im
Anhang Seite 377.

3.3.1
Verwendung von Style-Sheets

Die Anwendung von Style-Sheets im Rahmen einer Webseite hat
– trotz der unterschiedlichen Zielrichtung – viel Ähnlichkeit zur Verwendung
von Scripten. Um eine Style-Sheet-Sprache wie CSS verwenden zu können, müssen
Sie das Style-Sheet in eine Seite einbetten (linken) oder aus einer externen
Datei laden (importieren). Grundsätzlich ist eine externe Lösung ist im Sinne
von SGML eleganter und besitzt alle Vorteile, die eine Ausgliederung immer hat
(kleinere Dateien, Mehrfachverwendung möglich, übersichtlicher, besser zu
warten, etc.). Eine interne Lösung über eingebettete Style-Sheets hält alle Informationen über eine Webseite zusammen und erlaubt schneller
Änderungen. Sie empfiehlt sich bei nur wenigen Formatierungen über
Style-Sheets. Zur tatsächlichen Definition von Style-Sheets in einer Webseite
stehen im Wesentlichen die folgenden Techniken zur Verfügung:

Implementierung über den <STYLE>-Container, einen reinen HTML-Container. In dessen Innerem – meist in Kommentare eingeschlossen, damit für ältere Browser die Anweisungen verborgen werden – werden alle Elemente definiert,
denen ein besonderes Layout zugewiesen werden soll. Das Style-Sheet wird
konkret so eingebunden:
<STYLE
type="text/css">
<!–
… irgendwelche Anweisungen …
–>
</STYLE>

Implementierung als Inline-Definition bzw. Inline-Referenz eines HTML-Elements. Dies bedeutet, über einen zusätzlichen style-Parameter innerhalb des HTML-Tags
wird ein Attributwert gesetzt und die Stilinformation gilt ausschließlich
innerhalb des definierten Containers. Allgemeine Syntax ist folgende:
<[HTML-Tag]
style="[Style Sheet]">
Optional kann über den type-Parameter noch der Typ der Style-Sheets definiert
werden. Etwa für CSS so: type="text/css"

Implementierung von externen Style-Sheets über den <LINK>-Tag mit folgender Syntax:
<LINK
type="text/css" rel=stylesheet herf="[URL einer Datei mit
CSS-Informationen]" title="[Name des Style-Sheets]">
Diese Zeile wird irgendwo in die Webseite (in der Regel in den Header)
geschrieben. Externe CSS-Dateien haben in der Regel die Dateierweiterung css, aber das ist nicht zwingend.

Wenn Stilvereinbarungen eingesetzt werden, sind diese immer
additiv zu sehen, solange keine Konflikte zu bestehenden Vereinbarungen
existieren. Das bedeutet, wenn Sie beispielsweise eine HTML-Überschrift mit
einer CSS-Stilvereinbarung bzgl. der Farbe formatieren, gelten alle
HTML-Formatregeln weiter und die Stilvereinbarung für die Farbe wird nur
hinzugenommen.

Wenn Sie aber in einer Webseite mehrere Stilinformationen
verwenden, gilt, dass alle inneren Vereinbarungen, die von einer äußeren
Stilinformation gesetzten Angaben bei Konflikten überlagern. Sowohl, was HTML
und CSS angeht als auch CSS in verschiedenen Ebenen. So überlagert die
Inline-Vereinbarung einer roten Textfarbe die global gesetzte Stilvereinbarung
in einer externen Datei. Es kann aber auch vorkommen, dass eine
HTML-Vereinbarung unmittelbar bei einem HTML-Container globale
CSS-Vereinbarungen überlagert (dazu folgen Beispiele).

3.3.2
Die Syntax von CSS-Deklarationen

Eine Deklaration ist die (erste) Einführung einer neuen
Eigenschaft bzw. im Fall von JavaScript einer neuen Variablen oder Funktion.
Die Syntax von einer CSS-Deklaration sieht immer gleich aus. Es gibt immer den
übereinstimmenden Aufbau: name
: wert

Dabei gibt name das zu formatierende Style-Sheet-Element an und wert die konkrete Stilinformation,
wie es darzustellen ist. Mehrere Deklarationen werden mit Semikolon getrennt.
In der Regel werden die Werte in geschweifte Klammern gesetzt.

Eine Style-Sheet-Formatierung kann auf jeden existierenden
HTML-Tag angewandt werden, indem dieser der konkreten Style-Sheet-Formatierung
vorangestellt wird. Soll sie für mehrere Tags gelten, werden diese einfach mit
Kommata getrennt vor der Style-Sheet-Formatierung angelistet. Jeder Tag kann
mit einem Punkt abgetrennt um die optionale Angabe einer Klasse erweitert
werden. Dabei legt man einen Klassennamen fest und verwendet diesen bei der
Stilzuweisung über das Attribut class. Für class kann jeder beliebige Name genommen werden. Damit
ist es möglich, verschiedene Stile für ein Element zu erstellen.

Die Angabe einer Klasse kann auch alleine in der
Stildeklaration auftauchen. In diesem Fall muss nur ein Punkt vorangestellt
werden und bei der konkreten Verwendung ein HTML-Element um den so benannten,
neuen Parameter über das Attribut class erweitert
werden.

3.3.3
CSS-Beispiele

Obwohl bisher keinerlei konkrete HTML-Voraussetzungen
geschaffen wurden, soll die Verwendung von CSS mit einigen praktischen
Beispielen verdeutlicht werden. Für Details sei auf spätere Stellen im Buch,
zum Teil auch auf Spezialliteratur verwiesen.

Das erste Beispiel verwendet den <STYLE>-Container. Für verschiedene HTML-Tags
(Überschriften verschiedener Ordnung) werden CSS-Vereinbarungen getroffen. Für
die Überschrift der Ordnung 2 werden Klassen definiert. Die eigentliche
Überschrift der Ordnung 2 bleibt unverändert.

<html>

<body>

<style
type="text/css">

<!–

h1 { font-family: Arial; font-size:
x-large;

color: #0000CC; background: #F9B388;

}

h3 { font-weight: bold; font-style:
italic;

text-decoration: underline;

}

h2.a { text-decoration: underline;

color : green;

}

h2.b { font-style: italic;

}

</style>

–>

<h1>H1 – Das ist mein Stil</h1>

<h2>H2 – Das ist kein Stil</h2>

<h3>H3 – Das ist wieder mit Stil</h3>

<h2 class=a>H2 – Das ist Klasse a</h2>

<h2 class=b>H2 – Das ist Klasse b</h2>

</body>

</html>

Listing 3.1: Die Verwendung von Style-Sheets mit
dem <STYLE>-Container

Das zweite Beispiel zeigt, wie mehrere HTML-Tags bezüglich
einer gemeinsamen Eigenschaft in einem Schritt über CSS formatiert werden
können.

<HTML>

<HEAD>

<STYLE
type="text/css">

<!–

H1, H3, H5, H6 { color: red }

H2, H4 { color: yellow }

–>

</STYLE>

</HEAD>

<BODY>

<H1>Überschrift 1</H1>

<H2>Überschrift 2</H2>

<H3>Überschrift 3</H3>

<H4>Überschrift 4</H4>

<H5>Überschrift 5</H5>

<H6>Überschrift 6</H6>

</BODY>

</HTML>

Listing 3.2: Mehrere HTML-Tags werden mit einer
CSS-Vereinbarung formatiert

Das dritte Beispiel zeigt die Anwendung einer Inline-Referenz.

<HTML><BODY>

<H1>Überschrift 1 ohne CSS</H1>

<H1 style="color:red">Überschrift 1
mit Inline-CSS</H1>

</BODY></HTML>

Listing 3.3: Eine Inline-Referenz

Beispiel vier verwendet eine CSS-Klasse.

<html>

<body>

<style
type="text/css">

<!–

.Ab{ font-family: Arial; font-size:
x-large;

color: #0000CC; background: #F9B388;
color : green;

}

</style>

–>

<h1 class=Ab>H1 – Das ist mein Stil</h1>

<h1>H1 – Das ist kein Stil</h1>

<h6 class=Ab>H6!!!! – Wie H1</h6>

</body>

</html>

Listing 3.4: Eine CSS-Klasse, die auf verschiedene
HTML-Tags angewandt wird

Das fünfte Beispiel verwendet eine externe CSS-Datei. Es
besteht also aus zwei Dateien:

Der eigentlichen HTML-Datei, welche die Webseite repräsentiert

Der Datei mit den CSS-Vereinbarungen

Zuerst sehen Sie das Listing der externen CSS-Datei.

span { font-size: x-large;
background: #9294EF;}

body { color: #FFFFFF; background:
#FF0000;}

Listing 3.5: Die externe CSS-Datei mit Namen
MCSS.CSS

In der HTML-Datei wird die externe CSS-Datei mit Namen MCSS.css eingebunden und
verwendet:

<html>

<link rel="stylesheet"
href="MCSS.css" type="text/css">

<body>

Das ist normaler Text und <span>das befindet
sich im SPAN-Container.</span>

</body>

</html>

Listing 3.6: Verwendung der externen CSS-Datei mit
Namen MCSS.CSS

Das fünfte Beispiel hat neben der Verwendung von externen
CSS-Dateien auch gezeigt, dass die Vereinbarung bei einer äußeren Struktur
(hier der <BODY>-Tag)
von den Vereinbarungen der inneren Struktur (hier der <SPAN>-Tag) überlagert wird. Das
abschließende Beispiel soll das noch etwas deutlicher machen, wobei hier wieder
die gerade benutzte externe CSS-Datei und auch die anderen Stilvereinbarungen
verwendet werden.

<html>

<link rel="stylesheet"
href="MCSS.css" type="text/css">

<style
type="text/css">

<!–

h1 { font-family: Arial; font-size:
xx-large;

color: #0000CC; background: #F9B388;
color : green;}

</style>

<body>

Normaler Text.

<p style="background: #1111FF">Das ist
im Absatz Inline-Formatiert</p>

Wieder global formatierter Text. <font
color=cyan>Hier gilt eine HTML-Farbangabe, die die CSS-Vereinbarung
aufhebt.</font>

<h1>Meine Überschrift 1, in der <span>ab
hier der SPAN-Container wirkt</span></h1>

</body>

</html>

Listing 3.7: Innen hat im Zweifelsfall immer
Vorrang