Websiteentwicklung: CSS: Aufbau

Aus Wikibooks

Inhaltsverzeichnis

1 Aufbau

[Bearbeiten] Aufbau

[Bearbeiten] Selektoren

Ein Selektor hat die Aufgabe, das gewünschte Element auszuwählen (selektieren). In einem HTML-Dokument wäre so ein Element (engl. tag) z.B. ein <p>-Element.

Die zu einem Selektor passende CSS-Notation würde so aussehen:

Syntax

Selektor { Eigenschaft: Wert; }

Am einfachsten lässt sich dies mit einem Beispiel veranschaulichen:

p { color: blue; }

Diese Definition würde nun alle p-Elemente in einem Dokument ansprechen und die Textfarbe blau gestalten.

Es könnte aber vorkommen, dass man in einem HTML-Dokument mehrere p-Elemente hat, die man unterschiedlich definieren will. Nehmen wir als Beispiel einen Einleitungsabsatz und den normalen Absatz für die restliche Seite. Man könnte nun anfangen, diese Elemente einzeln direkt in ihrem Tag mit style="Eigenschaft: Wert;" zu definieren. Das ganze würde aber dann umständlich, wenn man diese Elemente verändern möchte: Man müsste jedes einzeln verändern. Hier kommen die Klassen ins Spiel. Eine Klasse ermöglicht es, mehrere Elemente des selben Typs anders zu definieren.

Syntax

Selektor.Klasse { Eigenschaft: Wert; }

Die Syntax ist - bis auf die Klasse - gleich aufgebaut wie die einfache Selektor-Definition. Das ganze auf unser p-Element von oben angewandt würde so aussehen:

p { color: red; }
p.einleitung { color: blue }

Diese Regeln weisen allen p-Elementen die rote Textfarbe zu und nur noch das p-Element mit der Klasse "einleitung" bekommt stattdessen eine blaue Textfarbe. Nun fehlt noch die Verbindung der CSS-Regel mit dem HTML-Element. Dies löst man mit class="Klasse". Auf unser Beispiel angewandt würde die HTML-Datei so aussehen:

HTML-Code

<p class="einleitung">Ich bin die Einleitung.</p>

Übrigens: Wenn man in der CSS-Datei nur einen Selektor ohne Klasse verwendet und im HTML-Teil eine Klasse definiert, selektiert der Selektor trotzdem auch dieses Element.

[Bearbeiten] Pseudo-Klassen

Wenn wir beim obigen Beispiel davon ausgehen, dass nur der erste Absatz, also der Einleitungsabsatz, gesondert dargestellt werden soll, alle nachfolgenden Absätze aber der Standarddefinition entsprechen sollen, kann man dies auch über die Pseudo-Klasse :first-child lösen. In der HTML-Datei wird dazu keine spezielle Deklaration benötigt und das CSS würde dann wie folgt aussehen:

p { color: red; }
p:first-child { color: blue }

[Bearbeiten] Identifizierer

Man kann Elemente statt über Klassen auch über Identifizierer (IDs) adressierbar machen.

Syntax

#ID { Eigenschaft: Wert; }

Auch dies lässt sich am besten anhand unserem Beispiel darstellen:

#eins { color: blue; }

HTML-Code

<p id="eins">Ich bin die Einleitung.</p>

So sehr es wohl reizt, eine ID numerisch zu halten, so unerlaubt ist es trotzdem. Wenn eine ID mit einer Ziffer beginnt, werden Sie insbesondere im IE wunderliche Phänomene erleben können.

[Bearbeiten] Kommentare

Selbstverständlich sollten Sie sich die Zeit nehmen Ihre Definitionen zu kommentieren. Der Nächste, der Ihre CSS-Datei bearbeiten muss, wird es Ihnen danken.

Kommentare beginnen immer mit einem Schrägstrich gefolgt von einem Stern und enden mit den gleichen Zeichen in umgekehrter Reihenfolge:

Syntax