CSS lernen – Tutorial, Tipps und Tricks

Cascading Style Sheets (CSS) ermöglicht einfaches Formatieren von Web-Inhalten. So ist es z.B. möglich mit einem Dokument 100 oder mehr Webseiten zu formatieren, ohne diese mit dem kompletten StyleSheet zu füllen. Dies bringt zum einen Platzersparnis (Speicherplatz) und zum anderen auch die Möglichkeit diese Formatierungen schnell ändern zu können, ohne in jede dieser 100 oder mehr Webseiten eingreifen zu müssen.

Notation

Die Notation von Cascading Style Sheets verhält sich etwas anders als etwa die von HTML, XHTML oder allgemein XML. Dabei ist darauf zu achten, dass Anweisungen richtig definiert werden, Verknüpfungen korrekt gesetzt werden und und und …

Verknüfungen

Verknüpfungen verbinden zwei Elemente oder ein Element mit einem Attribut durch einen logischen Zusammenhang. Dies stellt eine (neue) Variante des Elements dar. Die Verknüpfung der beiden bezeichnet diese Variante. Dies lässt es zu, Elemente besser zu definieren. Dabei können z.B. bestimmte Elemente/Elementvarianten ein- oder ausgeschlossen werden.
Allgemein werden Verknüpfungen direkt an den Elementnamen notiert.

Farbe und Hintergrundgestaltung

Die Gestaltung von Dokumenten und Seiten kann einerseits durch Farben (z.B. Textfarbe) und andererseits durch die Gestaltung des Hintergrundes weiter verfeinert und verbessert werden. Auch CSS unterstützt diese Formen der Gestaltung. Dazu wurden die folgenden Eigenschaften definiert:

Textgestaltung

Zur Textgestaltung gehören z.B. Wort- und Buchstabenabstand, aber auch Dekoration oder die Ausrichtung des Textes. Für die Textgestaltung sind dafür in CSS Level 1 die folgenden Eigenschaften gegeben:

Schriftgestaltung

In/Mit CSS und DHTML 4.0 wird darauf hin gearbeitet, dass die meisten Text- und Schriftformatierungen zukünftig nur noch bzw. größtenteils mit CSS gemacht werden. Dazu wurden in CSS Schrifteigenschaften definiert, mit denen die bekannten Elemente aus HTML wie etwa u (unterstrichen), b (fett) oder i (italic/kursiv) ersetzt werden können.

Regeln in CSS

In CSS gibt es verschiedene Regeln, die die Bedeutung sowie die Darstellung von Elementen und Dokumenten beeinflussen. In CSS Level 1 und Level 2 sind die folgenden Regeln beschrieben:

Box-Eigenschaften

CSS definiert für jedes Element des Element-Baumes eine Box. Vereinfacht vorgestellt könnte man sich diese Box wie ein Bild vorstellen. Das Element selbst ist das (gemalte) Bild. Um dieses Bild/Element herum wird (meist) ein Rahmen (engl. Border) gezogen. Zwischen Bild und Rahmen wird der Padding- oder Auffüllbereich gesetzt. Er dient z.B. dazu, dass der Rahmen nicht direkt am Bild “hängt”. Um den Rahmen wiederum wird Bereich definiert, der sich Margin- oder Begrenzungsbereich nennt. Er dient dazu, dass andere Bilder/Elemente einen gewissen Mindestabstand zu unserem Bild haben müssen.

Rahmeneigenschaften

Wie im Kapitel CSS – Box-Eigenschaften schon erwähnt gehört zu den Eigenschaften einer Box auch die Definition von Rahmen, welche diese Box umgeben.

Positionierung

Die Positionierung von Objekten ist eines der großen Anwendungsgebiete/-zwecke von CSS . Mit CSS lassen sich (fast) alle Elemente (fast) beliebig verteilen, darstellen und positionieren.

Pseudo-Klassen

Pseudo-Klassen sind Klassifizierungen, die einen Zustand oder eine Eigenschaft eines Elements beschreiben. Sie werden an den Elementnamen bzw. die vorhergehende Klassifizierung angehängt. In CSS Level 1 werden dabei 3 verschiedene Pseudo-Klassen beschrieben, die sich alle auf ein Element beziehen: A (Link/Anker).
In CSS Level 2 sind es dann schon 7.

Pseudo-Elemente

Pseudo-Elemente sind Klassifizierungen, die einen Teil eines Elements beschreiben. “Pseudo” heißen sie deshalb, weil es sich dabei nicht um ein “echtes”, also in derDTDdefiniertes, Element handelt. Sie werden an den Elementnamen bzw. die Klassifizierung angehängt. In CSS Level 1 werden dabei 2, in CSS Level 2 4 (2 weitere), beschrieben.

Tabellen

Zur Beschreibung von Tabellen sind auch in CSS Eigenschaften definiert. CSS Level 1 beschreibt noch keine Tabelleneigenschaften.

Aufrufe

In CSS gibt es verschiedene Aufrufe. Diese dienen meist dazu, Dinge ein zu gliedern oder besser zu bestimmen. In CSS Level 1 und Level 2 sind die folgenden Aufrufe beschrieben:

Schriftdefinition

Seit CSS Level 2 ist es möglich eigene Schrifarten zu definieren, zu importieren und zu gestalten. Dazu werden die folgenden Aufrufe und Eigenschaften zur Verfügung gestellt:

Seitendefinition

In CSS Level 2 werden erstmals Eigenschaften sowie ein Aufruf zur Definition der Seite an sich beschrieben. Mit ihnen soll es möglich sein, beispielsweise einen Ausdruck des Dokuments genau zu beschreiben, um so bessere Resultat zu erzielen.

Benutzereigenschaften

In CSS (ab Level 2) sind auch einige Eigenschaften definiert, die die Benutzerschnittstellen (also weniger das Dokument an sich, als vielmehr mehr das Programm, mit dem es dargestellt wird) beschreiben und somit verändern können.

Counter & Listen

In CSS werden neue Mechanismen zur Verfügung gestellt, die Aufzählungen deutlich anpassungsfähiger machen sollen. Dazu gehören zum einen die neu geschaffenen Counter (counter = engl. Zähler) bzw. Counter-Eigenschaften und zum anderen die Listen-Eigenschaften.

Aurale Gestaltung

CSS Level 2 definiert erstmals auch Eigenschaften die die aurale Wiedergabe eines Elements beschreiben. Diese Eigenschaften sollen z.B. von Sprach-Browsern verwendet werden um die Gestaltung von Texten durch akustische Effekte zu verbessern und somit dem Besucher vielleicht einen spannerenden oder interessanteren Inhalt zu bieten.

Inhaltserzeugung

Seit CSS Level 2 ist es möglich, Inhalt nachträglich in ein Element einfügen zu lassen, ohne dazu den Element-Quelltext verändern zu müssen. Das Ganze war/ist dazu gedacht, dass beispielsweise wiederkehrende Inhalte von Elementen (z.B. Anführungsstriche am Anfang und Ende eines Zitates) nur einmal definiert werden müssen/brauchen und dennoch bei allen Elementen zur Verfügung stehen.

Microsoft Layouteigenschaften

Microsoft hat für das Layout weitere Eigenschaften eingeführt, die nicht in einer der beiden CSS Spezifikationen enthalten sind.

Microsoft Texteigenschaften

Microsoft hat für die Gestaltung von Texten weitere Eigenschaften eingeführt, die nicht in einer der beiden CSS Spezifikationen enthalten sind. Diese Eigenschaften sind: