1. Web
  2. CSS
  3. Guides
  4. CSS-Kaskadierung und Vererbung
  5. Kurzschreibweisen

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Kurzschreibweisen

Kurzschreibweisen sind CSS-Eigenschaften, die es Ihnen ermöglichen, die Werte mehrerer anderer CSS-Eigenschaften gleichzeitig festzulegen. Durch die Verwendung einer Kurzschreibweise können Sie kompaktere (und oft lesbarere) Stylesheets schreiben, was Zeit und Energie spart.

Die CSS-Spezifikation definiert Kurzschreibweisen, um die Definition allgemeiner Eigenschaften, die auf das gleiche Thema wirken, zu gruppieren. Beispielsweise ist die CSS-Eigenschaft background 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 am häufigsten verwendeten schriftbezogenen Eigenschaften mithilfe der Kurzschreibweise font definiert werden, und die unterschiedlichen Ränder um eine Box können mithilfe der Kurzschreibweise margin definiert werden.

Knifflige Sonderfälle

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

Weglassen von Eigenschaften

Ein nicht angegebener Wert 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 rot setzen, sondern auf den Standardwert für background-color, welcher transparent ist.

Nur die Werte der einzelnen Eigenschaften können vererbt werden. Da fehlende Werte durch ihren Anfangswert ersetzt werden, ist es unmöglich, die Vererbung einzelner Eigenschaften zuzulassen, indem man sie weglässt. 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 der einzige Weg, einen bestimmten Wert vererbbar zu machen, darin besteht, die Langform-Eigenschaft mit dem Schlüsselwort inherit zu verwenden.

Reihenfolge der Eigenschaften

Kurzschreibweisen versuchen, keine bestimmte Reihenfolge für die Werte der Eigenschaften, die sie ersetzen, vorzuschreiben. 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 sind hier:

Kanten einer Box

Kurzschreibweisen, die sich mit Eigenschaften im Zusammenhang mit den Kanten einer Box befassen, wie border-style, margin oder padding, verwenden immer eine konsistente 1-zu-4-Wert-Syntax, die diese Kanten repräsentiert:

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

  • 2-Wert-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die vertikalen, also oberen und unteren, Kanten, der zweite die horizontalen, also links und rechts: Boxkanten mit Zwei-Wert-Syntax

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

  • 4-Wert-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die oberen, rechten, unteren und linken Kanten in dieser Reihenfolge, also im Uhrzeigersinn beginnend oben: Boxkanten mit Vier-Wert-Syntax Der Anfangsbuchstabe von Oben-Rechts-Unten-Links entspricht der Reihenfolge der Konsonanten des Wortes trouble: TRBL. Sie können sich dies auch als die Reihenfolge merken, in der sich die Zeiger einer Uhr drehen 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 mit den Ecken einer Box befassen, wie border-radius, immer eine konsistente 1-zu-4-Wert-Syntax, die diese Ecken repräsentiert:

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

  • 2-Wert-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 Ecke: Boxecken mit Zwei-Wert-Syntax

  • 3-Wert-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-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 jeweils in dieser Reihenfolge, also im Uhrzeigersinn beginnend oben links: Boxecken mit Vier-Wert-Syntax

Hintergrundeigenschaften

Betrachten Sie einen Hintergrund mit den folgenden Eigenschaften

css
background-color: black;
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: black url("images/bg.gif") no-repeat left top;

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

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

Schriftarteigenschaften

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

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

Diese Kurzschreibweise entspricht tatsächlich den obigen 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 einer Deklaration vereinfacht werden. Betrachten Sie zum Beispiel das folgende CSS:

css
border-width: 1px;
border-style: solid;
border-color: black;

Es kann vereinfacht werden zu:

css
border: 1px solid black;

Rand- und Abstands-Eigenschaften

Kurzschreibweisen für Rand- und Abstands-Werte funktionieren ähnlich; die margin-Eigenschaft erlaubt es, Kurzschreibwerte anzugeben, indem ein, zwei, drei oder vier Werte verwendet werden. Betrachten Sie die folgenden CSS-Deklarationen:

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

Sie entsprechen der folgenden Deklaration, die die Vier-Wert-Kurzschreibweise verwendet. 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 Rand-Kurzschreibung bei einer, zwei, drei und vier Wert-Deklarationen sind:

  • Wenn ein Wert angegeben wird, gilt derselbe Rand für alle vier Seiten.
  • Wenn zwei Werte angegeben werden, gilt der erste Rand für oben und unten, der zweite für links und rechts.
  • Wenn drei Werte angegeben werden, gilt der erste Rand für oben, der zweite für links und rechts, der dritte für unten.
  • Wenn vier Werte angegeben werden, gelten die Ränder in dieser Reihenfolge für oben, rechts, unten und links (im Uhrzeigersinn).

Positionseigenschaften

Bei Positionseigenschaften können die Kurzschreibversionen von oben, rechts, unten und links in einer Deklaration vereinfacht werden. Betrachten Sie zum Beispiel das folgende CSS:

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

Es kann vereinfacht werden zu:

css
inset: 0 20px 0 20px;

Genau wie Ränder und Abstände werden die Einfügewerte im Uhrzeigersinn geordnet - oben, rechts, unten, dann links (TRBL).

Die universelle Kurzschreibweise

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

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

Kurzschreibweisen

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden