CSS Syntax |
CSS Tutorial > SyntaxDie Syntax eines CSS-Statements sieht so aus: Selektor {
Es gibt kein Limit von Eigenschaft:Wert-Paaren die für einen Selektoren angegeben werden können. Es gibt drei große Arten von Selektoren: Typ-Selektoren, class-Selektoren, und ID-Selektoren. Typ-Selektoren sind bereits bestehende (X)HTML-Tags wie zum Beispiel <body> und <h1>. Class- und ID-Selektoren werden vom Benutzer definiert. Wir werden diese beiden Arten von Selektoren in größerem Detail in einem späteren Abschnitt besprechen. . Styles werden normalerweise innerhalb eines Eigenschaft:Wert-Paars geschrieben. Wenn wir zum Beispiel möchten, dass ein bestimmtes Element gelb ist, so können wir das folgende Eigenschaft:Wert-Statement benutzen:
Im obenstehenden Statement ist “color” die Eigenschaft, und “yellow” der Wert. Beachten Sie bitte, dass es sein kann, dass mehrere Werte für eine einzige Eigenschaft gegeben werden können. Dies dient hauptsächlicherweise als Abkürzng – zum Beispiel kann die margin-Eigenschaft bis zu 4 Werte besitzen, jeder gibt die Randgröße auf einer Seite an. GruppierungWenn mehrere Selektoren die gleichen CSS-Eigenschaften miteinander teilen, so können sie zusammen deklariert werden. Dies nennt man "Gruppieren". Wenn zum Beispiel <h1>, <h2>, und <h3> den selben Style haben sollen, dann können sie wie folgt zusammen deklariert werden:
NachfahrenselektorenWir können den Style eines Elements nur dann definieren, wenn es innerhalb eines anderen Elements besteht. Um dies zu erreichen werden wir das Konzept der Nachfahrenselektoren einführen. Die Syntax zur Deklaration eines Nachfahrenselektoren ist: [Eltern-Selektor] [Kind-Selektor] {
Der hier oben definierte Style gilt nur für den Kind-Selektoren, wenn diese sich innerhalb der Eltern-Selektoren befindet. Derartige Statements können mehr als zwei Level haben. Im untenstehenden Statement zum Beispiel,
wird der Text des <b>-Elements innerhalb des <li>-Elements gelb dargestellt. Text, der sich in einem <b>-Element, der sich wiederrum aber nicht in einem <li>-Element befindet, ist davon nicht betroffen. |