Kurzschreibweise von Eigenschaften

Kurzschreibweise von Eigenschaften sind CSS-Eigenschaften, die es ermöglichen, die Werte mehrerer anderer CSS-Eigenschaften in einer einzigen Deklaration festzulegen. Mit einer Kurzschreibweise können Sie kürzere (und oft lesbarere) Stylesheets schreiben, was Zeit und Mühe spart.

Die CSS-Spezifikation definiert Kurzschreibweisen, um die Definition häufiger Eigenschaften zu gruppieren, die sich auf dasselbe Thema beziehen. Zum Beispiel ist die CSS-Eigenschaft background eine Kurzschreibweise, die in der Lage ist, die Werte von background-color, background-image, background-repeat und background-position festzulegen.

Schwierige Grenzfälle

Es gibt einige Grenzfälle, die bei der Verwendung von Kurzschreibweisen zu beachten sind.

Auslassen von Eigenschaften

Ein Wert, der nicht angegeben wird, wird auf einen Standardwert gesetzt, der durch die Kurzschreibweise definiert ist und sich möglicherweise von dem Anfangswert der Eigenschaft unterscheidet.

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 einzelner 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 auslässt. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, jedoch nur als Ganzes und nicht als Schlüsselwort für einen oder einen anderen Wert. Das bedeutet, dass der einzige Weg, einen bestimmten 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 verschiedener Typen verwenden, da die Reihenfolge keine Bedeutung hat, aber dies funktioniert nicht so gut, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle sind hier:

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

Seiten des Kastens

Kurzschreibweisen, die sich auf Eigenschaften beziehen, die die Seiten des Kastens betreffen, wie border-style, margin oder padding, verwenden stets eine konsistente 1-zu-4-Wert-Syntax, die diese Seiten darstellt:

1-Wert-Syntax: border-width: 1em — Ein einzelner Wert repräsentiert alle Seiten:
2-Wert-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die obere und untere Seite, und der zweite Wert repräsentiert die linke und rechte Seite:
3-Wert-Syntax: border-width: 1em 2em 3em — Der erste Wert repräsentiert die obere Seite, der zweite Wert repräsentiert die linken und rechten Seiten, und der dritte Wert repräsentiert die untere Seite:
4-Wert-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere, rechte, untere und linke Seite, jeweils in dieser Reihenfolge, d.h. im Uhrzeigersinn beginnend oben: Der Anfangsbuchstabe von Top-Right-Bottom-Left entspricht der Reihenfolge des Wortes trouble: TRBL. Sie können es auch als die Reihenfolge merken, in der die Zeiger auf einer Uhr rotieren würden: 1em beginnt in der 12-Uhr-Position, dann 2em in der 3-Uhr-Position, danach 3em in der 6-Uhr-Position und 4em in der 9-Uhr-Position.

Ecken des Kastens

Ähnlich verwenden Kurzschreibweisen, die sich auf Eigenschaften beziehen, die die Ecken des Kastens betreffen, wie border-radius, stets eine konsistente 1-zu-4-Wert-Syntax, die diese Ecken darstellt:

1-Wert-Syntax: border-radius: 1em — Ein einzelner Wert repräsentiert alle Ecken:
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:
3-Wert-Syntax: border-radius: 1em 2em 3em — Der erste Wert repräsentiert die obere linke Ecke, der zweite Wert die oberen rechten und unteren linken Ecken, 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, d.h. im Uhrzeigersinn beginnend oben links:

Hintergrundeigenschaften

Berücksichtigen 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 Kurzform entspricht tatsächlich den obigen Langform-Eigenschaften plus background-attachment: scroll und, in CSS3, einigen zusätzlichen Eigenschaften.)

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

Schriftsatzeigenschaften

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 fünf Anweisungen können wie folgt verkürzt werden:

css

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

Diese Kurzform-Deklaration entspricht tatsächlich den obigen Langform-Deklarationen plus font-variant: normal, font-size-adjust: none und font-stretch: normal.

Rand- und Fülleigenschaften

Mit Rändern können Breite, Farbe und Stil in einer Deklaration vereinfacht werden. Beispielsweise 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;

Eigenschaften für Außen- und Innenabstände

Kurzschreibversionen von Werten für Außen- und Innenabstände funktionieren ähnlich; die Eigenschaft margin erlaubt es, Kurzwerte 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 mit der Vier-Wert-Kurzform. Beachten Sie, dass die Werte im Uhrzeigersinn in der Reihenfolge stehen, beginnend oben: oben, rechts, unten und dann links (TRBL, die Konsonanten in "trouble").

css

margin: 10px 5px 10px 5px;

Regeln für die Kurzform der Randeigenschaften bei ein, zwei, drei und vier Wertdeklarationen sind:

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

Positionseigenschaften

Bei der Position können die Kurzschreibversionen von oben, rechts, unten und links in einer Deklaration vereinfacht werden. Beispielsweise betrachten Sie das folgende CSS:

css

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

Es kann wie folgt vereinfacht werden:

css

inset: 0 20px 0 20px;

Ähnlich wie bei Rändern und Füllungen sind die Kantenwerte im Uhrzeigersinn angeordnet - oben, rechts, unten, dann links (TRBL).

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