Kopfillustration

Alle Support-Themen im Überblick

 

Einführung in Cascading Stylesheets

Cascading Style Sheets, kurz CSS genannt, enthalten Angaben zur Formatierung und Darstellung der Inhalte einer HTML-Datei. Stylesheets erleichtern uns die Trennung von Form und Inhalt eines Webprojektes.
Sie können in einem einzigen Stylesheet die Formatierung für ein gesamtes Webprojekt definieren. Das hat den Vorteil, dass eine Schrift- oder Formatierungsänderung in nur dieser einen Stylesheet-Datei vorgenommen wird und die komplette Website mit allen dazugehörigen Dateien sofort aktualisiert werden kann.

Stylesheets werden von allen aktuellen Browsern verarbeitet (MS Internet Explorer und Netscape ab Version 4 verstehen zumindest den größten Teil von CSS Version 1). Ab der Version CSS 2 ist auch das Positionieren von Elementen möglich. Das klappt mit älteren Browsern zwar nicht problemlos, aber hier spielt die Zeit für uns. Die nicht standardkonformen Browser haben mittlerweile nur noch einen kleinen Marktanteil.

Um die nachfolgenden Informationen verstehen zu können, müssen Sie mit den grundlegenden Techniken der Webseitenproduktion vertraut sein. Sie müssen HTML-Quellcode zumindest im Groben verstehen oder besser noch HTML-Seiten von Hand mit einem Texteditor schreiben können.

 

CSS Beispiele

Zunächst ein paar einfache Beispiele. So formatieren Sie beispielsweise die Schriftgröße eines Textes:

h1 {font-size: 18 px;}

Im head-Bereich der Datei wird die CSS-Angabe gemacht (der Programmierer spricht vom „deklarieren”) und im body-Bereich (im folgendem Beispiel in der Überschrift <h1>) wird diese Formatierung angewendet. Komplett in einer einfachen HTML-Datei sieht das dann wie folgt aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
h1 {font-size: 18 px;}
</style>
</head>
<body>
<h1>Ein Beispieltext </h1>
</body>
</html>

Natürlich lassen sich nicht nur die Schriftgröße, sondern auch Schriftfarbe, Schriftfamilie und vieles mehr definieren:

<style type="text/css">
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #0000CC;
}
</style>

 

Stylesheetangaben einbinden

In den vorangegangenen Beispielen haben wir die CSS-Anweisungen direkt im head-Bereich der HTML-Seite deklariert. Sinvoller ist es aber, Stylesheetanweisungen in einer zentralen, externen CSS-Datei zu definieren. Eine solche externe CSS-Datei kann mit den folgenden Anweisungen in die HTML-Datei eingebunden werden:

Hinweis: Wenn Sie ein externes Stylesheet über @import einbinden, bleiben alten Browsern wie Netscape 4 diese Anweisungen verborgen.

<link href="externes_Stylesheet.css" rel="stylesheet" type="text/css">
oder
@import url("externes_Stylesheet.css");

Neben der Deklaration im head-Bereich oder dem Einbinden eines externen Stylesheets gibt es noch eine dritte, eher selten genutzte Möglichkeit, CSS-Anweisungen zu deklarieren, nämlich direkt im body-Bereich innerhalb eines HTML-Elementes. Näheres dazu finden Sie unter: http://de.selfhtml.org/css/formate/einbinden.htm .

 

Aufgabe

Mit CSS können Sie Zeilenabstände oder Hintergrundfarben festlegen, Rahmen um Bereiche definieren und vieles mehr. Probieren Sie einfach mal diverse CSS-Eigenschaften aus und lassen Sie Ihrem Spieltrieb freien Lauf. Hinweise dazu finden Sie bei selfhtml unter http://de.selfhtml.org/css/eigenschaften/index.htm

 

Die Syntax

Wie werden CSS-Anweisungen korrekt geschrieben? Lassen Sie uns einen näheren Blick auf die Syntax unserer Stylesheetangaben werfen.

Wenn Sie sich die Anweisung h1 {font-size: 18 px;} anschauen, dann ist "h1" hier der sogenannte Selektor, "font-size" eine Eigenschaft und "18px" der dazugehörige Wert. Die Eigenschaften und ihre Werte stehen in geschweiften Klammern und werden durch ein Semikolon abgeschlossen. Mehrere Stilanweisungen lassen sich getrennt durch Semikola kombinieren:

p {color:blue; backgroundcolor:green;}

Mehrere Selektoren lassen sich durch Kommata getrennt auch auf einmal formatieren:

p, h1, ol {color:blue; backgroundcolor:green;}

Eine gute Angewohnheit ist es, wenn Sie Ihre Stylesheets kommentieren. In Stylesheets werden Kommentare mit den Zeichen /* */ markiert.

/* Kommentieren Sie ausführlich */

Eigene Klassen, class und ID

Es lassen sich aber nicht nur bestehende HTML-Elemente wie <p> oder <h2> als Selektoren verwenden. Sie können auch eigene Klassen definieren wie im folgenden Beispiel:
.wichtig {font-size: 16px;}

