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

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

View in English Always switch to English

Kurzschreibweise-Eigenschaften

Kurzschreibweise-Eigenschaften sind CSS-Eigenschaften, die es Ihnen ermöglichen, die Werte mehrerer anderer CSS-Eigenschaften in einer Deklaration festzulegen. Mit einer Kurzschreibweise-Eigenschaft können Sie prägnantere (und oft lesbarere) Stylesheets schreiben, was Zeit und Energie spart.

Die CSS-Spezifikation definiert Kurzschreibweise-Eigenschaften, um häufig verwendete Eigenschaften zu gruppieren, die auf dasselbe Thema wirken. Zum Beispiel ist die CSS-Eigenschaft background eine Kurzschreibweise-Eigenschaft, die die Werte von background-color, background-image, background-repeat und background-position definieren kann.

Schwierige Randfälle

Es gibt ein paar Randfälle, die Sie bei der Verwendung von Kurzschreibweise-Eigenschaften beachten sollten.

Weglassen von Eigenschaften

Ein nicht spezifizierter Wert wird auf einen Standardwert gesetzt, der durch die Kurzschreibweise definiert ist, und der vom Ausgangswert der Eigenschaft abweichen kann.

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, der transparent ist.

Nur die Werte einzelner Eigenschaften können geerbt werden. Da fehlende Werte durch ihren Ausgangswert ersetzt werden, ist es unmöglich, das Erben einzelner Eigenschaften durch Weglassen zu ermöglichen. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, aber nur als Ganzes, nicht als Schlüsselwort für einen oder einen anderen Wert. Das bedeutet, dass die einzige Möglichkeit, einen bestimmten Wert erben zu lassen, darin besteht, die ausgeschriebene Eigenschaft mit dem Schlüsselwort inherit zu verwenden.

Reihenfolge der Eigenschaften

Kurzschreibweise-Eigenschaften 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 das funktioniert nicht so einfach, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle sind hier:

Seiten der Box

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

  • 1-Wert-Syntax: border-width: 1em — Ein einzelner Wert repräsentiert alle Seiten: Boxkanten mit Ein-Wert-Syntax

  • 2-Wert-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die oberen und unteren Kanten, und der zweite Wert repräsentiert die linken und rechten Kanten: Boxkanten mit Zwei-Wert-Syntax

  • 3-Wert-Syntax: border-width: 1em 2em 3em — Der erste Wert repräsentiert die obere Kante, der zweite Wert repräsentiert die linken und rechten Kanten, und der dritte Wert repräsentiert 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 Seiten in genau dieser Reihenfolge; also im Uhrzeigersinn beginnend an der Oberseite: Boxkanten mit Vier-Wert-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 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 der Box

Ähnlich verwenden Kurzschreibweisen, die Eigenschaften im Zusammenhang mit den Ecken der Box bearbeiten, wie border-radius, immer eine konsistente 1-zu-4-Wert-Syntax, die diese Ecken repräsentiert:

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

  • 2-Wert-Syntax: border-radius: 1em 2em — Der erste Wert repräsentiert die oberen linken und unteren rechten Ecken, und der zweite Wert repräsentiert die oberen rechten und unteren linken Ecken: Boxecken mit Zwei-Wert-Syntax

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

  • 4-Wert-Syntax: border-radius: 1em 2em 3em 4em — Die vier Werte repräsentieren die oberen linken, oberen rechten, unteren rechten und unteren linken Ecken in der Reihenfolge, immer in dieser Reihenfolge; im Uhrzeigersinn beginnend an der oberen linken Ecke: Boxecken mit Vier-Wert-Syntax

Hintergrund-Eigenschaften

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

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

(Die Kurzschreibweise ist eigentlich äquivalent zu den obigen ausgeschriebenen Eigenschaften plus background-attachment: scroll und in CSS3 einige zusätzliche 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 wie folgt verkürzt werden:

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

Diese Kurzschreibweise ist tatsächlich äquivalent zu den oben ausgeschriebenen 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 wie folgt vereinfacht werden:

css
border: 1px solid black;

Rand- und Auffüllungseigenschaften

Kurzschreibweise-Versionen von Rand- und Auffüllungswerten funktionieren ähnlich; die Rand-Eigenschaft erlaubt es, Kurzschreibwerte mithilfe von 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 dieselben wie die folgende Deklaration unter Verwendung der Vier-Wert-Kurzschreibweise. Beachten Sie, dass die Werte im Uhrzeigersinn geordnet sind, beginnend oben: oben, rechts, unten und dann links (TRBL, die Konsonanten in "trouble").

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

Rand-Kurzschreibregeln für Ein-, Zwei-, Drei- und Vier-Wert-Deklarationen sind:

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

Positions-Eigenschaften

Bei der Position 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 wie folgt vereinfacht werden:

css
inset: 0 20px 0 20px;

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

Die universelle Kurzschreibweise-Eigenschaft

CSS bietet eine universelle Kurzschreibweise-Eigenschaft, all, die ihren Wert auf jede Eigenschaft im Dokument anwendet. Ihr Zweck besteht darin, das Vererbungsmodell der Eigenschaften zu ändern.

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

Kurzschreibweise-Eigenschaften

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden