CSS Syntax


CSS Tutorial  >  Syntax

Die Syntax eines CSS-Statements sieht so aus:

Selektor {
  Eigenschaft:Wert;
  ...
}

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:

color:yellow;

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.

Gruppierung

Wenn 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:

h1 h2 h3 {
  Eigenschaft:Wert;
  ...
}

Nachfahrenselektoren

Wir 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] {
  Eigenschaft:Wert;
  ...
}

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,

li b {
  color:yellow;
}

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.

Folgende Seite: Apply CSS




Copyright © 2021   1keydata.com   Alle Rechte vorbehalten

老湿机69福利区无码_老子影院午夜伦无码_开心亚洲五月丁香五月