Websiteentwicklung: CSS: Beschreibung

Aus Wikibooks


Cascading Style Sheets (kurz CSS), ist eine deklarative Sprache für Stilvorlagen, die auf strukturierte Dokumente angewendet werden. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei XHTML und SVG) eingesetzt. CSS legt dabei fest, wie ein zur geeignet strukturierter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Dokumentfragmente, deren Aussehen gleich sein soll, auch als Gruppe selektiert werden können, beziehungsweise jene Fragmente eindeutig selektierbar sein müssen, die ein abweichendes Aussehen bekommen sollen. Man zeichnet im Dokument also die Bedeutung einzelner Fragmente aus, während das Aussehen dieser Fragmente mit CSS festgelegt wird. Per CSS werden die Fragmente dann gezielt selektiert, um ihnen eine bestimmte Darstellung zuzuweisen.

Um ein (X)HTML-Dokument abweichend von dem zu gestalten, wie es ein Darstellungsprogramm darstellen würde, benötigt man CSS. Zwar ist es ebenfalls mit einigen älteren Versionen von HTML möglich, Farben, verschiedene Schriftarten, Hintergrundbilder und ähnliches zu verwenden. Diese Verwendung von (X)HTML für Visualisierungszwecke befindet sich aber seit einigen Jahren auf dem Rückzug: Die Trennung zwischen Inhalt ((X)HTML) und Darstellung (CSS) wurde seit etwa 1997 mit der Einführung von HTML 4 und CSS 1 (Ende 1996) stärker betont. Grund für die strikte Trennung zwischen Inhalt und Darstellung ist primär die Nutzbarkeit der Inhalte unabhängig von der konkreten Darstellung für alle interessierten Nutzer, gleich welche Ausgabegeräte sie nutzen oder welche persönlichen Besonderheiten sie aufweisen mögen. CSS ermöglicht es demzufolge auch konsequenter Weise Nutzern, selbst Stilvorlagen bereitzustellen, um die Darstellung der Inhalte für die eigenen Bedürfnisse optimal aufzubereiten. Ein weiterer wichtiger Grund der strikten Trennung von Inhalt und Darstellung betrifft mehr die Autoren, denn durch die Trennung ist es deutlich einfacher, sowohl den Inhalt als auch die Darstellung zu verwalten und im Bedarfsfalle das eine unabhängig vom anderen in übersichtlicher Weise und einfach zu ändern. Neuere Versionen von XHTML insbesondere verzichten weitgehend auf sogenannte Präsentationsattribute, welche insbesondere die visuelle Darstellung beeinflussen.

Cascading Style Sheets sind eine wichtige Entwicklung im Zuge der Bemühungen um Dokumente mit einer Struktur, die die semantische Bedeutung der Inhalte wiederzugeben vermögen, da es bei konsequenter Anwendung die komplette Trennung von Inhalten und Aussehen ermöglicht.

Aufgebrochen wird die Trennung von Inhalt und Präsentation wiederum stärker mit der in Arbeit befindlichem Version HTML 5, wo allerdings eher auf java-script gesetzt wird, um die Trennung zwischen Inhalt und Präsentation wieder unschärfer zu gestalten. Auch in Arbeit befindliche neue Module von CSS verwischen teilweise wieder stärker die Trennung zwischen Inhalt und Darstellung, beziehungsweise erleichtern es Autoren, eine solche Mischung selbst vorzunehmen. Gleichzeitig bietet der Entwurf zu HTML 5 allerdings zahlreiche neue Elemente mit semantischer, inhaltlicher Bedeutung. Die Situation ist also ambivalent: Der Autor hat es damit stärker selbst in der Hand, Dokumente entweder besser verständlich und zugänglich zu gestalten oder dies auch gezielt zu unterbinden. Dieser Trend zur möglichen Mischung folgt zwar den Gewohnheiten einer größeren Zahl von Autoren, hat aber wiederum Folgen für die Zugänglichkeit zu Inhalten für alle interessierten Nutzer. Auch in diesem Zusammenhang lohnt es sich also, CSS gut zu beherrschen, um auch in Zukunft (X)HTML so nutzen zu können, dass Inhalte für alle zugänglich angeboten werden und diese nicht durch den mißbräuchlichen Einsatz von CSS oder java-script unzugänglich zu machen. Unzugänglich für einige Nutzergruppen werden Dokumente unter anderem dann, wenn sich erst durch die Präsentation mit Interpretation von CSS und java-script der vom Autor beabsichtigte Sinn des Inhaltes ergibt und nicht unabhängig davon. Die strikte Trennung zwischen Inhalt und Dekoration wiederum ist der primäre Schritt, um Inhalte zugänglich anzubieten.

