Wozu Stylesheets?
Wenn Sie Webseiten auf «traditionelle» Weise erstellen,
wird die Art der graphischen Anzeige in den HTML-Code Ihrer Seiten eingefügt. Also müssen Sie jedesmal, wenn Sie einen Text rot geschrieben haben wollen, das Tag <font color="red"> hinschreiben. Um eine Tabelle mit dicker Umrandung darzustellen, schreiben Sie <table border="2">.
Wenn Sie mit dieser Methode und auf einer statischen Site
(wo jeder Artikel in Form einer bestimmten HTML-Seite vorliegt) das Erscheinungsbild der gesamten Site ändern wollen, kann sich das zu einem Alptraum auswachsen: in sämtlichen HTML-Dateien müssen die zu modifizierenden Bereiche des Codes gefunden und dann einer nach dem anderen geändert werden (beispielsweise muß jedes <font color="red"> durch ein <b> ersetzt werden, wenn man beschlossen hat, daß die bislang rot dargestellten Elemente fortan fettgedruckt erscheinen sollen).
Wie Sie bereits wissen, verbessert SPIP Ihre Lage hier beträchtlich: Sie müssen nicht mehr hunderte von HTML-Dateien bearbeiten, lediglich noch einige Skelette; Ihre Seitendarstellung wird dann sogleich automatisch auf der gesamten Site aktualisiert. Damit sind jedoch noch nicht alle Probleme beseitigt. Nehmen wir beispielsweise an, Sie haben beschlossen, viele Elemente der Site mit einem bestimmten blauen Pastellfarbton zu versehen, damit Ihre Site eine individuelle graphische Identität gewinnt: die Links, umrahmte Absätze, bestimmte Navigationselemente und so weiter sollen pastellblau erscheinen. Wenn Sie eines Tages dieses Pastellblau durch ein Blaßgrün ersetzen wollen, müssen Sie sämtliche Stellen in allen Templates ändern, an denen von diesem Blau die Rede ist. Entmutigende Aussichten: unter diesen Umständen kann man das Erscheinungsbild der Seiten nicht schnell und bequem verändern; allenfalls ist es eine gute Übung.
Die Lösung des Problems besteht in der Verwendung von Stylesheets. Ein Stylesheet ist eine Datei, in der Sie eine Anzahl von graphischen Eigenschaften definieren und bestimmen, an welchen Stellen diese gültig sein sollen. Man erkennt zwei kapitale Vorteile von Stylesheets:
- das Stylesheet ist eine einzige zentralisierte Datei, die Sie auf so viele HTML-Dateien (und SPIP-Skelette) anwenden können, wie Sie wollen;
- die graphischen Eigenschaften werden nur ein einziges Mal im Stylesheet definiert, egal an wie vielen Stellen im HTML-Code sie angewandt werden sollen.
Konkretes
Wenn Sie das Stylesheet auf eine HTML-Datei anwenden wollen (bei der es sich auch um ein SPIP-Template handeln kann), muß es im <head>-Tag der HTML-Datei deklariert werden - neben dem Titel und anderen <meta>-Feldern. Das sieht folgendermaßen aus:
<head>
...
<link rel="stylesheet" type="text/css" href="meine_styles.css">
</head>Hier enthält die Datei meine_styles.css die graphischen Eigenschaften, die Sie auf die HTML-Seite anwenden wollen (im ganzen weiteren Verlauf des Tutorials wird davon ausgegangen, daß Sie für Ihre Stylesheet-Datei den Namen meine_styles.css gewählt haben). Diese Datei ist mit der Namenserweiterung «css» versehen. CSS [1] ist der Name der Sprache, die für die Stylesheets benutzt wird, ebenso wie HTML der Name der Sprache ist, in der Webseiten erstellt werden.
Anmerkung: Ein Stylesheet kann ebensogut auf eine klassische («statische») HTML-Seite wie auf ein SPIP-Skelett angewandt werden. Das bedeutet, daß alle CSS-Tricks, die mit klassischem HTML möglich sind, auch mit einem Skelett Ihrer Site genutzt werden können.
Wenn Sie die vorhergehenden Abschnitte aufmerksam gelesen haben, tragen Sie sich jetzt möglicherweise mit Zweifeln: in der Tat, man muß eine neue Sprache lernen, um Stylesheets verwenden zu können (völlig umsonst bekommt man auch SPIP nicht!). CSS verwendet nicht dieselbe Syntax wie HTML. Die Sprache ist aber sehr einfach, und es genügen einige Beispiele, um einen Fuß in die Tür zu bekommen.