1. Web
  2. CSS
  3. Guides
  4. 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. Mit einer Kurzschreibweise können Sie präzisere (und oft lesbarere) Stylesheets schreiben und dabei Zeit und Energie sparen.

Die CSS-Spezifikation definiert Kurzschreibweisen, um die Definitionen von gemeinsamen Eigenschaften, die auf dasselbe Thema wirken, zu gruppieren. Zum Beispiel ist die CSS-background-Eigenschaft eine Kurzschreibweise, die die Werte von background-color, background-image, background-repeat und background-position definieren kann. In ähnlicher Weise können die häufigsten schriftbezogenen Eigenschaften mit der Kurzschreibweise font und die verschiedenen Ränder um ein Feld mit der Kurzschreibweise margin definiert werden.

Schwierige Grenzfälle

Bei der Verwendung von Kurzschreibweisen gibt es einige Grenzfälle zu beachten.

Eigenschaftsauslassungen

Ein Wert, der nicht spezifiziert ist, 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;
}

Hierbei wird die Hintergrundfarbe nicht auf red, sondern auf den Standardwert für background-color, der transparent ist, gesetzt.

Nur die individuellen Eigenschaftswerte können vererbt werden. Da fehlende Werte durch ihre Startwerte ersetzt werden, ist es unmöglich, die Vererbung von individuellen Eigenschaften durch Auslassung zuzulassen. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, aber nur als Ganzes, nicht als Schlüsselwort für einen einzelnen Wert oder einen anderen. Das bedeutet, dass der einzige Weg, um einen bestimmten Wert vererben zu lassen, darin besteht, die Langform 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 es funktioniert nicht so einfach, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle sind:

Kanten eines Feldes

Kurzschreibweisen, die Eigenschaften im Zusammenhang mit den Kanten eines Feldes bearbeiten, 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 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 obere und untere, Kanten, der zweite die horizontalen, also 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 die horizontalen, also linke und rechte, 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 jeweils in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend bei oben: Boxkanten mit Vier-Wert-Syntax Die Anfangsbuchstaben von Top-Right-Bottom-Left entsprechen der Reihenfolge der Konsonanten des Wortes trouble: TRBL. Sie können sich auch merken, dass die Reihenfolge der Rotation der Uhrzeiger einer Uhr folgt: 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 Feldes

Ebenso verwenden Kurzschreibweisen, die Eigenschaften im Zusammenhang mit den Ecken eines Feldes bearbeiten, wie border-radius, immer eine konsistente 1-bis-4-Wert-Syntax, die diese Ecken darstellt:

  • 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 Ecken jeweils in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend bei 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 zu einer verkürzt werden:

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

(Die Kurzform ist tatsächlich das Äquivalent der langen Eigenschaften oben plus background-attachment: scroll und, in CSS3, einige zusätzliche Eigenschaften.)

Siehe background, um detailliertere Informationen zu erhalten, einschließlich 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 verkürzt auf die folgende Weise spezifiziert werden:

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

Diese Kurzform-Deklaration ist tatsächlich gleichbedeutend mit den oben genannten Langform-Deklarationen plus font-variant: normal, font-size-adjust: none und font-stretch: normal.

Rahmeneigenschaften

Mit Rahmen können Breite, Farbe und Stil in eine 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;

Margin- und Padding-Eigenschaften

Kurzfassungen der margin- und padding-Werte funktionieren ähnlich; die margin-Eigenschaft erlaubt es, Kurzwerte unter Verwendung von 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 Anfang oben, rechts, unten und dann links angegeben sind (TRBL, die Konsonanten in "trouble").

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

Die Regeln für die Margin-Kurzform bei einer, zwei, drei und vier Wert-Deklarationen sind:

  • Wenn ein Wert angegeben ist, gilt dieser Wert für alle vier Seiten.
  • Wenn zwei Werte angegeben sind, gilt der erste für den Oben und Unten, der zweite für Links und Rechts.
  • Wenn drei Werte angegeben sind, gilt der erste für den Oben, der zweite für Links und Rechts und der dritte für den Unten.
  • Wenn vier Werte angegeben sind, gelten diese im Oben, Rechts, Unten und Links in dieser Reihenfolge (im Uhrzeigersinn).

Positions-Eigenschaften

Bei der Position können die Kurzformen für 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 vereinfacht werden zu:

css
inset: 0 20px 0 20px;

Genauso wie bei Margins und Paddings sind die Werte der Einfügung im Uhrzeigersinn angeordnet - oben, rechts, unten, dann links (TRBL).

Die universelle Kurzschreibweise

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

Für weitere Informationen darüber, wie Vererbung in CSS funktioniert, siehe Konflikte behandeln oder Einführung in das CSS-Cascade.

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