Bei einem Graphikformat wie SVG wiederum ist anders als bei einem Textformat wie (X)HTML eine Trennung zwischen Inhalt und Präsentation nicht einfach scharf durch Trennung in verschiedene Sprachen zu ziehen, weswegen hier der Autor selbst entscheiden muß, was inhaltlich relevant ist und was nur Dekoration ist, ersteres wird dann wieder mit Attributen und Präsentationsattributen angegeben, letzteres mit Stilvorlagen in CSS. Dabei verwendet SVG teilweise eigene, speziell auf graphische Bedürfnisse zugeschnittene Eigenschaften, die in diesem Buch nicht erläutert werden. Andere Eigenschaften von CSS sind hingegen allgemein verwendbar, so auch in SVG. Nur wenige Konstruktionen sind speziell für (X)HTML ausgelegt, die Sprache eignet sich somit auch insbesondere für andere XML-Formate, die vorrangig der Auszeichnung von Text dienen.

Die Verwendung von CSS bietet zudem eine Reihe von weiteren Vorteilen. Zum Beispiel erleichtert es CSS, ein aus vielen Dokumenten bestehendes Projekt einheitlich zu gestalten. Die gemeinsame Stilvorlage für alle Dokumente wird in diesem Fall in einer separaten CSS-Datei notiert und die Dokumente enthalten keine klassischen Formatierungsanweisungen mehr, sondern nur noch Informationen, welche die korrekte Verknüpfung mit der CSS-Datei sicherstellen. Auf diese Weise ist es möglich, das Layout in einer zentralen CSS-Datei nachträglich zu verändern oder verfeinern, ohne in jedem einzelnen Dokument Änderungen vornehmen zu müssen.

Für die professionelle Gestaltung von Dokumenten und großen Projekten noch wichtiger ist der folgende Punkt: CSS ermöglicht es auch, die Darstellung dem jeweiligen Ausgabegerät oder dem Ausgabemedium (zum Beispiel Ausdrucke, Projektion, Sprache und so weiter) entsprechend anzupassen. Das ist nützlich, um zum Beispiel Verweisziele beim Drucken extra aufzuführen oder um für ein Anzeigemedium wie einen Persönlichen Assistenten oder ein Mobiltelephon mit kleinem Bildschirm die Anzeige zu optimieren.

Neben diversen Fähigkeiten im Farb- und Schriftbereich bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

CSS gilt heutzutage als die bevorzugte Stilvorlagensprache für (X)HTML-Dokumente und weitere XML-Formate. Das ebenfalls empfohlene XSL(T), welches auf XML basiert, wird dagegen eher für komplexere Transformationen von Dokumenten verwendet und geht damit noch weit über die Möglichkeiten von CSS hinaus, kann damit auch gravierender den Inhalt manipulieren, nicht nur die Darstellung.

Um CSS zu verwenden, sind keine speziellen Programme nötig. Man kann eine Stilvorlage mit jedem beliebigen Texteditor erstellen (zum Beispiel auch den Notepad unter Windows oder vi unter Linux/Unix) und es dann anschließend darauf in den gewünschten Dokumenten verweisen. Wenn ausreichende (X)HTML-Kenntnisse vorhanden sind, ist die Benutzung von CSS sehr schnell, das heißt in wenigen Stunden oder Tagen, zu erlernen. Der Einarbeitungsaufwand ist also deutlich geringer als bei anderen weiterführenden Werkzeugen und Programmen für Designer.

Die Verarbeitung der Stilvorlage durch das Darstellungsprogramm kann aber auch Probleme aufwerfen: Der Autor und der Anwender sind darauf angewiesen, dass die Programmierer der Darstellungsprogramme die Spezifikationen richtig und vollständig implementieren.

Einige Anbieter entwickeln ihre eigenen proprietären Erweiterungen für CSS, die dann ausschließlich auf dem entsprechenden Programm sichtbar werden. Ein Beispiel sind Überblendeffekte, die nur mit dem Internet Explorer funktionieren. Dabei handelt es sich eigentlich nicht um gültiges CSS, konforme Darstellungsprogramme werden solche Erweiterungen ignorieren. Lediglich um neue Eigenschaften von CSS zu testen, gibt es speziell festgelegte Methoden, um testweise implementierte, nicht spezifizierte Eigenschaften zu kennzeichnen. Diese sollten allerdings nur vorübergehend interpretiert werden, bis entschieden ist, ob oder wie solche Eigenschaften der Empfehlung hinzugefügt werden. Eigenschaften mit solch einer Testnotation eignen sich also nicht für den allgemeinen Gebrauch, lediglich um die Ideen auf Eignung zu testen.