Kurzschreibweisen

Kurzschreibweisen sind CSS-Eigenschaften, die es Ihnen ermöglichen, die Werte von mehreren anderen CSS-Eigenschaften gleichzeitig festzulegen. Durch die Verwendung einer Kurzschreibweise können Sie prägnantere (und oft lesbarere) Stylesheets schreiben, die Zeit und Mühe sparen.

Die CSS-Spezifikation definiert Kurzschreibweisen, um die Definition von gemeinsamen Eigenschaften, die zu demselben Thema gehören, zu gruppieren. Zum Beispiel ist die CSS-Eigenschaft background eine Kurzschreibweise, mit der sich die Werte von background-color, background-image, background-repeat und background-position festlegen lassen. Ebenso können die gängigsten schriftbezogenen Eigenschaften mit der Kurzschreibweise font definiert werden, und die verschiedenen Außenabstände eines Rahmens können mit der Kurzschreibweise margin definiert werden.

Schwierige Sonderfälle

Es gibt einige Sonderfälle, die Sie bei der Verwendung von Kurzschreibweisen beachten sollten.

Auslassung von Eigenschaften

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

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

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

Nur die Werte einzelner Eigenschaften können erben. Da fehlende Werte durch ihren Anfangswert ersetzt werden, ist es unmöglich, die Vererbung einzelner Eigenschaften durch deren Auslassung zu ermöglichen. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, aber nur insgesamt, nicht als Schlüsselwort für einen Wert oder einen anderen. Das bedeutet, dass der einzige Weg, einen bestimmten Wert vererbar zu machen, darin besteht, die Einzelangabe der Eigenschaft mit dem Schlüsselwort inherit zu verwenden.

Reihenfolge der Eigenschaften

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

Zwei wichtige Fälle sind hier:

  • Eigenschaften, die sich auf die Kanten eines Rahmens beziehen, wie z.B. border-style, margin oder padding
  • Eigenschaften, die sich auf die Ecken eines Rahmens beziehen, wie z.B. border-radius

Kanten eines Rahmens

Kurzschreibweisen, die Eigenschaften in Bezug auf die Kanten eines Rahmens behandeln, wie border-style, margin oder padding, verwenden stets eine konsistente 1-bis-4-Wert-Syntax, die diese Kanten darstellt:

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

  • 2-Wert-Syntax: border-width: 1em 2em — Der erste Wert steht für die vertikalen, also oberen und unteren Kanten, der zweite für die horizontalen, also linken und rechten Kanten: Rahmenkanten mit Zwei-Wert-Syntax

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

  • 4-Wert-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere, rechte, untere und linke Kante respektive, immer in dieser Reihenfolge, also im Uhrzeigersinn beginnend oben: Rahmenkanten mit Vier-Wert-Syntax Der Anfangsbuchstabe von Oben-Rechts-Unten-Links entspricht der Reihenfolge der Konsonanten des Wortes trouble: TRBL. Sie können sich das auch so merken, wie sich die Zeiger auf einer Uhr drehen: 1em beginnt an der 12-Uhr-Position, dann 2em an der 3-Uhr-Position, dann 3em an der 6-Uhr-Position und 4em an der 9-Uhr-Position.

Ecken eines Rahmens

Ebenso verwenden Kurzschreibweisen, die sich auf die Ecken eines Rahmens beziehen, wie z.B. border-radius, stets eine konsistente 1-bis-4-Wert-Syntax, die diese Ecken darstellt:

  • 1-Wert-Syntax: border-radius: 1em — Der einzelne Wert steht für alle Ecken: Rahmenecken mit Ein-Wert-Syntax

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

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

  • 4-Wert-Syntax: border-radius: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere linke, obere rechte, untere rechte und untere linke Ecke respektive, immer in dieser Reihenfolge, also im Uhrzeigersinn beginnend bei der oberen linken: Rahmenecken mit Vier-Wert-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 reduziert werden:

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

(Die Kurzform entspricht tatsächlich der der oben genannten Langform-Eigenschaften plus background-attachment: scroll und, in CSS3, einigen zusätzlichen Eigenschaften.)

Siehe 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 als folgende Kurzform geschrieben werden:

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

Diese Kurzschreibweise 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 die Breite, Farbe und Art in eine Deklaration vereinfacht werden. Zum Beispiel, betrachten Sie das folgende CSS:

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

Dies kann vereinfacht werden als:

css
border: 1px solid #000;

Margin- und Padding-Eigenschaften

Kurzschreibversionen von Margin- und Padding-Werten funktionieren ähnlich; die Margin-Eigenschaft erlaubt es, Kurzform-Werte 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 entsprechen der folgenden Deklaration in der Vier-Wert-Kurzschreibweise. Beachten Sie, dass die Werte in Uhrzeigersinn-Reihenfolge sind, beginnend oben: oben, rechts, unten, dann links (TRBL, die Konsonanten in "trouble").

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

Regeln für die Margin-Kurzschreibweise für ein-, zwei-, drei- und vierwertige Deklarationen sind:

  • Wenn ein Wert angegeben ist, gilt er für alle vier Seiten.
  • Wenn zwei Werte angegeben sind, gilt der erste Margin für oben und unten, der zweite für links und rechts.
  • Wenn drei Werte angegeben sind, gilt der erste Margin für oben, der zweite für links und rechts, der dritte für unten.
  • Wenn vier Werte angegeben sind, gelten die Margins für oben, rechts, unten und links in dieser Reihenfolge (im Uhrzeigersinn).

Positionseigenschaften

Bei der Position können die Kurzschreibversionen der Eigenschaften oben, rechts, unten und links in eine einzige Deklaration vereinfacht werden. Zum Beispiel, betrachten Sie das folgende CSS:

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

Dies kann vereinfacht werden als:

css
inset: 0 20px 0 20px;

Wie bei Margins und Paddings sind die Eingabewerte im Uhrzeigersinn angeordnet - oben, rechts, unten, dann links (TRBL).

Die universelle Kurzschreibweise

CSS bietet eine universelle Kurzschreibweise, all, mit der der Wert auf jede Eigenschaft im Dokument angewendet wird. Ihr Zweck ist es, das Vererbungsmodell der Eigenschaften zu ändern.

Siehe Konfliktbehandlung oder Einführung in die CSS-Cascade für weitere Informationen darüber, wie Vererbung in CSS funktioniert.

Kurzschreibweisen

Siehe auch