17.2 Cascading Style Sheets  
Die herkömmliche HTML-Programmierung war nicht immer besonders strukturiert. Wollte man in einer Tabelle alle Zellen in einer bestimmten Schrift darstellen, so musste man in jeder Zelle ein <font>-Tag verwenden. Mit dem Konzept der Cascading Style Sheets1 (kurz CSS) kann sich das ändern. Ohne hier auf allzu viele Details eingehen zu wollen, sei nur gesagt: Es gibt immer wieder in der Fachpresse Vergleiche, welcher Browser in welchem Maße CSS unterstützt. Dabei schneidet der Netscape Navigator in der Regel am schlechtesten ab, der Internet Explorer schon etwas besser – und in Führung liegt die Nummer 3 auf dem Browser-Markt, der norwegische Opera-Browser.
Ein Style Sheet sieht folgendermaßen aus:
<style type="text/css"><!--
a {color:blue; text-decoration:none}
--></style>
Die HTML-Kommentare dienen auch hier dazu, dass ältere Browser den Text zwischen den <style>-Tags nicht anzeigen. Heutzutage ist das allerdings genauso relevant wie die HTML-Kommentare bei <script>-Tags: Sie schaden nicht, aber nützen nur begrenzt. Eigentlich interessant ist diese Zeile:
a {color:blue; text-decoration:none}
Das bedeutet: Alle Links (Tag <a>) im Text werden in blauer Farbe angezeigt (color:blue) und nicht unterstrichen (text-decoration:none). Diese Angaben gelten global für das gesamte Dokument. Man kann jedoch diese Vorgaben auch überschreiben, indem bei einem Tag der style-Parameter gesetzt wird:
<a href="https://www.rheinwerk-verlag.de/?GPP=openbook" style="color:blue; text-decoration:none">Galileo Press</a>
Man kann natürlich nicht nur Links anpassen, sondern beispielsweise auch Absätze (Tag <p>) oder eben Tabellenzellen (Tag <td>):
<style type="text/css"><!--
p {color:green}
td {font-size: 12pt}
--></style>
Außerdem lassen sich CSS-Stilangaben nicht nur für Tags einrichten, sondern auch für IDs und für spezielle Klassen. Letzteres sieht beispielsweise folgendermaßen aus:
<style type="text/css"><!--
.gruen {color:green}
--></style>
Alles auf der Seite, was die Klasse gruen hat, wird auch grün dargestellt. Die Klasse geben Sie mit dem class-Attribut an:
<p class="gruen">Dieser Text ist nicht mehr schwarz ...</p>
JavaScript bietet nun mehrere Möglichkeiten, auf CSS-Formatierungen eines Elements zuzugreifen. Am einfachsten verwenden Sie die style-Eigenschaft des entsprechenden HTML-Elements, das Sie via DOM (siehe vorheriges Kapitel) »erreichen«. Sie müssen dann nur noch die zugehörige CSS-Eigenschaft in CamelCase umwandeln. Das bedeutet, dass jeder Wortbestandteil mit einem Großbuchstaben beginnt, aber die gesamte Eigenschaft mit einem Kleinbuchstaben anfängt. Aus der CSS-Eigenschaft color wird die JavaScript-Eigenschaft color, es ändert sich also nichts. Aus background-color wird backgroundColor, aus font-weight wird fontWeight. Bindestriche verschwinden also ebenfalls – sie sind ja so oder so nicht in JavaScript-Eigenschaften erlaubt.
Das folgende Listing ändert die Vorder- und Hintergrundfarbe eines Textes auf Knopfdruck. Per document.getElementById() wird das <p>-Element angesprochen und dann style.<Eigenschaft> gesetzt.
 Hier klicken, um das Bild zu Vergrößern
Abbildung 17.1 Der Text wird auf Mausklick invertiert.
<html>
<head>
<title>CSS</title>
<script type="text/javascript"><!--
function normal() {
var Absatz = document.getElementById("Absatz");
Absatz.style.color = "black";
Absatz.style.backgroundColor = "white";
}
function invers() {
var Absatz = document.getElementById("Absatz");
Absatz.style.color = "white";
Absatz.style.backgroundColor = "black";
}
//--></script>
</head>
<body>
<p id="Absatz">Text wechsle dich</p>
<form>
<input type="button" value="Normal" onclick="normal();" />
<input type="button" value="Invers" onclick="invers();" />
</form>
</body>
</html>
Ein häufig eingesetzter Effekt besteht darin, die CSS-Eigenschaft display zu setzen: Der Wert none beispielsweise blendet das dazugehörige Element ein oder aus; der davon belegte Platz wird freigegeben.
Wenn Sie mit Klassen arbeiten, benötigen Sie die style-Eigenschaft nicht, lediglich className. Damit haben Sie Lese- und Schreibzugriff auf die CSS-Klasse des jeweiligen Elements. Hier noch einmal das Beispiel mit dem invertierten Text, diesmal via CSS-Klassen:
<html>
<head>
<title>CSS</title>
<style type="text/css"><!--
.normal { color: black; background-color: white; }
.invers { color: white; background-color: black; }
--></style>
<script type="text/javascript"><!--
function setzeKlasse(klasse) {
var Absatz = document.getElementById("Absatz");
Absatz.className = klasse;
}
//--></script>
</head>
<body>
<p id="Absatz">Text wechsle dich</p>
<form>
<input type="button" value="Normal"
onclick="setzeKlasse('normal');" />
<input type="button" value="Invers"
onclick="setzeKlasse('invers');" />
</form>
</body>
</html>
JavaScript bietet noch einen viel detaillierteren Zugriff auf CSS-Stile, was aber in der Praxis eher seltener zum Einsatz kommt. Aus diesem Grund finden Sie hier nur einen kurzen Ausblick, was noch möglich ist:
|
Alle Stylesheets eines Dokuments (sowohl inline als auch externe Stile) stehen im Array document.styleSheets zur Verfügung. Mit der Eigenschaft disabled können sie aktiviert (false) und deaktiviert (true) werden. |
|
Alle einzelnen CSS-Anweisungen innerhalb eines Stylesheets stehen im Array cssRules (Mozilla) bzw. rules (Internet Explorer). Der Zugriff erfolgt also via document.styleSheets[x].cssRules bzw. document.styleSheets[x].rules. Der Zugriff dort funktioniert dann wie bei regulären CSS-Stilen über die style-Eigenschaft, beispielsweise mit document.styleSheets[x].cssRules[y].style.backgroundColor oder document.styleSheets[x].rules[y].style. backgroundColor. |
Für den Praxiseinsatz genügen aber in den allermeisten Fällen die Zugriffsmöglichkeiten auf die spezifischen Stile oder, noch besser, auf die CSS-Klassen.
|