Kurzschreibweise von Eigenschaften

Kurzschreibweise von Eigenschaften sind CSS-Eigenschaften, mit denen Sie die Werte mehrerer anderer CSS-Eigenschaften gleichzeitig festlegen können. Durch die Verwendung einer Kurzschreibweise können Sie kompaktere (und oft besser lesbare) Stylesheets schreiben und dabei Zeit und Energie sparen.

Die CSS-Spezifikation definiert Kurzschreibweisen, um die Definition gemeinsamer Eigenschaften, die auf dasselbe Thema wirken, zu gruppieren. Zum Beispiel ist die CSS-background-Eigenschaft eine Kurzschreibweise, die in der Lage ist, die Werte von background-color, background-image, background-repeat und background-position zu definieren. Ebenso können die häufigsten schriftbezogenen Eigenschaften mit der Kurzschreibweise font definiert werden, und die verschiedenen Ränder um eine Box können mit der Kurzschreibweise margin definiert werden.

Schwierige Randfälle

Es gibt einige Randfälle, die bei der Verwendung von Kurzschreibweisen beachtet werden müssen.

Auslassen von Eigenschaften

Ein Wert, der nicht angegeben wird, wird auf seinen Anfangswert gesetzt. Das bedeutet, dass er zuvor gesetzte Werte überschreibt. Zum Beispiel:

css
p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}

Dies wird die Farbe des Hintergrunds nicht auf red, sondern auf den Standardwert für background-color, der transparent ist, setzen.

Nur die individuellen Eigenschaftswerte können erben. Da fehlende Werte durch ihren Anfangswert ersetzt werden, ist es unmöglich, das Erben von individuellen Eigenschaften durch Auslassen zu erlauben. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, aber nur als Ganzes, nicht als ein Schlüsselwort für einen oder anderen Wert. Das bedeutet, dass der einzige Weg, um einen bestimmten Wert vererbbar zu machen, die Langschreibweise der Eigenschaft mit dem Schlüsselwort inherit ist.

Reihenfolge von Eigenschaften

Kurzschreibweisen versuchen, keine bestimmte Reihenfolge für die Werte der Eigenschaften, die sie ersetzen, zu erzwingen. Dies funktioniert gut, wenn diese Eigenschaften Werte unterschiedlicher Typen verwenden, da die Reihenfolge keine Bedeutung hat, aber es funktioniert nicht so einfach, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle hier sind:

Kanten einer Box

Kurzschreibweisen für Eigenschaften, die sich auf die Kanten einer Box beziehen, wie border-style, margin oder padding, verwenden immer eine konsistente 1-zu-4-Wert-Syntax, die diese Kanten darstellt:

  • 1-Wert-Syntax: border-width: 1em — Der einzelne Wert repräsentiert alle Kanten: Boxkanten mit Ein-Wert-Syntax

  • 2-Werte-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die vertikalen, also obere und untere, Kanten, der zweite die horizontalen, also linke und rechte: Boxkanten mit Zwei-Werte-Syntax

  • 3-Werte-Syntax: border-width: 1em 2em 3em — Der erste Wert repräsentiert die obere Kante, der zweite die horizontalen, also linke und rechte, und der dritte Wert die untere Kante: Boxkanten mit Drei-Werte-Syntax

  • 4-Werte-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere, rechte, untere und linke Kante jeweils in dieser Reihenfolge, also im Uhrzeigersinn beginnend an der Oberseite: Boxkanten mit Vier-Werte-Syntax Der Anfangsbuchstabe von Top-Right-Bottom-Left entspricht der Reihenfolge der Konsonanten des Wortes trouble: TRBL. Sie können es sich auch als die Reihenfolge merken, in der die Zeiger auf einer Uhr rotieren würden: 1em beginnt in der 12-Uhr-Position, dann 2em in der 3-Uhr-Position, dann 3em in der 6-Uhr-Position und 4em in der 9-Uhr-Position.

Ecken einer Box

