Zur Programmierung

Schrift- und Link-Stile

Erscheinungsbild-Kontrolle mit Cascading Style Sheets (CSS)

 
     
 

Mit purem HTML ist es nicht möglich, das Schriftbild von Webseiten so zu gestalten, daß es auf verschiedenen Browsern gleich aussieht. Wer seine Seiten für Explorer layoutet hat, wird eine böse Überraschung erleben, wenn er sie in Netscape betrachtet, und umgekehrt. Auch zwischen Mac- und PC-Browsern weichen die Schriftdarstellungen erheblich voneinander ab.

Mit Cascading Style Sheets (CSS), einem W3C-Standard, läßt sich das Problem – wenn auch nicht vollständig – umgehen: Schriftgrößen können pixelgenau skaliert und positioniert werden, so daß sie unabhängig von der verwendeten Plattform am Bildschirm weitgehend gleich aussehen.

Außerdem lassen sich dank der Möglichkeit, externe Stylesheets zu verwenden, nachträgliche Änderungen des Schriftbildes wesentlich bequemer durchführen: Alle Seiten, die das externe Stylesheet aufrufen, werden automatisch von den entsprechenden Änderungen angesprochen.

So sind z.B. die fünf unterschiedlichen Schriftstile dieser Seite durch Stylesheets definiert. Die Definition der Hauptüberschriften etwa lautet:

.text_20_dunkelgr { color: #6b6b6b; font-size: 20px; line-height: 22px; font-family: Verdana, Arial, Helvetica }

Nach meiner Erfahrung eignet sich die relative Maßeinheit "px" (für Pixel) am besten, um plattformunabhängig ein konstantes Layout zu gewährleisten, da hiermit von den meisten Browsern die tatsächliche Anzahl der Bildschirmpixel angesprochen wird. Dagegen führen absolute Größenangaben wie Inches ("in") oder Point ("pt") oft zu schwankenden Umsetzungen.

Unter "Font-Family" sind in meinem Beispiel mehrere Schriften genannt – sie werden je nach Verfügbarkeit auf dem verwendeten System der Reihe nach abgerufen. Möglich sind auch allgemeine Angaben wie "serif", "sans-serif" oder "monospace" (=nicht-proportionale Schrift).

CSS können aber noch weit mehr als nur Schriftstile festlegen. Auch z.B. Box- und Rahmeneigenschaften, Listenstile oder das Scroll-Verhalten von Hintergrundbildern lassen sich damit bestimmen. Eine zunehmend beliebte Anwendung sind "Roll-Over-Effekte" bei Hyper-Links, die mit CSS wesentlich einfacher zu definieren sind als etwa in JavaScript. Auf meinen Seiten habe ich davon bisweilen Gebrauch gemacht: Ein solcher Link z.B. wird folgendermaßen definiert:

a:hover {color:white;background:gray}

Allerdings ist Vorsicht geboten mit einem allzu exzessiven Einsatz von CSS, da ältere Browser den Standard entweder noch gar nicht verstehen (was u.U. bis zum Absturz führen kann), und auch die neueren sie unterschiedlich interpretieren. Der obige Link z.B. wird sein Aussehen beim Mouse-Over nicht verändern, wenn Sie Netscape < 6 verwenden. Netscape wiederum unterstützt in der Regel die Auszeichnung "blink" , die den Explorer ungerührt läßt, der seinerseits weniger Probleme mit der Auszeichnung "overline" hat, u.s.w. (Wenn die genannten Beispiele sich auf Ihrem Browser anders verhalten als beschrieben, dann liegt das daran, daß die Eigenschaft "text-decoration" insgesamt nur fehlerhaft unterstützt wird.

Weitere Hinweise zur Verwendung von CSS finden Sie unter der URL links oben.