Auf den Inhalt kann diese Anweisung wie folgt angewendet werden:
<p class="wichtig"> ... </p>
oder
<div class="wichtig"> ... </div>

(Hinweis: Das DIV-Element wird weiter unten genauer erklärt.)

Neben den Klasen gibt es auch die sogenannten IDs. Über ID formatieren Elemente können in einem HTML-Dokument einmal auftreten, Klassen hingegen können beliebig vielen Elementen innerhalb einer HTML-Datei zugewiesen werden. Im Stylesheet beginnt die ID-Deklaration mit einer Raute, die class-Anweisung beginnt mit einem Punkt.

#vorspann { font-style: italic; }
.wichtig {font-size: 16px;}

 

Strukturen mit SPAN und DIV erstellen

Sie können Bereiche Ihrer HTML-Seite wie bereits gesehen, mit den Selektoren DIV und SPAN formatieren. Mit DIV erzeugen Sie einen neuen Absatz, während SPAN-Elemente mitten in einem Textfluss stehen. Was dann wie folgt aussehen könnte:

<div class="wichtig"> ... </div>

DIV bezeichnet man als Blocklevel-Element und ist an ehesten mit Absatzattributen in DTP-Programmen zu vergleichen. Während SPAN eher mit Zeichenattributen zu vergleichen wäre und als inline-Element bezeichnet wird. Ein mit DIV gekennzeichneter Bereich Ihrer HTML-Datei erzeugt immer einen neuen Absatz und damit einen Zeilenumbruch. Bei einem SPAN-Bereich ist das nicht der Fall.

 

Fragen und Aufgaben

Warum ist es sinnvoller, die CSS-Angaben für Ihr Webprojekt in ein externes Stylesheet auszulagern und nicht in jede einzelne HTML-Datei zu schreiben?

Beschreiben Sie den Unterschied zwischen DIV und SPAN.

Gestalten Sie ein 2-spaltiges Layout mit CSS.

 

Tipps

Schriftgrößen sollten nicht in absoluten Einheiten wie Punkt und nur in Ausnahmefällen in Pixel definiert werden. Benutzerfreundlicher ist die Größenangabe in einer relativen Einheit wie em. In so formatierten Dateien lässt sich die Schrift auch im Internet Explorer skalieren, was für Benutzer mit Sehschwäche sehr hilfreich ist. 1 em entspricht der Standardschriftgröße des Webbrowsers.

Schreiben Sie valides und standardkonformes HTML bzw. XHTML, (nicht nur) wenn Sie mit Stylesheets arbeiten. Es erleichtert die Fehlersuche erheblich. Ein gutes Hilfsmittel zur Überprufung von Webseiten bieten der Validator des W3C oder die Webdeveloper-Toolbar von Firefox.

 

 

CSS für Fortgeschrittene

Nachdem Sie sich mit den Grundlagen beschäftigt haben, folgen jetzt Informationen zu CSS-basierten Layouts.

Das Kastenmodell (Box Model)

Ein CSS-Bereich wird mit dem Box Model als rechteckiger Bereich mit bestimmten Eigenschaften wie Höhe, Breite oder Abstand nach links bzw. oben behandelt. Leider behandet der Internet Explorer bis Version 5.5 (und auch neuere Versionen im sogenannten Quirksmodus) fälschlicherweise die Angabe width als die gesamte Breite eines Elements. In diesem Browser werden entsprechende Elemente zu schmal angezeigt. Wie Sie diesen Fehler umschiffen, sehen Sie weiter unten im Abschnitt Browserweichen und Hacks.

 

CSS-basierte Layouts

Für ein CSS-basiertes Layout sind zunächst folgende Eigenschaften wichtig: position und display für die Art der Anzeige. Top, bottom, left und right für den Abstand zu anderen Elementen. Float und clear, die das Umfließen steuern. Width und height für die Größenangaben. Und der z-index für die Stapelreihenfolge der positionierten Objekte.

Bei der Eigenschaft position können Sie zwischen den Arten static, relative, absolute und fixed wählen. Static ist die Standardeinstellung und muss nicht ausdrücklich angegeben werden. Mit der Option relative verschieben Sie ein Element gegenüber seiner normalen Position um die angegebenen Werte für top, bottom, left und right. Nachfolgende Elemente kümmern sich allerdings nicht um die Verschiebung, so dass das Element eine Lücke entsprechend Ihrer Angaben hinterlässt. Absolute positionierte Elemente werden von der linken oberen Ecke des nächsten Elternelements aus gesehen plaziert, das als absolute, fixed oder relative positioniert wurde. Ein mit der Option fixed positioniertes Element schließlich bewegt sich nicht mit, wenn die Webseite gescrollt wird. Damit lassen sich Seiten erstellen, bei denen beispielsweise ein Navigationsmenü ständig auf der Seite zu sehen ist, was ähnlich aussieht, wie eine Frames-Konstruktion.