Ähnlich verwenden Kurzschreibweisen für Eigenschaften, die sich auf die Ecken einer Box beziehen, wie border-radius, immer eine konsistente 1-zu-4-Wert-Syntax, die diese Ecken darstellt:

  • 1-Wert-Syntax: border-radius: 1em — Der einzelne Wert repräsentiert alle Ecken: Boxecken mit Ein-Wert-Syntax

  • 2-Werte-Syntax: border-radius: 1em 2em — Der erste Wert repräsentiert die obere linke und untere rechte Ecke, der zweite die obere rechte und untere linke: Boxecken mit Zwei-Werte-Syntax

  • 3-Werte-Syntax: border-radius: 1em 2em 3em — Der erste Wert repräsentiert die obere linke Ecke, der zweite die obere rechte und untere linke und der dritte Wert die untere rechte Ecke: Boxecken mit Drei-Werte-Syntax

  • 4-Werte-Syntax: border-radius: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere linke, obere rechte, untere rechte und untere linke Ecke jeweils in dieser Reihenfolge, also im Uhrzeigersinn beginnend an der oberen linken Ecke: Boxecken mit Vier-Werte-Syntax

Hintergrund-Eigenschaften

Betrachten Sie einen Hintergrund mit den folgenden Eigenschaften

css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

Diese vier Deklarationen können auf eine einzige verkürzt werden:

css
background: #000 url(images/bg.gif) no-repeat left top;

(Die Kurzform entspricht tatsächlich den obigen Langform-Eigenschaften plus background-attachment: scroll und in CSS3 einigen zusätzlichen Eigenschaften.)

Weitere detaillierte Informationen, einschließlich CSS3-Eigenschaften, finden Sie unter background.

Schrift-Eigenschaften

Betrachten Sie die folgenden Deklarationen:

css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;

Diese 5 Anweisungen können wie folgt verkürzt werden:

css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;

Diese Kurzform-Deklaration entspricht tatsächlich den oben genannten Langform-Deklarationen plus font-variant: normal, font-size-adjust: none und font-stretch: normal.

Rahmen-Eigenschaften

Bei Rahmen können Breite, Farbe und Stil in eine Erklärung vereinfacht werden. Beispielsweise betrachten Sie folgendes CSS:

css
border-width: 1px;
border-style: solid;
border-color: #000;

Es kann vereinfacht werden zu:

css
border: 1px solid #000;

Rand- und Auffüllungseigenschaften

Die Kurzschreibweise der Werte für Rand und Auffüllung funktioniert ähnlich; die Eigenschaft margin ermöglicht es, Kurzformwerte mit einem, zwei, drei oder vier Werten anzugeben. Betrachten Sie die folgenden CSS-Deklarationen:

css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

Sie sind gleichbedeutend mit der folgenden Deklaration, die die Vier-Werte-Kurzschreibweise verwendet. Beachten Sie, dass die Werte im Uhrzeigersinn geordnet sind, beginnend oben: oben, rechts, unten, dann links (TRBL, die Konsonanten in "trouble").

css
margin: 10px 5px 10px 5px;

Regeln für die Rand-Kurzschreibweise bei Ein-, Zwei-, Drei- und Vier-Wert-Deklarationen sind:

  • Wenn ein Wert angegeben wird, gilt die gleiche Randbreite für alle vier Seiten.
  • Wenn zwei Werte angegeben sind, gilt der erste Randwert für oben und unten, der zweite für links und rechts.
  • Wenn drei Werte angegeben sind, gilt der erste Randwert für oben, der zweite für links und rechts, der dritte für unten.
  • Wenn vier Werte angegeben sind, gelten die Randwerte in dieser Reihenfolge: oben, rechts, unten und links (im Uhrzeigersinn).

Positions-Eigenschaften

Mit Positionen können die Kurzschreibweisen von oben, rechts, unten und links in eine Erklärung vereinfacht werden. Beispielsweise betrachten Sie folgendes CSS:

css
top: 0;
right: 20px;
bottom: 0;
left: 20px;

Es kann vereinfacht werden zu:

css
inset: 0 20px 0 20px;

Wie bei Rändern und Auffüllungen sind die Innenwerte im Uhrzeigersinn geordnet - oben, rechts, unten, dann links (TRBL).

Die universelle Kurzform-Eigenschaft

CSS stellt eine universelle Kurzform-Eigenschaft, all, bereit, die ihren Wert auf jede Eigenschaft im Dokument anwendet. Ihr Zweck ist es, das Vererbungskonzept der Eigenschaften zu ändern.

Weitere Informationen darüber, wie Vererbung in CSS funktioniert, finden Sie unter Konflikte handhaben oder Einführung in die CSS-Cascade.

Kurzschreibweise von Eigenschaften

Siehe auch