Kurzschreibweisen

Kurzschreibweisen sind CSS-Eigenschaften, die es ermöglichen, die Werte mehrerer anderer CSS-Eigenschaften gleichzeitig zu setzen. Mit einer Kurzschreibweise können Sie prägnantere (und oft lesbarere) Stylesheets verfassen, was Zeit und Energie spart.

Die CSS-Spezifikation definiert Kurzschreibweisen, um die Definition gängiger Eigenschaften zu gruppieren, die auf dasselbe Thema wirken. Zum Beispiel ist die CSS-Eigenschaft background eine Kurzschreibweise, die die Werte von background-color, background-image, background-repeat und background-position definieren kann. Ebenso können die am häufigsten genutzten schriftbezogenen Eigenschaften mit der Kurzform font definiert werden, und die verschiedenen Abstände um eine Box herum können mit der Kurzschreibweise margin definiert werden.

Schwierige Randfälle

Es gibt einige Randfälle, die bei der Verwendung von Kurzschreibweisen zu beachten sind.

Eigenschaften weglassen

Ein nicht spezifizierter Wert wird auf seinen Initialwert 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 setzt die Hintergrundfarbe nicht auf red, sondern auf den Standardwert von background-color, nämlich transparent.

Nur die Werte der individuellen Eigenschaften können erben. Da fehlende Werte durch ihren Initialwert ersetzt werden, ist es unmöglich, die Vererbung individueller Eigenschaften durch das Weglassen zuzulassen. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, jedoch nur als Ganzes und nicht als Schlüsselwort für einen bestimmten Wert. Das bedeutet, dass der einzige Weg, um einen spezifischen Wert zu erben, darin besteht, die Langform der Eigenschaft mit dem Schlüsselwort inherit zu verwenden.

Reihenfolge der Eigenschaften

Kurzschreibweisen versuchen, keine spezifische 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, die sich auf die Kanten einer Box beziehen, wie border-style, margin oder padding, verwenden immer eine konsistente 1-zu-4-Werte-Syntax, die diese Kanten darstellt:

  • 1-Werte-Syntax: border-width: 1em — Der einzelne Wert steht für alle Kanten: Kanten einer Box mit Ein-Wert-Syntax

  • 2-Werte-Syntax: border-width: 1em 2em — Der erste Wert steht für die vertikalen, d.h. oberen und unteren, Kanten, der zweite für die horizontalen, d.h. linken und rechten: Kanten einer Box mit Zwei-Werte-Syntax

  • 3-Werte-Syntax: border-width: 1em 2em 3em — Der erste Wert steht für die obere Kante, der zweite für die horizontalen, d.h. linken und rechten, und der dritte Wert für die untere Kante: Kanten einer Box mit Drei-Werte-Syntax

  • 4-Werte-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte stehen für die obere, rechte, untere und linke Kante, immer in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend oben: Kanten einer Box mit Vier-Werte-Syntax Die Anfangsbuchstaben von Oben-Rechts-Unten-Links stimmen mit der Reihenfolge der Konsonanten des Wortes trouble (Problem) überein: TRBL. Sie können es sich auch als die Reihenfolge merken, in der die Zeiger 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, die sich auf die Ecken einer Box beziehen, wie border-radius, immer eine konsistente 1-zu-4-Werte-Syntax, die diese Ecken darstellt:

  • 1-Werte-Syntax: border-radius: 1em — Der eine Wert steht für alle Ecken: Ecken einer Box mit Ein-Wert-Syntax

  • 2-Werte-Syntax: border-radius: 1em 2em — Der erste Wert steht für die obere linke und die untere rechte Ecke, der zweite für die obere rechte und die untere linke: Ecken einer Box mit Zwei-Werte-Syntax

  • 3-Werte-Syntax: border-radius: 1em 2em 3em — Der erste Wert steht für die obere linke Ecke, der zweite für die obere rechte und die untere linke, und der dritte Wert für die untere rechte Ecke: Ecken einer Box mit Drei-Werte-Syntax

  • 4-Werte-Syntax: border-radius: 1em 2em 3em 4em — Die vier Werte stehen für die obere linke, obere rechte, untere rechte und untere linke Ecke, immer in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend mit der oberen linken: Ecken einer Box 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 zu nur einer verkürzt werden:

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

(Die Kurzform ist tatsächlich gleichwertig mit den Langform-Eigenschaften oben sowie background-attachment: scroll und, in CSS3, einigen zusätzlichen Eigenschaften.)

Lesen Sie background für detailliertere Informationen, einschließlich CSS3-Eigenschaften.

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 ist tatsächlich gleichwertig mit den oben genannten Langform-Deklarationen sowie font-variant: normal, font-size-adjust: none und font-stretch: normal.

Rahmen-Eigenschaften

Bei Rahmen können Breite, Farbe und Stil in einer Deklaration vereinfacht werden. Zum Beispiel, berücksichtigen Sie das folgende CSS:

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

Dies kann vereinfacht werden zu:

css
border: 1px solid #000;

Margin- und Padding-Eigenschaften

Kurzformen von Margin- und Padding-Werten funktionieren ähnlich; die Margin-Eigenschaft 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;

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

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

Die Kurzformregeln für Margin, wenn ein, zwei, drei und vier Werte angegeben sind, sind:

  • Wenn ein Wert angegeben ist, wird er auf alle vier Seiten angewendet.
  • Wenn zwei Werte angegeben sind, wird die erste Margin auf oben und unten angewendet, die zweite auf links und rechts.
  • Wenn drei Werte angegeben sind, wird die erste Margin auf oben angewendet, die zweite auf links und rechts, die dritte auf unten.
  • Wenn vier Werte angegeben sind, werden die Margins auf oben, rechts, unten und links in dieser Reihenfolge (im Uhrzeigersinn) angewendet.

Positions-Eigenschaften

Bei der Position können die Kurzformversionen von oben, rechts, unten und links in einer Deklaration vereinfacht werden. Zum Beispiel betrachten Sie das folgende CSS:

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

Dies kann vereinfacht werden zu:

css
inset: 0 20px 0 20px;

Genau wie bei Margins und Paddings sind die Einsetzwerten im Uhrzeigersinn geordnet - oben, rechts, unten, dann links (TRBL).

Die universelle Kurzform-Eigenschaft

CSS bietet eine universelle Kurzform-Eigenschaft, all, die ihren Wert auf alle Eigenschaften im Dokument anwendet. Ihr Zweck ist es, das Vererbungsmodell der Eigenschaften zu ändern.

Lesen Sie Konflikte behandeln oder Einführung in den CSS Cascade für weitere Informationen darüber, wie Vererbung in CSS funktioniert.

Kurzschreibweisen

Siehe auch