Selektoren
Mit Selektoren geben Sie an, für welche HTML-Elemente die nachfolgende CSS-Definition (in geschweiften Klammern "{ ...CSS-Befehle ... }") gelten soll.
Dies ist bei zentralen Formatierungen für HTML-Dateien und bei Formatierungen in separaten CSS-Dateien notwendig. In den folgenden Beispielen werden die verschiedenen Möglichkeiten der Angabe von Selektoren beschrieben !
Die CSS-Definitionen folgen den Selektoren immer in geschweiften Klammern ! Hier wird die gewünschte CSS-Eigenschaft (z.Bsp.: "color") und der gewünschte Wert (z.Bsp.: "blue" oder "#0000FF"), getrennt durch Doppelpunkt, angegeben. Die Schreibweise sollte ohne Leerzeichen erfolgen, da ältere Browser ansonsten die Definition überlesen könnten!
Mehrere Definitionen werden durch Semikolon getrennt (bei der Letzten kann dies auch entfallen).
Also besser so: {color:#0000FF;background:Silver},
als so: {color: #0000FF; background: Silver}
| Einzelne HTML-Elemente werden im nebenstehenden Beispiel formatiert. Im Beispiel finden Sie 2 Selektoren. Zum Einen wird mit dem Selektor "body" die Hintergundfarbe im gesamten Body-Bereich definiert. Mit dem Selektor "h1" wird das "H1-Element" formatiert. |
Überschrift/H1 |
|
| 2 oder mehr HTML-Elemente können mit der gleichen Formatierung ausgestattet werden, ohne diese getrennt zu formatieren. Die gewünschten Selektoren werden dann lediglich, durch Komma getrennt, vor die entsprechende CSS-Definition geschrieben. Im nebenstehenden Beispiel wird ein "p"- und ein "li" (Liste)- Element in gleicher Weise definiert. |
Dieser Text hat keine Formatierung Hier folgt eine formatierte Liste
|
|
| Verschachtelte HTML-Elemente sind in diesem Beispiel formatiert. Das heisst, ein innerhalb eines anderen HTML-Elementes liegendes Element übernimmt die Eigenschften des übergordneten Elementes und fügt seine eigenen Eigenschaften noch hinzu. Im Beispiel liegt innerhalb des "h-Elementes" ein "i-Element". Ein zweites "i-Element" liegt ausserhalb und wird ganz normal ausgegeben. Die Formatierung erfolgt hier in ähnlicher Weise, wie im vorherigen Beispiel. Nur hier erfolgt die Trennung durch ein Leerzeichen ! |
In diesem H3-Element liegt ein I-Element verschachteltDies ist ein ausserhalb liegendes I-Element und wird ganz normal ausgegeben |
|
