Grundlagen CSS
Ganz schön verschachtelt
...wozu eigentlich "verschachteln"?? Und vor allem "WAS"? Nun, beispielsweise, weil uns gerade eben erst eingefallen ist, dass es gar nicht ausreicht, ein "p-Tag" zu definieren, welches uns orangefarbene Schrift liefert, denn uns ist da ein Sonderfall in den Sinn gekommen....
Noch mehr Selektoren
Kapitel 5
Beim Formatieren unseres Dokumentes haben wir festgestellt, dass wir einen Bereich brauchen, innerhalb dessen alle "p-Tags" ausser in "orange" zusätzlich "kursiv dargestellt werden sollen, weil wir beispielsweise Zitate in einer besonderen Form hervorheben wollen. Hiefür steht uns das Element blockquote zur Verfügung. Dieses Element wird auch gerne verwendet, um Einrückungen im Text zu erzeugen.
Beispiel
(Zitate besonders hervorheben)
In der CSS definieren wir dazu zunächst einmal folgendes:
blockquote p { font-style:italic; color:#FF6600}
Zuerst das parent-Element blockquote, dann das child-Element p und danach die zuzuweisenden Eigenschaften.
Im HTML-Dokument sieht die Syntax dann wie folgt aus: Um das Ergebnis zu verdeutlichen, zitiere ich an dieser Stelle einen kurzen Beispiel-Absatz von self-html.
<blockquote>
<p>Genau wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich also um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. </p>
</blockquote>
Und DAS kommt dabei heraus:
Genau wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich also um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard.
Wir haben also damit erreicht, dass innerhalb des blockquote-Elementes alle "p-Tags" eingerückt, orange und kursiv dargestellt werden, während alle "p-Tags" ausserhalb von blockquote weiterhin - wie vordefiniert - zwar in orange, aber nicht kursiv und nicht eingerückt erscheinen.
Im nächsten Kapitel geht es dann um sogenannte "Pseudoformte" und um span und div.