Programmieren von Webanwendungen

>> Wissensdatenbank / Programmieren von Webanwendungen

Statische Webseiten

CSS

Um das äußere Erscheinungsbild einer Webseite beeinflussen zu können, bietet HTML einige Attribute, die für fast alle Elemente bzw. Tags gültig sind. Darunter zählen zum Beispiel align und bgcolor, mit denen man die horizontale Ausrichtung des Elements bzw. die Hintergrundfarbe bestimmen kann. Doch diese Attribute sind stets als "deprecated" (veraltet) markiert und sollen nicht mehr verwendet werden. Das hat einen einfachen Grund, denn die Darstellung (Stil) einer HTML-Seite soll möglichst getrennt vom Inhalt definiert werden. Hierfür wurde 1996 ein eigener W3C-Standard veröffentlicht: CSS (Cascading Stylesheets).

Die Trennung von Darstellung und Inhalt bietet einige Vorteile. Zum Beispiel kann eine Webseite je nach Gerät, auf dem der Browser ausgeführt wird, eine angepasste Darstellung wählen: Auf einem Smartphone-Browser sollten nicht so viele Details angezeigt werden, wie auf einem Browser, der auf einem PC installiert ist. Außerdem können Inhalt und Darstellung getrennt voneinander entwickelt werden. Ändert sich der Inhalt, muss nur die HTML-Seite angepasst werden. ändern sich die Farben der Seite, muss nur die CSS-Datei angepasst werden.

CSS-Stilvorlagen werden üblicherweise in einer separaten Datei definiert, auf die man mithilfe des Tags link und dessen Attribut href im Kopfteil einer HTML-Datei referenzieren kann:

<head> <title>Artikelverwaltung</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head>

Eine CSS-Datei besteht aus einer Menge von CSS-Stilvorlagen. Eine Stilvorlage wiederum besteht aus einem Selektor und einer beliebigen Anzahl von Eigenschaft-Wert-Paaren. Die Aufgabe der Selektoren besteht darin, eine Verknüpfung zwischen den Eigenschaften und den HTML-Tags herzustellen. Daher sind sie im einfachsten Fall namensgleich mit den HTML-Tags. Um Eigenschaften für einen Tabellenkopf zu definieren, wählt man also den Selektor th. Dann folgen in geschweiften Klammern die Eigenschaft-Wert-Paare. Die Paare werden stets mit einem Doppelpunkt getrennt und mit einem Semikolon abgeschlossen. Will man im Tabellenkopf beispielsweise weiß auf schwarzem Hintergrund schreiben, so muss man die folgende Stilvorlage definieren:
Abbildung: Eine CSS-Stilvorlage, die einen Tabellenkopf 'weiß auf schwarz' formatiert

Um Stilvorlagen definieren zu können, muss man selbstverständlich nachschlagen können, welche Eigenschaften für einen gegebenen Selektor anwendbar und welche Werteausprägungen gültig sind. Hierzu bietet sich die offizielle W3C-Spezifikation an. Es finden sich aber auch viele nützliche deutschsprachige Webseiten, wie zum Beispiel css4you.de, de.html.net oder wiki.selfhtml.org. Selbstverständlich gibt es auch zahlreiche hilfreiche Bücher.

Die Werte können oft auf unterschiedliche Art und Weise gewählt werden. Farben beispielsweise können entweder textuell (white, grey, blue, ...) oder als Zahlenwert im RGB-Farbraum formatiert werden. Die ersten beiden Ziffern entsprechen dem Rot-Anteil, die zweiten beiden Ziffern dem Grün-Anteil und die letzten beiden Ziffern dem Blau-Anteil. Zum Beispiel repräsentiert der Wert #000000 die Farbe Schwarz, wohingegen #910091 ein kräftiges Lila, gemischt aus Rot und Blau darstellt. Zu erwähnen sei, dass die Ziffern nicht aus dem dezimalen, sondern dem hexadezimalen Zahlensystem stammen. Es hat nicht 10 Ziffern (0, 1, ..., 9), sondern 16 (0, 1, ..., 9, A, ..., F). Deshalb ist das kräftigste Grün durch den Wert #00FF00 repräsentiert.

