033.2 Lektion 1

Einer der Vorteile von CSS ist, dass Sie keine individuellen Regeln für Elemente mit demselben Stil schreiben müssen. Ein Sternchen wendet die Regel auf alle Elemente auf der Webseite an, wie im folgenden Beispiel gezeigt:

Der Selektor * ist nicht die einzige Methode, um eine Stilregel auf alle Elemente der Seite anzuwenden. Ein Selektor, der mit dem Tag-Namen eines Elements übereinstimmt, wird als Typselektor bezeichnet, so dass jeder HTML-Tag-Name wie body, p, table, em usw. als Selektor dienen kann. In CSS wird der Stil des übergeordneten Elements an seine untergeordneten Elemente vererbt. In der Praxis hat also der Selektor * die gleiche Wirkung wie die Anwendung einer Regel auf das Element body:

Darüber hinaus ermöglicht die Kaskadierungsfunktion von CSS eine Feinabstimmung der vererbten Eigenschaften eines Elements. Sie können eine allgemeine CSS-Regel schreiben, die für alle Elemente auf der Seite gilt, und dann Regeln für bestimmte Elemente oder Elementgruppen ergänzen.

Wenn dasselbe Element zwei oder mehr widersprüchlichen Regeln unterliegt, wendet der Browser die Regel des spezifischsten Selektors an. Nehmen Sie die folgenden CSS-Regeln als Beispiel:

Der Browser wendet die Stile color: purple und font-size: large auf alle Elemente innerhalb des Elements body an. Gibt es jedoch li-Elemente in der Seite, wird der Browser den Stil font-size: large durch den Stil font-size: small ersetzen, da der li-Selektor eine engere Beziehung zum li-Element hat als der body-Selektor.

CSS schränkt die Anzahl gleichwertiger Selektoren in einem Stylesheet nicht ein, so dass Sie zwei oder mehr Regeln mit demselben Selektor schreiben können:

In diesem Fall sind beide Regeln gleichermaßen spezifisch für das Element li. Der Browser kann jedoch keine widersprüchlichen Regeln anwenden und wählt daher jene, die in der CSS-Datei weiter unten steht. Um Verwirrung zu vermeiden, empfiehlt es sich, alle Eigenschaften, die denselben Selektor verwenden, in Gruppen zusammenzufassen.

Die Reihenfolge, in der die Regeln im Stylesheet erscheinen, wirkt sich darauf aus, wie sie im Dokument angewendet werden, aber Sie können dieses Verhalten durch eine important-Regel außer Kraft setzen. Wollen Sie aus irgendeinem Grund die beiden getrennten li-Regeln beibehalten, aber die Anwendung der ersten statt der zweiten Regel erzwingen, markieren Sie die erste Regel als important:

Vorsicht bei mit !important gekennzeichneten Regeln! Sie unterbrechen die natürliche Kaskadierung des Stylesheets und machen es schwieriger, Probleme innerhalb der CSS-Datei zu finden und zu korrigieren.

Wir haben gesehen, dass wir bestimmte geerbte Eigenschaften mit Selektoren ändern, die bestimmten Tags entsprechen. In der Regel müssen wir jedoch unterschiedliche Stile für Elemente desselben Typs verwenden.

Sie integrieren Attribute von HTML-Tags in Selektoren, um die Menge der Elemente, auf die sie sich beziehen, einzuschränken. Eine HTML-Seite hat beispielsweise zwei Arten von ungeordneten Listen (<ul>): eine dient oben auf der Seite als Menü zu den Abschnitten der Website, die anderen als herkömmliche Listen im Body:

Standardmäßig hat jedes Listenelement einen schwarzen Kreis auf der linken Seite. Vielleicht möchten Sie die Kreise in der Menüliste entfernen, während Sie sie in anderen Liste belassen. Der Selektor li verbietet sich, da dadurch auch die Kreise in den Listen im Body verschwinden. Sie müssen dem Browser mitteilen, dass er nur die Listenelemente der einen Liste ändert, nicht aber die der anderen.

Es gibt mehrere Möglichkeiten, Selektoren für bestimmte Elemente auf der Seite zu schreiben. Wie bereits erwähnt, gehen wir dazu zunächst über Attribute der Elemente. Für dieses Beispiel nutzen wir das Attribut id, um nur die oberste Liste anzugeben.

Das Attribut id weist dem entsprechenden Element einen eindeutigen Bezeichner zu, den wir als Selektorteil der CSS-Regel nutzen. Bevor Sie die CSS-Regel schreiben, bearbeiten Sie die HTML-Beispieldatei und fügen id="topmenu" zum Element ul für das obere Menü hinzu:

Es gibt bereits ein link-Element im head-Abschnitt des HTML-Dokuments, das auf die Stylesheet-Datei style.css im selben Verzeichnis verweist, so dass wir die folgenden CSS-Regeln hinzufügen:

Das Hash-Zeichen bezeichnet in einem Selektor nach einem Element eine ID (ohne Leerzeichen). Der Tag-Name links von der Raute ist optional, da es kein anderes Element mit derselben ID geben wird. Sie könnten den Selektor auch einfach als #topmenu angeben.

Auch wenn list-style-type keine direkte Eigenschaft des ul-Elements ist, werden die CSS-Eigenschaften des übergeordneten Elements an seine Kinder vererbt, so dass die untergeordneten li-Elemente den dem ul-Element zugewiesenen Stil erben.

Nicht alle Elemente haben eine ID, über die sie sich auswählen lassen. Tatsächlich werden nur von wenigen wichtigen Layoutelementen auf einer Seite IDs erwartet. Nehmen Sie z.B. die Listen von Planeten im Beispielcode: Obwohl es möglich wäre, jedem einzelnen sich wiederholenden Element eindeutige IDs zuzuweisen, ist diese Methode für längere Seiten mit vielen Inhalten nicht praktikabel. Stattdessen nutzen wir die ID des übergeordneten div-Elements als Selektor, um die Eigenschaften seiner inneren Elemente zu ändern.

Das div-Element hat jedoch keinen direkten Bezug zu HTML-Listen, so dass das Hinzufügen der Eigenschaft list-style-type keine Auswirkungen auf seine Kinder hat. Um den schwarzen Kreis in den Listen innerhalb des div-Elements in einen hohlen Kreis umzuwandeln, sollten wir einen Nachfahrenselektor verwenden:

Der Selektor #content ul wird als Nachfahrenselektor (Descendant Selector) bezeichnet, weil er nur mit den ul-Elementen übereinstimmt, die Kinder des Elements sind, dessen ID content lautet. Wir können so viele Abstufungen wie nötig vornehmen. Zum Beispiel würde #content ul li nur für die li-Elemente gelten, die Nachkommen von ul-Elementen sind, die wiederum Nachkommen des Elements sind, dessen ID content ist. In diesem Beispiel hat der längere Selektor jedoch dieselbe Wirkung wie #content ul, da die li-Elemente die CSS-Eigenschaften erben, die für ihr übergeordnetes ul gelten. Nachfahrenselektoren sind eine wichtige Technik, wenn das Seitenlayout komplexer wird.

Nehmen wir an, Sie möchten die Eigenschaft font-style der Listenelemente in der Liste topmenu und in der Liste im footer div ändern und die Schrift schräg (oblique) setzen. Sie können nicht einfach eine CSS-Regel mit ul als Selektor schreiben, da dies auch die Listenelemente im content div verändern würde. Bisher haben wir CSS-Eigenschaften über jeweils nur einen Selektor geändert und können diese Methode auch für diese Aufgabe anwenden:

Getrennte Selektoren sind jedoch nicht die einzige Möglichkeit. Mit CSS können wir Selektoren, die einen oder mehrere Stile gemeinsam haben, in einer durch Kommata getrennten Selektorenliste zusammenfassen:

Durch die Gruppierung von Selektoren entfällt der zusätzliche Aufwand für die Erstellung doppelter Stile. Außerdem möchten Sie die Eigenschaft möglicherweise in Zukunft erneut ändern und müssen sich dann nicht an all die verschiedenen Stellen erinnern.

CSS-Selektoren können auch dynamischen Zuständen von Elementen entsprechen. Diese Selektoren sind besonders nützlich für interaktive Elemente, wie z.B. Hyperlinks. Sie möchten vielleicht, dass Hyperlinks erscheinen, wenn der Mauszeiger darüber fährt, um die Aufmerksamkeit des Besuchers darauf zu lenken.

Zurück zu unserer Beispielseite: Wir entfernen die Unterstreichungen aus den Links im oberen Menü und zeigen nur dann eine Linie an, wenn der Mauszeiger über den entsprechenden Link bewegt wird. Dazu schreiben wir zunächst eine Regel, um die Unterstreichung aus den Links im oberen Menü zu entfernen:

Dann nutzen wir die Pseudoklasse :hover für dieselben Elemente, um eine CSS-Regel zu erstellen, die nur gilt, wenn sich der Mauszeiger über dem entsprechenden Element befindet:

Der Pseudoklassenselektor :hover akzeptiert alle CSS-Eigenschaften der herkömmlichen CSS-Regeln. Zu den weiteren Pseudoklassen gehören :visited, das Hyperlinks entspricht, die bereits besucht wurden, und :focus, das Formularelementen entspricht, die den Fokus haben.