CSS/Anwendung und Praxis/Warum Layouts mit CSS?

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Warum CSS?

[Bearbeiten] Trennung von Inhalt und Design

Der "große Sinn von CSS" besteht in der Trennung von Inhalt und Design. Das hört man oft, stellt sich nichts drunter vor und bastelt dann doch eine besondere Überschrift mit einem inline-style, einen neuen div-container mit einer ganz speziellen id oder Klasse, die später nirgends wieder auftaucht. Das funktioniert auch mehr oder weniger - man wird ohne viel Mühe eine fixe Seite zusammenstellen, die ihren Zweck erfüllt - und vergisst das ganze.

Es ist aber beinahe unmöglich, einen so über die Zeit gewucherten Internetauftritt umzugestalten - man müsste dutzende oder mehr Einzeldateien umschreiben und im Gewusel der Klassen und Elemente wird man sich schnell verlieren. Letztlich dauert die Änderung beinahe länger als die Neuerstellung. Und genau darin liegt die Stärke von CSS: uneingeschränkte Flexibilität, wenn z.B. das Layout nicht mehr zeitgemäß ist oder wenn neue Strukturen, vor allem bei dynamischen Seiten, Änderungen erfordern. Dabei wäre man ohne CSS buchstäblich "verloren im Quelltext".

Nun zum

[Bearbeiten] Layout - am Anfang ohne!

Der erste Gebot von CSS lautet: "am Anfang ohne". Soll heißen - man gestaltet die Seite erst komplett ohne CSS, nur die Container (besser: Dokument-Struktur?), Textabsätze, Überschriften und Ähnliches. Es stellt auch die "allgemeine Gültigkeit" des Layouts sicher - ist die Grundlage an sich stimmig, kann man die Seite zu Allem umgestalten, jeder Fehler schränkt dies wieder ein. Das soll nicht gut aussehen, aber benutzbar sein.

Die einzelnen Elemente werden vom Browser einfach untereinander auf dem Bildschirm angeordnet, und zwar in der Reihenfolge, in der sie in der HTML-Datei aufgeschrieben sind. Die Elemente selbst werden gemäß den Voreinstellungen des Browsers dargestellt; so ist z.B. festgelegt, dass der Hintergrund des Dokuments weiß oder grau darzustellen ist, dass Überschriften in fett und einer Größe von soundsoviel Punkten darzustellen sind.

Als Beispiel eine Webseite, die wir zu Demonstrationszwecken ihrer CSS-Datei beraubt haben:

HTML ohne CSS


[Bearbeiten] CSS - Formatsprache für HTML-Elemente

An diesem Punkt setzen die Cascading Stylesheets ein. Es handelt sich dabei um eine unmittelbare Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 24 Punkt groß sind und mit einem Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden. Schematisch würde dies etwa so aussehen:

Überschrift {
Schriftgröße: 24 Punkt;
Abstand-unten: 16 Punkt;
Rahmenfarbe-oben: grün;
Rahmenart-oben: doppelt
}

Diese und andere Definitionen können Sie aber genauso gut auch für einen beliebigen Text festlegen.

Die nächste Abbildung zeigt, wie die eben gezeigte HTML-Seite mit CSS aussehen soll:

Vorschau-15.jpg

Beachten Sie: Es handelt sich tatsächlich um die gleiche HTML-Datei! Das Aussehen wird hier nur durch eine CSS-Datei verändert.

Die gezeigte Beispielseite stammt übrigens von Jeena Paradies und ist eine unserer Design-Vorlagen.

[Bearbeiten] zentrale Formate für mehrere HTML-Dateien

CSS erlaubt es, Stile, Farben und Formen zu definieren, beispielsweise für alle Überschriften, oder für alle Textabsätze mit einem bestimmten Klassennamen, oder für kursiv ausgezeichneten Text, der innerhalb einer Tabellenzelle vorkommt.


Die zentralen Formate können sich auf eine HTML-Datei beziehen, aber auch in eine externe Style-Datei ausgelagert werden, die man in beliebig viele Seiten einbinden kann. So werden einheitliche Formatvorgaben möglich, und der HTML-Code wird von unnötigem Ballast befreit. Spätere Änderungen am Design können so leicht durchgeführt werden.

In der folgenden Abbildung dient eine einzige CSS-Datei beispielsweise drei HTML-Dateien als Formatvorlage:

Zentrale css datei.png

Die folgende Abbildung zeigt den Zusammenhang zwischen HTML und CSS:

Html und css.png

[Bearbeiten] ein Layout - oder doch mehrere?

Früher wurden Webseiten oft für eine bestimmte Browserversion und eine festgelegte Bildschirmauflösung entwickelt. Da es zwischen den Browsern gravierende Darstellungsunterschiede gab, wurden mittels einer Browserweiche verschiedene Stylesheets geladen.

Heutzutage geht es eher darum, Webseiten auf allen verfügbaren Ausgabegeräten vom Smartphone bis zum Riesen-Monitor gleichermaßen lesbar zu machen. Wenn die Seitenbreite zur Darstellung der Inhalte nicht mehr ausreicht, werden sie automatisch in ein neues, passendes Design verschoben.

[Bearbeiten] siehe auch:

[Bearbeiten] Weblinks


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML