Ein persönliches Schriftbild

Der Basis-Text

Unter SPIP erzeugt selbst der Basis-Text, also der, den Sie ellenlang in ein Formular eintippen, besondere HTML-Tags. Er wird tatsächlich in Absätze zerlegt; mit jedem Absatz korrespondiert ein <p class="spip">-Tag. Daher können wir mit diesen Absätzen einen genau festgelegten Stil verbinden, der auf den übrigen Text dieser Seite nicht angewandt wird.

Beginnen wir damit, eine Schriftart auszuwählen. Hierfür verwendet man die Eigenschaft font-family, die als Wert einen oder mehrere Namen von Schriftarten entgegennimmt, die verwendet werden sollen. Für einen Textkörper wie für denjenigen eines Artikels nimmt man besser eine Schriftart mit Serifen; nehmen wir an, Sie entscheiden sich für «Bookman Old Style». Schreiben Sie daher folgende Regel in Ihre meine_styles.css-Datei:

p.spip {
    font-family: "Bookman Old Style";
}

(beachten Sie, daß ein Schriftart-Name, der Leerzeichen enthält, in Anführungszeichen gesetzt werden muß). Ein Problem könnte es geben, wenn die Schriftart «Bookman Old Style» auf dem Rechner Ihres Besuchers nicht installiert ist: jeder Rechner hat seine eigenen Konfiguration, und vergessen Sie nicht, daß die «Gratis»-Schriftarten von Microsoft selten auf Linux- oder Macintosh-Maschinen installiert sind. Besser beugen wir hier vor und spezifizieren aufeinanderfolgend eine oder mehrere Ersatz-Schriftarten:

p.spip {
    font-family: "Bookman Old Style", "Times New Roman", serif;
}

Man spezifiziert hiermit, daß zunächst im Falle des Nichtvorhandenseins von Bookman die klassische «Times New Roman» benutzt werden soll; steht diese auch nicht zur Verfügung, wird schließlich auf «serif» zurückgegriffen. «serif» ist keine eigentliche Schriftart, sondern ein Gattungsbegriff, der dem Browser signalisiert, daß er eine Schriftart mit Serifen nach Voreinstellung des Rechners benutzen soll; in ähnlicher Weise spezifiziert «sans-serif» eine voreingestellte Schriftart ohne Serifen (im allgemeinen Arial oder Helvetica).

Man merke sich diese wichtige Regel: bei der Eigenschaft font-family ist es immer besser, mehrere aufeinanderfolgende Auswahlmöglichkeiten vorzuschlagen, um sich mit den auf dem Rechner des Besuchers installierten Schriftarten abzustimmen. Merken wir uns zudem, daß diese Regel auch für das <font face="...">-Tag des traditionellen HTML gilt.

Die übrigen Eigenschaften stehen offensichtlich in unserem Belieben. Beispielsweise können Sie die Größe des Textes mit der Eigenschaft font-size regeln. Denken Sie aber daran, daß die Browser von einer Regelung abhängig sind, mit der die Textgröße vorkonfiguriert wird; aus Gründen des visuellen Komforts sollte sich der Haupttext Ihrer Seiten im Rahmen dieser Regelung halten: der Benutzer bestimmt die Basis-Schriftgröße, nicht der Webmaster.

Merken Sie wohl, daß die Stile, die Sie bei den <p>-Tags anbringen, auf jeden Absatz als auf ein unabhängiges Objekt angewandt werden. Dies erlaubt einige interessante Effekte, wie beispielsweise die Einrückung der ersten Zeile der Absätze mittels der Eigenschaft text-indent. Per Voreinstellung hat diese Eigenschaft den Wert 0; das heißt, es gibt gar keine Einrückung. Man kann diese Eigenschaft modifizieren, um den Beginn jeder ersten Zeile um sechzig Pixel nach rechts zu verschieben:

p.spip {
    text-indent: 60px;
}

Die Hypertext-Links

Wer sich seine ersten CSS-Sporen bereits verdient hat, weiß, daß man das Erscheinungsbild der Links auf globale Weise modifizieren kann:

a {
    color: green;
    text-decoration: none;
}

Diese Stil-Regel spezifiziert, daß alle Hypertext-Links (das heißt alle <a ...>-Tags, ob mit oder ohne class-Attribut) in Grün und ohne Unterstreichung anzuzeigen sind.

SPIP erlaubt uns, noch weiter zu gehen. Wenn Hypertext-Links mittels der typographischen Abkürzungen erzeugt werden, verwenden sie tatsächlich mehrere verschiedene Stile:
-  wenn es sich um einen internen Link handelt (er leitet zu einer anderen Seite auf Ihrer Site), heißt das Tag <a class="spip_in">;
-  wenn es sich um einen externen Link handelt (er leitet zu einer anderen Website), heißt das Tag <a class="spip_out">  [1] ;
-  wenn schließlich nur die URL ohne Titel eingetragen ist, heißt das Tag <a class="spip_url">.

Es wird deshalb ganz einfach, diese drei Typen von Links durch ein unterschiedliches graphisches Erscheinungsbild zu markieren. Das geht so:

a {
    color: green;
    text-decoration: none;
}
a.spip_in {
    color: blue;
}
a.spip_out {
    color: red;
}

zeigt die internen Links in Blau und die externen Links in Rot an. Alle anderen Links, einschließlich derer, die nicht von SPIP erzeugt werden, erscheinen in Grün. Des weiteren werden sämtliche Links ohne Unterstreichung dargestellt: in der ersten Regel wird die Eigenschaft text-decoration spezifiziert und in keiner der folgenden Regeln verändert; darum findet sie automatisch bei allen Elementen von Typ <a ...> Anwendung.

Hier bemerkt man eine fundamentale Eigenschaft von Stylesheets: die graphischen Regeln werden in einer Reihenfolge angewandt, die von den allgemeineren zu den spezielleren hin fortschreitet. Dies erlaubt es, ein allgemeines Verhalten für die Mehrzahl der Elemente zu spezifizieren und dieses Verhalten für eine kleinere Teilmenge der Elemente zu modifizieren. Dieses Charakteristikum begründet die ganze Leistungsfähigkeit der Stylesheets.

Eine differenziertere Behandlung vorschreiben

Anstatt das vollständige Sortiment der über die typographischen Abkürzungen von SPIP automatisch erzeugten Stile auszubreiten, die Sie nach Ihrem Geschmack zuschneiden können (eine Aufzählung finden Sie in «SPIP und die Stylesheets»), studieren wir hier lieber den Fall, daß Sie ein und demselben Stil ein unterschiedliches Erscheinungsbild verleihen wollen, je nachdem, an welcher Stelle er sich im Template findet. Das ist ein legitimes Bedürfnis: man möchte beispielsweise den Textkörper mit einer Serifenschriftart und Einrückungen am Absatzbeginn anzeigen, das Postskriptum aber mit einer «glatteren» (serifenlosen) und kleineren Schriftart ohne Einrückung.

Diese Operation ist tatsächlich sehr einfach. Zunächst müssen Sie Ihr Template modifizieren und die Elemente einfügen, die die Unterscheidung zwischen Text und Postskriptum erlauben. Das kann beispielsweise in der Haupt-ARTICLES-Schleife folgendermaßen geschehen:

<div class="texte">#TEXTE</div>
<div class="ps">#PS</div>

An dieser Stelle muß die Seite neu berechnet werden (da man den HTML-Code modifiziert hat). Der Browser zeigt immer noch dasselbe an - das kann auch nicht anders sein; da unsere neuen Stile noch nicht in Gestalt einer gleichnamigen Regel im Stylesheet stehen, werden sie vom Browser ignoriert. Schaffen wir diesbezüglich Abhilfe:

.texte p.spip {
    font-family: "Times New Roman", serif;
    text-indent: 50px;
}
.ps p.spip {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 90%;
}

Die große Neuerung besteht hier nicht in den graphischen Eigenschaften, sondern in der Art und Weise, wie sie auf den HTML-Code angewandt werden. «.texte p.spip» signalisiert: «Diese Regel gilt für alle <p class="spip">-Tags, die in einem Tag enthalten sind, das mit einem class-Attribut namens texte versehen ist». Man könnte diese Regel ein wenig einschränken, indem man spezifiziert, daß das Eltern-Tag außerdem ein <div>-Tag sein muß (der Anfang der Regel müßte dann «<div.texte p.spip>» lauten); aber da wir die Struktur unserer eigenen Templates selbst in der Hand haben, ist es nicht vorteilhaft, das Stylesheet sehr restriktiv anzulegen.

Dieses Stylesheet führt in jedem Falle zum gewünschten Erfolg: die Absätze des Textes werden mit Einrückung angezeigt, diejenigen des Postskriptums mit einer kleineren Schriftart und ohne Einrückung. Um zu verifizieren, daß diese Regeln auf sämtliche Absätze der Art <p class="spip"> angewandt werden, sich aber nicht auf <div class="...">-Tags erstrecken, kann man spaßeshalber eine schwarze Umrahmung definieren:

.texte p.spip {
    border: 1px solid black;
}

Man stellt fest, daß alle Absätze des Textkörpers (nicht jedoch des Postskriptums) nun ihren eigenen schwarzen Rahmen erhalten. Wenn man anstelle von «.texte p.spip» einfach «.texte» geschrieben hätte, wäre der gesamte Text mit einem einzigen schwarzen Rahmen umgeben angezeigt worden. Erwähnen wir bei dieser Gelegenheit noch das Auftreten der Eigenschaft border.

<quoteAnmerkung: Dieser Trick, einen farbigen Rahmen einzusetzen, um herauszufinden, auf welche Elemente genau eine Regel angewandt wird, kann sehr hilfreich sein, wenn der Umfang Ihres Stylesheets zugenommen hat. Zögern Sie nicht, ihn einzusetzen, wenn Sie nicht nach und nach den Boden unter den Füßen verlieren wollen.

Diese Methode ist sehr leistungsfähig und läßt sich für die Strukturierung Ihrer Seitendarstellung nutzbringend verallgemeinern.