Webdesign Haas

Individuelle Beratung
und Gestaltung für
Ihren Internetauftritt

Webdesign Haas
Marcus Haas
Buntentorsteinweg 96
28201 Bremen

Tel. 0421 / 387 13 60
Mobil: 0162 / 957 54 07
Web: www.webdesign-haas.de
E-Mail: kontakt@webdesign-haas.de

< CMS < Praxis < Techniken < CSS

CSS

Was ist CSS?

Stylesheet-Anweisungen übernehmen in zunehmendem Maße die Formatierung in Webseiten, d.h. Tags, wie und andere Anweisungen verschwinden.

Um dem Browser mitzuteilen, wie eine Überschrift oder ein Absatz formatiert werden sollte, genügten früher

,
usw., aber die Darstellung war damit immer noch dem jeweiligen Browser überlassen. Um mehr Individualität zu ermöglichen kam es zu einem Wildwuchs von mehr oder weniger gut unterstützten Erweiterungen, welche die Darstellung beeinflussen sollten.

Aber das Design war so eng mit dem Inhalt verwoben, das man kaum, oder nur mit viel Aufwand, etwas daran ändern konnte.

Das änderte sich erst mit der Einführung von Cascading Stylesheets, dies geschah Ende 1996 gleichzeitig mit der Einführung von HTML 4.0. Sowohl Netscape 4 als auch der Internetexplorer unterstützten CSS und nach und nach setzt sich die Technik in immer breiteren Kreisen durch.

Ein kurze Einführung

Es gibt drei Möglichkeiten Style-Anweisungen einzubinden, als externe Datei, im -Tag und als Attribut bei einzelnen Elementen.

Dabei überlagern Attribute Anweisungen im diejenigen in der externen Datei und diese wiederum werden gegenüber der Datei bevorzugt, in der Reihenfolge halt, wie sie vorgefunden werden (und alle haben Vorrang vor den Voreinstellungen des Browsers). Darüber hinaus werden auch Eigenschaften vererbt, wenn Schriftart und -größe z. B. im festgelegt werden, so gilt das für das ganze Dokument.

Im folgenden Beispiel sind alle drei Möglichkeiten demonstriert:

Titel der Datei

Eine Überschrift

Ein Absatz

Die meta-Angabe teilt dem Browser mit, in welchem Format er die Stylesheet-Datei vorfindet, sie ist bei aktuellen Browsern nicht unbedingt erforderlich.

Daneben gibt es noch die Möglichkeit unterschiedliche Stylesheets für verschiedenen Medien, wie Handhelds, Drucker usw. anzubieten:

oder:

Diese Möglichkeiten werden aber noch nicht von allen Browsern unterstützt.

An dieser Stelle auf die Details einzugehen würde zu weit führen, deshalb möchte ich nur noch erwähnen, dass natürlich nicht nur die Schrift kontrolliert werden kann, sondern praktisch alle Aspekte der Darstellung, von Rändern, über die Positionierung, Hintergründe und sogar einige dynamische Effekte (ein Teil davon wird unter Tipps und Tricks angesprochen).

Eine sehr schöne Einführung und Referenz gibt es bei Selfhtml

Vorteile

Die Vorteile sind offensichtlich, man kann Inhalt und Aussehen von einander trennen, die Seiten sehr viel übersichtlicher programmieren und sogar für unterschiedliche Bedingungen verschiedene Stylesheets zur Verfügung stellen (z. B. für PDAs, Druckausgabe oder auch eine Brillezeile).

Da man nicht mehr auf Tabellen und GIFs für die Positionierung angewiesen ist und sogar Objekte überlagern kann wird das Design viel flexibler, es eröffnen sich völlig neue Möglichkeiten und Freiheiten.