Kurzschreibweise von Eigenschaften

Kurzschreibweiseneigenschaften sind CSS-Eigenschaften, die es Ihnen ermöglichen, die Werte mehrerer anderer CSS-Eigenschaften in einer Deklaration festzulegen. Mit einer Kurzschreibweise können Sie stilistische Definitionen prägnanter (und oft besser lesbar) schreiben, was Zeit und Mühe spart.

Die CSS-Spezifikation definiert Kurzschreibweiseneigenschaften, um die Definition von gemeinsamen Eigenschaften, die auf dasselbe Thema wirken, zu gruppieren. Zum Beispiel ist die CSS-Eigenschaft background eine Kurzschreibweiseneigenschaft, die es ermöglicht, die Werte von background-color, background-image, background-repeat und background-position festzulegen.

Schwierige Spezialfälle

Es gibt einige Spezialfälle, die Sie beachten sollten, wenn Sie Kurzschreibweiseneigenschaften verwenden.

Eigenschaften Auslassen

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

Das bedeutet, dass er zuvor festgelegte Werte überschreibt. Zum Beispiel:

css

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

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

Nur die Werte von individuellen Eigenschaften können vererbt werden. Da fehlende Werte durch ihre Anfangswerte ersetzt werden, ist es unmöglich, die Vererbung von individuellen Eigenschaften zuzulassen, indem sie ausgelassen werden. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, jedoch nur auf die gesamte Eigenschaft, nicht als Schlüsselwort für einen bestimmten Wert. Das bedeutet, dass der einzige Weg, um sicherzustellen, dass ein bestimmter Wert vererbt wird, darin besteht, die Langform-Eigenschaft mit dem Schlüsselwort inherit zu verwenden.

Reihenfolge der Eigenschaften

Kurzschreibweiseneigenschaften versuchen, keine spezifische Reihenfolge für die Werte der Eigenschaften, die sie ersetzen, zu erzwingen. Dies funktioniert gut, wenn diese Eigenschaften Werte verschiedener Typen verwenden, da die Reihenfolge keine Rolle spielt, aber es funktioniert nicht so gut, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle sind:

Eigenschaften, die sich auf die Kanten eines Kastens beziehen, wie border-style, margin oder padding
Eigenschaften, die sich auf die Ecken eines Kastens beziehen, wie border-radius

Kanten eines Kastens

Kurzschreibweisen, die Eigenschaften im Zusammenhang mit den Kanten eines Kastens behandeln, wie border-style, margin oder padding, verwenden immer eine konsistente 1-bis-4-Wert-Syntax, die diese Kanten darstellt:

1-Wert-Syntax: border-width: 1em — Der Einzelwert repräsentiert alle Kanten:
2-Wert-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die vertikalen, also oberen und unteren Kanten, der zweite die horizontalen, also die linken und rechten:
3-Wert-Syntax: border-width: 1em 2em 3em — Der erste Wert repräsentiert die obere Kante, der zweite die horizontalen, also die linken und rechten, und der dritte Wert die untere Kante:
4-Wert-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere, rechte, untere und linke Kante, jeweils in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend von oben: Das Anfangsbuchstaben von Top-Right-Bottom-Left entspricht der Reihenfolge der Konsonanten des Wortes trouble: TRBL. Sie können es sich auch als die Reihenfolge merken, in der sich die Zeiger einer Uhr drehen: 1em beginnt in der 12-Uhr-Position, dann 2em in der 3-Uhr-Position, 3em in der 6-Uhr-Position und 4em in der 9-Uhr-Position.

Ecken eines Kastens

Ähnlich verwenden Kurzschreibweisen, die Eigenschaften im Zusammenhang mit den Ecken eines Kastens behandeln, wie border-radius, immer eine konsistente 1-bis-4-Wert-Syntax, die diese Ecken darstellt:

1-Wert-Syntax: border-radius: 1em — Der Einzelwert repräsentiert alle Ecken:
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:
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:
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, das heißt im Uhrzeigersinn beginnend von oben links:

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 auf eine einzige verkürzt werden:

css

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

(Die Kurzschreibform ist tatsächlich eine Entsprechung der Langform-Eigenschaften oben plus background-attachment: scroll und, in CSS3, einige zusätzliche Eigenschaften.)

Sehen 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 Kurzdeklaration 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 Breite, Farbe und Stil in eine Deklaration vereinfacht werden. Zum Beispiel betrachten Sie 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

Kurzschreibversionen der Werte von Rand und Auffüllung funktionieren ähnlich; die Rand-Eigenschaft erlaubt 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;

Sie entsprechen der folgenden Deklaration, die die Vier-Wert-Kurzschreibweise verwendet. Beachten Sie, dass die Werte im Uhrzeigersinn sortiert sind, beginnend oben: oben, rechts, unten, dann links (TRBL, die Konsonanten in "trouble").

css

margin: 10px 5px 10px 5px;

Die Regeln der Rand-Kurzschreibung für Ein-, Zwei-, Drei- und Vier-Wert-Deklarationen sind:

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

Positions-Eigenschaften

Bei der Position können die Kurzschreibversionen 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 bei Rändern und Auffüllungen sind die Einsetzwert im Uhrzeigersinn sortiert - oben, rechts, unten, dann links (TRBL).

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden