Sie sind hier: Startseite » CSS-Tutorials » 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 seperaten 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 |
|
