«Modeberatung» für Websites
Eine Anleitung zu den grundlegenden Konzepten mit kaskadierenden Stilvorlagen: Wie Stilvorlagen formuliert und genützt werden – und weshalb es besser ist, diese Arbeit nicht in GoLive zu tun, sondern im Texteditor.
MATTHIAS SCHÜSSLER Wer mit Styles arbeitet, muss sich die grundlegenden Konzepte vergegenwärtigen: Stilvorlagen können auf drei Arten zugewiesen werden. erstens als eigene CSS-Datei, welche mit der Seite verknüpft wird, weiter innerhalb des <head>-Bereichs einer Seite und schliesslich direkt, d. h. über den Befehl style={...} innerhalb eines HTML-Tags. Der Normalfall sollte ein externes Style Sheet sein, da dies den stringenten Aufbau der Site sicherstellt. Die Definition der Styles innerhalb des Kopfs ist dann angezeigt, wenn einige Formate nur auf einer Seite zum Einsatz kommen. Der Style-Befehl innerhalb des HTML-Tags eignet sich für «Ad-hoc»-Formatierungen und ist nützlich, um die Auswirkung eines Style-Statements ohne Umstände zu testen. Die verschiedenen Möglichkeiten können auch kombiniert werden. Kommen mehrere Stildefinitionen zum Einsatz, sollte auf Widerspruchsfreiheit geachtet werden, da das Resultat sonst unerwartet ausfällt.
Ein Eintrag in der Stilvorlage setzt sich aus dem zu definierenden Element, aus Eigenschaft und Wert zusammen, Eigenschaft und Wert stehen in geschweiften Klammern und sind durch einen Doppelpunkt getrennt. Soll beispielsweise die Eigenschaft «Schrift» (font-family) des Elements Hauptüberschrift (h1) mit dem Wert Courier formatiert werden, dann lautet der Eintrag in CSS wie folgt:
h1 {font-family: Courier}
Es ist möglich, mehrere Elemente «auf einen Streich» mit den nachgestellten Eigenschaften zu versehen. Sollen alle Überschriften von h1 bis h4 als Courier in Erscheinung treten, dann reicht es, die Elemente aufzuzählen:
h1, h2, h3, h4 {font-family: Courier}
Umgekehrt können zwischen geschweiften Klammern mehrere Pärchen von Eigenschaft und Wert stehen; diese sind wiederum durch Semikolons abzutrennen:
h1, h2, h3, h4 {font-family: Courier; color: darkblue}
Die obigen Beispiele zeigen, wie man mittels Stilvorlage die grundlegenden HTML-Elemente wunschgemäss formatieren kann. Diese Angaben überschreiben die Standarddefinitionen, sodass einer normalen HTML-Seite allein durch das Hinzufügen eines Verweises auf eine Stilvorlage der eine oder andere Look verpasst werden kann.
Zusätzlich zu den Elementen lassen sich in Stilvorlagen so genannte «Klassen» einrichten: Deren Bezeichnung beginnt mit einem Punkt. Ein Beispiel für eine Klasse:
.important {background-color: red; font-weight: bold}
Diese Klasse legt fest, dass der Hintergrund rot und die Schrift fett sein soll. Sie lässt sich per class-Tag mit beliebigen HTML-Elementen kombinieren. Beispielsweise mit einem Absatz:
<p class=important>Dies ist ein fettgedruckter Abschnitt mit rotem Hintergrund</p>
Die Klasse lässt sich auch mit der Überschrift verwenden:
<h1 class=important>Dies ist der Titel</h1>
Klassen und Elemente lassen sich problemlos gemeinsam nützen: So würde die h1-Überschrift, wie weiter oben vorgegeben, als Courier in Blau formatiert und durch die Klasse important mit einem roten Hintergrund und fetter Schrift ausgestattet. Wenn Klasse und Element widersprüchliche Angaben erhalten, dann behält die Klasse die Oberhand. Würde also die Klasse contradict als Schrift Arial in Schwarz vorgeben, dann würde das Courier und darkblue, d. h. die dunkelblaue Farbvorgabe, ausstechen.
In den beiden obigen Beispielen fungiert die Klasse wie das Absatzformat in einem Layoutprogramm oder einer Textverarbeitung. Klassen lassen sich auch wie Textformate einsetzen. Dazu ist der <span>-Tag zuständig. So könnte ein wichtiges Wort wie folgt hervorgehoben werden:
<p>Es geht in diesem Artikel um <span class=important>Cascading Style Sheets</span>, CSS.</p>
Handgemachte Stilvorlagen
Wer GoLive, Dreamweaver oder einen anderen elaborierten Webeditor einsetzt, könnte obige Ausführungen für überflüssig halten: Die Programme von Adobe oder Macromedia helfen, Stilvorlagen per Maus zusammenzuklicken. Mit deren Syntax braucht man sich nicht auszukennen. CSS-Know-how zahlt sich jedoch aus, denn per Editor erstellte CSS sind längst nicht so übersichtlich und leistungsfähig wie von Hand optimierte Stilvorlagen. Die Editoren pflegen die Einträge nach Klasse und Element zu sortieren. Erstellt man beispielsweise in GoLive einen Eintrag zu der Überschrift h1, dann listet das Programm alle Eigenschaften und Werte zu diesem Element auf und produziert eine unter Umständen unübersichtliche Liste. Beim manuellen Zusammenbau kann man die Stilvorlage umgekehrt nach formalen Kriterien gliedern. Es ist möglich – und sinnvoll! –, alle Klassen und Elemente zusammenzunehmen, welche eine Gemeinsamkeit haben. Entscheidet man sich, die Schriften Arial und Courier zu verwenden, dann braucht es pro Schrift einen Eintrag:
h1, h2, h3, h4, .code {font-family: Courier}
p, h5, .legende {font-family: Arial}
Es stellt kein Problem dar, wenn Klassen und Elemente mehrfach in der Stilvorlage auftauchen. Somit kann man Farbe, Auszeichnung, Grösse etc. separat definieren. In unserem Demo-CSS könnte in einem nächsten Schritt die Farbe definiert werden:
h1, h2, h3, h4, h5 {color: blue}
p, h5, .code, {color: black}
.legende {color: darkblue}
Der Vorteil der formalen Gliederung liegt auf der Hand: Für einen menschlichen Leser ist die Stilvorlage einfacher zu durchschauen. Sie widerspiegelt das formale Konzept und hilft, sich über die gestalterischen Richtschnüre klar zu werden. Einleuchtend der Nutzen auch für die Wartung: Kommt man zum Schluss, statt Courier die Schrift Verdana zu verwenden, braucht es genau einen Eingriff in die Stilvorlage.
Das Boxmodell
Wie eingangs dieses Artikels erwähnt, braucht es beim Einsatz von Stilvorlagen die Tabelle wirklich nur dann, wenn Text in tabellarischer Form zu setzen ist. Mit CSS kann nämlich jedes beliebige Textelement mit Angaben zu Breite, Höhe, Hintergrundfarbe, Einrückung etc. ausgestattet werden. Dies wird durch das so genannte Boxmodell ermöglicht: Jeder Abschnitt, Titel oder jedes sonstige HTML-Objekt wird vom Browser als Box behandelt. Man kann sich eine solche Box am einfachsten als «Zwiebel» mit mehreren «Schalen» vorstellen. Im Inneren der Zwiebel steckt der Inhalt, beispielsweise der Text. Dieser wird umgeben vom Rahmen (border). Wie viel Luft zwischen Rahmen und Inhalt ist, bestimmt der Innenabstand (padding). Wie nahe wiederum die Box anderen Objekten kommen darf, wird durch den Aussenabstand (margin) bestimmt.
Möchte man also einen Text von einer roten Linie umgeben haben, dann muss der normalerweise unsichtbare Rahmen sichtbar gemacht werden. Dadurch gibt man dessen Breite und Farbe vor. Sie können folgendes Beispiel anhand eines normalen Absatzes nachvollziehen, dem Sie in der HTML-Seite die Klasse box zuweisen (<p class="box">Dies ist ein umrahmter Text</p>). Die Definition der Box-Klasse in der Stilvorlage sieht wie folgt aus:
.box {border-color: red; border-style: solid; border-width: 3px}
Soll die Box eine Hintergrundfarbe haben, dann verwenden Sie die Eigenschaft background-color, und damit der Rahmen nicht unmittelbar an den Text angrenzt, geben Sie einen Innenabstand von zwei Pixeln vor (in den folgenden Beispielen zeigen wir jeweils nur die relevante Eigenschaft):
.box {padding: 2px}
Diese Box läuft über die ganze Seitenbreite. Möchten Sie die Breite beschränken, können Sie, wie in HTML gewohnt, über width den Wert vorgeben. Sie können dazu Angaben in Pixeln, in Prozent der gesamten Breite und den anderen üblichen Masseinheiten festlegen. Eine Box mit dreissig Prozent der Seite würden Sie wie folgt erhalten:
.box {width: 30%}
Um einen Textfluss zu definieren, stellt CSS die Eigenschaft float zur Verfügung. Auf folgende Weise können Sie einen Textkasten oder ein Bild einbauen, das vom Fliesstext umflossen wird – genau wie es die Konturenführung im Layoutprogramm bewirkt:
.leftbox {width:150px; background-color: lightblue; padding: 3px; float: left}
Soll ein Element wieder den regulären Textfluss annehmen, d. h., unterhalb einer mittels float-Eigenschaft rechts oder links positionierten Box anschliessen und wieder die gesamte Breite belegen, dann verwenden Sie in Ihrer HTML-Seite das Statement clear (siehe Screenshot auf der vorherigen Seite unten links):
<p class="box">Dieser Text steht in einer linksbündigen Box</p>
<p>Dieser Text umfliesst die linksbündige Box</p>
<p style={clear: both}>Dieser Text steht unterhalb der linksbündigen Box und belegt die ganze Breite</p>
Für das Menü, welches auf dem Screenshot rechts oben zu sehen ist, haben wir nicht float verwendet, sondern die absolute Positionierung. Über position: absolute; kann der Browser angewiesen werden, eine Box ausserhalb des normalen Textflusses an einer vorgegebenen Stelle zu platzieren. Zusammen mit einer absoluten Positionierung kommen top und left zum Einsatz, um den vertikalen, resp. horizontalen Abstand zum übergeordneten Container anzugeben. Unsere leftbox wird der Browser also dank folgenden Argumenten linksbündig anzeigen:
.leftbox {left:10px; position: absolute}
Mit der absoluten Positionierung können Boxen zur Überlappung gebracht werden – etwas, was die Browser normalerweise nicht zulassen. Damit der Fliesstext der Webseite, den wir mit der Klasse mainbox auszeichnen, nicht vom Menü überlagert wird, muss er rechts davon platziert werden. Wenn die leftbox 150 Pixel breit ist, dann beginnt die mainbox sinnvollerweise 170 Pixel vom linken Seitenrand:
.mainbox {margin-left: 170px}
Natürlich wird man in vielen Fällen nicht wie im Beispiel einen einzelnen Absatz in eine Box packen, sondern mehrere Abschnitte. Dazu weisen Sie die Klasse leftbox nicht per <p>-Tag zu, sondern mit <div>. Mit diesem Tag erzeugen Sie eine Art Container, also eine eigene Box für den gesamten Inhalt zwischen öffnendem <div>– und schliessendem <div>-Tag. Im Fall des Menü-Beispiels würde der Code wie folgt aussehen:
<div class="leftbox">
<h3>Dies ist das Menü</h3>
<p>Hier folgt ein Menüeintrag</p>
<p>Hier folgt noch ein Menüeintrag</p>
</div>