Warning: Undefined array key "HTTP_REFERER" in /home/www/tipp/websites/tracker_log.php on line 191


CSS - Style-Definitionen in HTML anwenden

CSS-Layout - Änderungen bei reduziertem Zeitaufwand

Ursprünglich wurden die einzelnen HTML-Elemente einer Webseite mit Hilfe von Attributen direkt im HTML-Tag formatiert. Eine schnelle Änderung des Layouts war so jedoch nicht möglich. Jede einzelne Formatierung mußte im Quelltext gesucht und geändert werden. Das konnte, vor allem bei Websites größeren Umfanges, sehr zeitaufwendig sein. HTML im Zusammenspiel mit CSS bietet für dieses Problem die perfekte Lösung.

Um das Layout einer kompletten Website, getrennt vom HTML-Quellcode jeder einzelnen Unterseite, leicht bearbeiten zu können, werden heute CSS-Anweisungen in die HTML-Dateien integriert. Dafür gibt es folgende drei Möglichkeiten, die auch gut untereinander kombiniert werden können:

Lösungen für alte Browser finden

Eine Formatierung mit CSS-Anweisungen hat nicht nur Vorteile sondern bringt auch einige Unannehmlichkeiten mit sich. Ältere Browser können nur sehr wenige bis gar keine CSS-Anweisungen umsetzen und so taten sich in der Vergangenheit viele Webdesigner schwer komplett auf Layouts in CSS umzustellen, wollten sie doch verständlicherweise nicht riskieren, dass Ihr Layout in einigen Browsern schlecht dargestellt wird oder die Website vielleicht gar nicht benutzt werden kann. Inzwischen kommen mit diesen alten Browsern nur noch sehr wenige Besucher auf die Webseiten und auch für diese gibt es Lösungen, sodass diese Besucher mit alten Browsern den Inhalt der Webseiten zumindest gut lesen können auch wenn das Design nicht den Wünschen des Webdesigners entspricht. Dafür werden separate Stylesheets geschrieben, und zusätzlich zum eigentlichen Stylesheet in die Webseiten eingebunden, die nur diese alten Browser interpretieren. Alte Browser kommplett zu ignorieren wollen wir nicht empfehlen, da es akzeptable Lösungen gibt und jeder verlorene Besucher auch ein verlorener Kunde sein kann.

Vom Tabellenlayout zur CSS-Formatierung

Auch die Browser der neueren Generation sind nicht alle fehlerfrei und setzen nicht alle CSS-Anweisungen gleich aussehend um, was es dem Webdesigner nicht unbedingt leicht macht, sich für ein komplettes Layout in CSS zu entscheiden. Die einzelnen Elemente einer Website über CSS zu formatieren klappt schon seit geraumer Zeit ganz gut, aber ganz ohne den stützenden Rahmen einer Tabelle auszukommen, in dem die Hauptelemente wie Navigation, Kopf, Fuß und Hauptinhalt der Webseiten gut positioniert werden können, erfordert schon etwas Überwindung.

Aller Anfang ist wie immer schwer. Haben Sie sich erst einmal dazu durchgerungen CSS einzusetzen, findet sich für fast alles eine Lösung. Können Sie sich noch nicht dazu entschließen komplett auf CSS umzustellen ist dies kein Problem. Beginnen Sie einfach mit der Formatierung der einzelnen Elemente der Website. Im Laufe der Zeit werden Sie die Vorzüge der CSS-Formatierung sicher zu schätzen wissen und sich auch an aufwendigere Layouts, ganz in CSS wagen. In Zukunft sollten Sie zumindest anstreben auf die zu den logischen Elementen zählenden Tabellenelemente zu Gestaltungszwecken zu verzichten.

Externe Stylesheets anlegen und aufrufen

Externe Stylesheets werden mittels

<head>
<link rel="stylesheet" type="text/css" href="anweisung.css">
</head>

in der Html-Datei eingebunden. Da HTML-Dateien, die das Stylesheet aufrufen, auch in Verzeichnissen liegen können ist zu beachten, dass der relative Dateipfad fehlerfrei angegeben wird. Auch das Stylesheet kann in jedem beliebigen Verzeichnis abgelegt werden.

Die im Stylesheet vorgenommenen Formatierungen werden durch das Einbinden im head, dieser aufrufenden Datei zugänglich gemacht. Die anweisung.css kann natürlich nach eigenem Wunsch benannt werden. Die Endung sollte jedoch .css lauten. Sie wird in einem normalen Texteditor, beispielsweise Notepad, zunächst als leere Datei, ohne jeglichen einleitenden Quellcode angelegt, in die anschließend alle Formatdefinitionen eingetragen werden, die auf die gesamte Website angewendet werden sollen.

Ebenfalls können mehrere Stylesheets in folgender Form in die HTML-Dateien eingebunden werden.

<head>
<link rel="stylesheet" type="text/css" href="allgemein.css">
<link rel="stylesheet" type="text/css" href="zusatz.css">
</head>

Sinnvoll ist dies bei großen Webprojekten, bei denen nur ein Teil der Webseiten die Formatierungen der zusatz.css benötigt. In der allgemein.css stehen die Anweisungen, die auf die Elemente aller Webseiten des Projektes angewendet werden sollen. Es sollte jedoch bedacht werden, dass eine zusätzlich zu ladende CSS-Datei auch eine zusätzliche Anfrage an den Server bedeutet. Deshalb sollte dies nur bei großen Stylesheets genutzt werden, die sonst zu unübersichtlich sind.

Den Aufruf der externen Stylesheets verstehen auch viele alte Browser wie beispielsweise der Netscape 4.x, der bei der CSS-Formatierung einiges an Nerven kosten kann. Er interpretiert viele Formatierungen anders als andere Browser oder fehlerhaft. Es kann sogar passieren, dass die Seite mit den vorgegebenen Formatierungen gar nicht dargestellt werden kann. Deshalb kann es sinnvoll sein, ihn und weitere veraltete Browser von den Formatierungen auszuschließen oder eine separate Datei mit Grundformatierungen auszustatten, die auch ältere Browser problemlos darstellen können. Eine zusätzliche CSS-Datei kann die Formatdefinitionen enthalten, die nur die modernen Browser darstellen können. Diese wird über @import im head aufgerufen. Diesen @import-Befehl können die älteren Browser nicht ausführen und werden nur mit der Grundformatierung aus der zentralen CSS-Datei versorgt.

HTML-Elemente Formatieren

Formatierungen für Html-Elemente wie body, p, td oder ähnliches werden in der Art notiert:

Selektor {attribut:wert;}
Beispiel:
body {font-size:0.95em;}
h1 {font-size:1.2em; color:#F00;}