Kurzschreibweisen

Kurzschreibweisen sind CSS-Eigenschaften, mit denen Sie die Werte mehrerer anderer CSS-Eigenschaften gleichzeitig festlegen können. Mit einer Kurzschreibweise können Sie prägnantere (und oft besser lesbare) Stylesheets schreiben und so Zeit und Energie sparen.

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, mit der die Werte von background-color, background-image, background-repeat und background-position definiert werden können. Ebenso können die häufigsten schriftbezogenen Eigenschaften mit der Kurzschreibweise font definiert werden, und die verschiedenen Ränder um ein Element können mit der Kurzschreibweise margin definiert werden.

Knifflige Grenzfälle

Es gibt einige Grenzfälle, die beim Verwenden von Kurzschreibweisen zu beachten sind.

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 Hintergrundfarbe nicht auf red setzen, sondern auf den Standardwert für background-color, nämlich transparent.

Nur die Werte der einzelnen Eigenschaften können erben. Da fehlende Werte durch ihre Anfangswerte ersetzt werden, ist es unmöglich, das Erben einzelner Eigenschaften durch Auslassen zuzulassen. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, aber nur als Ganzes, nicht als Schlüsselwort für einen bestimmten Wert oder einen anderen. Das bedeutet, dass die einzige Möglichkeit, einen spezifischen Wert erben zu lassen, 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 dies funktioniert nicht so einfach, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle hier sind:

Ränder eines Kastens

Kurzschreibweisen, die Eigenschaften in Bezug auf die Ränder eines Kastens behandeln, wie border-style, margin oder padding, verwenden immer eine konsistente 1-bis-4-Wert-Syntax, die diese Ränder darstellt:

  • 1-Wert-Syntax: border-width: 1em — Der einzelne Wert repräsentiert alle Ränder: Box edges with one-value syntax

  • 2-Wert-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die vertikalen, also obere und untere Ränder, der zweite die horizontalen, also die linken und rechten: Box edges with two-value syntax

  • 3-Wert-Syntax: border-width: 1em 2em 3em — Der erste Wert repräsentiert den oberen Rand, der zweite die horizontalen, also linken und rechten, und der dritte Wert den unteren Rand: Box edges with three-value syntax

  • 4-Wert-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die oberen, rechten, unteren und linken Ränder in dieser Reihenfolge, also im Uhrzeigersinn beginnend am oberen Rand: Box edges with four-value syntax Der Anfangsbuchstabe von Oben-Rechts-Unten-Links entspricht der Reihenfolge der Konsonanten des Wortes trouble: TRBL. Sie können es sich auch als die Reihenfolge merken, in der die Zeiger einer Uhr rotieren: 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 eines Kastens

In ähnlicher Weise verwenden Kurzschreibweisen, die sich auf die Ecken eines Kastens beziehen, wie border-radius, immer 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: Box corners with one-value 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: Box corners with two-value 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: Box corners with three-value syntax

  • 4-Wert-Syntax: border-radius: 1em 2em 3em 4em — Die vier Werte stehen für die obere linke, obere rechte, untere rechte und untere linke Ecke in dieser Reihenfolge, also im Uhrzeigersinn beginnend an der oberen linken Ecke: Box corners with four-value syntax

Hintergrundeigenschaften

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 nur eine gekürzt werden:

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

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

Siehe background für detailliertere Informationen, einschließlich der CSS3-Eigenschaften.

Schrifteigenschaften

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 Kurzdeklaration entspricht in Wirklichkeit den obigen Langdeklarationen plus font-variant: normal, font-size-adjust: none und font-stretch: normal.

Randeigenschaften

Bei Rändern können Breite, Farbe und Stil in einer Deklaration vereinfacht werden. Betrachten Sie zum Beispiel das folgende CSS:

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

Es kann wie folgt vereinfacht werden:

css
border: 1px solid #000;

Rand- und Abstands-Eigenschaften

Kurzschreibweisen von Rand- und Abstands-Werten funktionieren ähnlich; die Rand-Eigenschaft ermöglicht es, Kurzformen mit einem, zwei, drei oder vier Werten zu spezifizieren. 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 unter Verwendung der Vier-Wert-Kurzform. Beachten Sie, dass die Werte im Uhrzeigersinn angeordnet sind, beginnend oben: oben, rechts, unten, dann links (TRBL, die Konsonanten in "trouble").

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

Regeln für die Kurzschreibweise von Rändern mit einem, zwei, drei und vier Wertangaben sind:

  • Wenn ein Wert angegeben wird, wird derselbe Rand auf allen vier Seiten angewendet.
  • Wenn zwei Werte angegeben werden, wird der erste Rand auf oben und unten angewendet, der zweite auf links und rechts.
  • Wenn drei Werte angegeben werden, wird der erste Rand auf oben, der zweite auf links und rechts, der dritte auf unten angewendet.
  • Wenn vier Werte angegeben werden, gelten die Ränder in der Reihenfolge von oben, rechts, unten und links (im Uhrzeigersinn).

Positonseigenschaften

Bei der Position können die Kurzformen von oben, rechts, unten und links in eine Deklaration vereinfacht werden. Betrachten Sie zum Beispiel das folgende CSS:

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

Es kann wie folgt vereinfacht werden:

css
inset: 0 20px 0 20px;

Genau wie Ränder und Abstände sind auch die Inset-Werte im Uhrzeigersinn angeordnet - oben, rechts, unten, dann links (TRBL).

Die universelle Kurzschreibweise

CSS bietet eine universelle Kurzschreibweise, all, die seinen Wert auf jede Eigenschaft im Dokument anwendet. Ihr Zweck ist es, das Vererbungsmuster der Eigenschaften zu ändern.

Siehe Umgang mit Konflikten oder Einführung in die CSS-Kaskade für mehr Informationen darüber, wie Vererbung in CSS funktioniert.

Kurzschreibweisen

Siehe auch