Mit der Positionierungsart „absolute” erstellte Objekte scheinen zunächst sehr einfach in der Anwendung zu sein, allerdings ist ein solches Layout sehr unflexibel. Denn der Betrachter kann die Seite nicht problemlos skalieren, da sich Elemente hierbei evtl. übereinander schieben. Layouts, die mit statischer oder relativer Positionierung mit Hilfe der float-Anweisung erstellt werden sind in der Regel leichter zu warten, allerdings muss hier sehr sorgfältig in verschiedenen Browsern getestet werden.

Die float-Eigenschaft rückt Objekte nach links oder rechts. Nachfolgende, nicht floatende Objekte überlagern dabei ein gefloatetes Objekt. Das gilt aber nicht für die Inhalte eines gefloateten Objekts, wenn diese sich innerhalb eines Blockelements befinden. Um zum Beispiel neben ein links gefloatetes-Objekt ein anderes nicht gefloatetes Element rechts daneben zu positionieren, muss dem rechten Element ein linker Außenabstand (margin-left) zugewiesen werden. Sind beide Element links gefloatet, ist dies nicht nötig.

Mit clear beenden Sie die float-Eigenschaft. Leider passt ein in einem Container eingeschlossenes gefloatetes Element die Höhe des umgebenden Containers nicht automatisch an. Eine Lösung für diese Problem finden Sie unter http://www.jassesnee.de/easyclear/ .

Ein zweispaltiges Seitenlayout können Sie nun relativ einfach erzeugen, indem Sie mit der Eigenschaft float: left; beide Spalten direkt nebeneinander anordnen. Um den Spaltenhintergrund einzufärben, empfiehlt es sich Hintergrundgrafiken zu verwenden.

 

Hacks und Browserweichen

Da nicht alle Browser CSS-Angaben korrekt interpretieren, müssen wir bestimmte Anweisungen mit verschiedenen Hacks und Tricks vor einigen Browsern verbergen.

Mit der @import-Weiche schließen Sie ältere Browser, wie den Netscape 4 aus. Der nämlich kann Stylesheets nur über <link href ... einbinden.

Eine Anweisung nur für den Internet Explorer (Win und Mac) bis Version 6 erreichen Sie mit dem Sternchen Hack. Die Anweisung * html {...} ignorieren standardkonforme Browser. Der Internet Explorer hingegen führt diese CSS-Angaben aus.

Mit dem folgenden Hack (der sogenannte „Tantek Hack”) erreichen Sie, dass der Internet Explorer die nachfolgenden Anweisungen nicht interpretiert. Der IE stellt das Element mit einer Breite von 120 Pixeln dar und bricht dann die Verarbeitung ab, während standardkonforme Browser das Element mit einer Breite von 80 Pixeln versehen.

...
width: 120px;
voice-family: "\"}\"";
voice-family:inherit;
width: 80px;
...

Eine weitere Möglichkeit ist es, auf dem Server mit Skriptsprachen wie PHP den Browsertyp zu ermitteln und daraufhin für den Browser spezifische Stylesheets einzubinden.

 

Wie geht es weiter?

Nachden Sie die Grundlagen zum Thema CSS kennengelernt haben, sollten Sie Ihr Wissen ersteinmal anwenden. Denn Probieren geht über Studieren. Machen Sie sich beispielsweise mit Pseudo-Elementen oder den Maßeinheiten vertraut. Informieren Sie sich über das Prinzip der Vererbung in CSS und testen Sie Ihre Werke in verschiedenen Browsern. Außerdem sollten Sie sich ausgiebig mit dem komplexen Thema Positionieren von Elementen und mit CSS-Layouts beschäftigen.

Viel Erfolg!

 

Literaturhinweise und Links

Tricks mit Stylesheets: http://www.drweb.de/csspraxis/
CSS-Referenz zum Nachschlagen: http://de.selfhtml.org/navigation/css.htm
CSS-Unterstützung einzelner Browser (englisch): http://www.westciv.com/style_master/academy/browser_support/index.html
CSS Kompatibilität (deutsch): http://www.css4you.de/browsercomp.html
CSS Kurzreferenz: http://www.ilovejackdaniels.com/css_cheat_sheet.png
Beispiele für Seitenlayout mit CSS: http://www.csszengarden.com
Mehrspaltiges CSS-Layout: http://css-discuss.incutio.com/?page=ThreeColumnLayouts
Framework zur Erstellung flexibler Mehrspaltenlayouts: http://yaml.de/
CSS-Praxis, Kai Laborenz , Gallileo Press, ISBN 3-89842-765-x

 

Letzte Aktualisierung dieser Datei am: 21.6.2007
Autor: Stephan Franke · Impressum und Hinweise zu diesen Seiten · Suche
Diese Seiten wurden produziert von: sfk

Haben Sie Anregungen, Kritik oder Ideen zu dieser Seite? Sie können hier einen Kommentar schreiben.
Ihr Kommentar wird am Ende dieser Seite angefügt.

Bislang wurden zu dieser Seite keine Kommentare geschrieben