Ähnlich dem Vererbungskonzept in der objektorientierten Programmierung gibt es auch in CSS eine Art Vererbungshierarchie, mit der Stilvorlagen an untergeordnete HTML-Elemente "vererbt" werden können. Die untergeordneten Elemente können die Stilvorlagen der Eltern überschreiben oder weiter verfeinern. Die Hierarchie ist durch die Verschachtelung der Tags in der HTML-Seite bestimmt. Will man also die Schriftart für alle Textbestandteile auf der HTML-Seite festlegen, muss man den Selektor body verwenden. Möchte man hingegen eine Stilvorlage nur auf bestimmte Elemente, beispielsweise auf alle Überschriften der ersten Gliederungsebene anwenden, muss man den Selektor h1 wählen. Sofern diese Stilvorlage keine eigene Schriftart definiert, erbt sie die Schriftart aus der body-Stilvorlage. In der folgenden Abbildung wird die Standard-Schriftart für alle Elemente des HTML-Rumpfes auf Arial gesetzt. Das trifft auch auf die Überschriften zu. Darüber hinaus sollen alle Überschriften der ersten Gliederungsebene 70% (bzw. 1,7-mal) größer sein als die vom übergeordneten Element geerbte Schriftgröße (hier: normaler Text). Weil viele Browser standardmäßig h1-Überschriften doppelt so groß wie den normalen Text darstellen, führt diese Stilvorlage also zu einer etwas kleineren Darstellung von h1-Überschriften.
Abbildung: Die Überschrift erbt die Schriftart vom HTML-Rumpf

In der CSS-Spezifikation findet sich in dem Kapitel "Selectors" das Unterkapitel "ID selectors". Dort wird beschrieben, wie man mithilfe von ID-Selektoren eine Stilvorlage für ein einzelnes HTML-Element definieren kann. Einzige Voraussetzung ist, dass dem Element eine eindeutige ID zugewiesen wurde, auf die sich die Stilvorlage beziehen kann. In untenstehender Abbildung wird der HTML-Code dahingehend verändert, sodass der Absatz mit einer Fußnote ab sofort die ID "fussnote" besitzt. In der CSS-Datei wird eine neue Stilvorlage hinzugefügt, die sich nur auf die Fußnote bezieht.
Abbildung: Beispiel für eine Stilvorlage mit einem ID-Selektor

Als nächstes möchten wir in der Artikeltabelle die Artikelnummern durch eine spezielle Hintergrundfarbe gesondert hervorheben. Das betrifft also alle Zellen der ersten Spalte. Jeder dieser Zellen die ID "spalte1" zu vergeben und so eine gemeinsame Stilvorlage für diese besonderen Zellen zu definieren, ist nicht möglich, denn leider müssen IDs in einer HTML-Datei eindeutig sein. Sie dürfen nicht mehr als einmal vergeben werden. Die Lösung dieses Problems: neben ID-Selektoren gibt es auch Klassen-Selektoren. Anstelle des HTML-Attributs id wird nun class verwendet, welches nicht eindeutig sein muss. Auf diese Weise kann man allen betreffenden Zellen das class-Attribut mit dem Wert "spalte1" zuweisen und in der CSS-Datei einen Klassen-Selektor definieren.
Abbildung: Beispiel für eine Stilvorlage mit einem Klassen-Selektor

Klassen-Selektoren sind an einem Punkt erkennbar, der den Namen des betroffenen HTML-Tags vom Klassennamen trennt. Bei Bedarf können Klassen auch für alle HTML-Tags gelten. In einem solchen Fall lässt man den Tag weg und beginnt direkt mit dem Punkt (zum Beispiel .spalte1). Der Begriff "Klasse" und die Punkt-Notation kommen Java-Programmierern zwar bekannt vor, sind jedoch nicht mit den entsprechenden Konzepten der objektorientierten Programmierung gleichzusetzen.

Auch für CSS-Stilvorlagen existiert ein Validator. Auf der Internetseite von W3 kann jeder Programmierer seinen CSS-Code gegen den W3C-Standard prüfen.