SELFHTML: CSS / Style-Sheets und HTML
Description: (SELFHTML 7.0) Wie CSS Style-Sheets und HTML in Zusammenhang stehen
Keywords: SELFHTML, CSS, Style Sheets, Style-Sheets, HTML

SELFHTML/Quickbar CSS Style-Sheets

| ## Style-Sheets und HTML
| Sinn und Zweck von Style-Sheets Style-Sheet-Sprachen, Versionen und Informationen Style-Sheets und WWW-Browser

## Sinn und Zweck von Style-Sheets

Style-Sheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Befehle. Mit Hilfe von Style-Sheets können Sie beispielsweise bestimmen, daß Überschriften 1. Ordnung eine Schriftgröße von 18 Punkt haben, in der Schriftart Helvetica, aber nicht fett erscheinen, und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit herkömmlichem HTML nicht möglich.

Das ist aber nur der Anfang. Style-Sheets bieten noch viel mehr Möglichkeiten. So können Sie beliebige Bereiche einer HTML-Datei mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen versehen. Sie können beliebige Elemente, sei es eine Grafik, ein Textabsatz, eine Tabelle oder ein Bereich aus mehreren solcher Elemente, pixelgenau im Anzeigefenster des WWW-Browsers positionieren. Für Drucklayouts stehen Befehle zur Definition eines Seitenlayouts bereit. Für die akustische Wiedergabe von HTML-Dateien gibt es ein ganzes Arsenal an Befehlen, um künstliche Sprachausgabesysteme feinzusteuern. Spezielle Filter schließlich, die derzeit allerdings noch rein Microsoft-spezifisch sind, erlauben Grafik-Effekte bei normalen Texten, die aus Grafikprogrammen wie PhotoShop bekannt sind.

Ein weiteres wichtiges Leistungsmerkmal von Style-Sheets ist es, daß Sie Definitionen zentral angeben können. So können Sie beispielsweise im Kopf einer HTML-Datei zentrale Definitionen zum Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen der entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner. Sie können Ihre Style-Sheet-Definitionen sogar in separaten Dateien notieren. Solche Style-Sheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Style-Sheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Layout bewirken.

Style-Sheets unterstützen also erstens die professionelle Gestaltung beim Web-Design, und zweitens helfen sie beim Corporate Design für große Projekte oder für firmenspezifsche Layouts.

## Style-Sheet-Sprachen, Versionen und Informationen

Es gibt mehrere Sprachen zum Definieren von Style-Sheets. Die bekannteste ist die CSS-Sprache. CSS steht für "Cascading Style Sheets". Diese Sprache wird vom W3-Konsortium, das auch für die Normierung von HTML zuständig ist, vorgeschlagen. Die CSS-Sprache ist optimal auf HTML abgestimmt. In diesem Kapitel wird deshalb auch ausschließlich die CSS-Sprache behandelt.

Genau so, wie es HTML-Sprachversionen gibt, gibt es auch CSS-Sprachversionen. Die erste Version 1.0 enstand 1996. Seit März 1998 gibt es die Version 2.0. In diesem Kapitel werden folgende Symbole verwendet, um die CSS-Versionen zu kennzeichnen:

| Das beschriebene Leistungsmerkmal gehört zur Version 1.0 der CSS-Sprache.
| Das beschriebene Leistungsmerkmal gehört zur Version 2.0 der CSS-Sprache.

Informationen zu Style-Sheets erhalten Sie im Internet an folgenden Stellen:

Einstiegsseite zu Style-Sheets beim W3-Konsortium
Spezifikation der CSS-Version 1.0
Spezifikation der CSS-Version 2.0
Aktuelles vom W3-Konsortium zum Thema Style-Sheets

## Style-Sheets und WWW-Browser

Netscape 4.x interpretiert fast den vollen Sprachumfang der CSS-Version 1.0 und einen Teil der Befehle der CSS-Version 2.0. Der MS Internet Explorer kennt die CSS-Version 1.0 bereits seit seiner Produktversion 3.0. In der Version 4.0 interpretiert er einen Teil der CSS-Version 2.0 und einige spezielle, von Microsoft eingeführte Style-Sheet-Angaben.

Wenn Sie WWW-Seiten gestalten, müssen Sie daraus Ihre eigenen Konsequenzen ziehen. Style-Sheets erlauben Ihnen völlig neue Möglichkeiten beim Webseiten-Layout. Je intensiver Sie Ihre Layouts jedoch von Style-Sheet-Effekten abhängig machen, desto langweiliger, enttäuschender und evtl. auch fehlerhaft wirken die Seiten bei Anwendern, die keinen Style-Sheet-fähigen Browser benutzen. Da Netscape 3.x immer noch als wichtige Meßlatte für die Anzeigequalität von WWW-Seiten gilt, in dieser Version aber noch keine Style-Sheets kennt, werden Style-Sheets bislang noch vorsichtig eingesetzt. Allmählich muß man sich jedoch nicht mehr entschuldigen, wenn man Style-Sheets einsetzt. Zumindest gegen den Einsatz der Befehle der CSS-Version 1.0 ist eigentlich nichts mehr einzuwenden - die Lynx-Militanten sind sowieso gegen alles, was nicht in ein 24x80-Zeichenraster paßt. Neuere Befehle sollten Sie dagegen noch mit Vorsicht anwenden. In jedem Fall sollten Sie Ihre "gestylten" Web-Seiten immer auch mal mit Netscape 3.x testen.

weiter: | Style-Sheets in HTML einbinden
zurück: | Event-Handler

SELFHTML/Quickbar Dokumentation: HTML Style-Sheets - eigene Formate

© 1998 Stefan Münz, muenz@csi.com