1. Web
  2. CSS
  3. CSS-Kaskadierung und Vererbung
  4. 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, mit denen Sie die Werte mehrerer anderer CSS-Eigenschaften gleichzeitig festlegen können. Durch die Verwendung einer Kurzschreibweise können Sie prägnantere (und oft übersichtlichere) Stylesheets schreiben, was Zeit und Energie spart.

Die CSS-Spezifikation definiert Kurzschreibweisen, um die Definition gängiger Eigenschaften, die auf das gleiche Thema angewandt werden, zu gruppieren. Beispielsweise ist die CSS-background-Eigenschaft eine Kurzschreibweise, mit der die Werte von background-color, background-image, background-repeat und background-position definiert werden können. In ähnlicher Weise können die am häufigsten verwendeten schriftbezogenen Eigenschaften mit der Kurzschreibweise font definiert werden und die verschiedenen Ränder um eine Box können mit der Kurzschreibweise margin definiert werden.

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 seinen Anfangswert gesetzt. 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 setzt die Hintergrundfarbe nicht auf red, sondern auf den Standardwert für background-color, der transparent ist.

Nur die Werte einzelner Eigenschaften können vererben. Da fehlende Werte durch ihren Anfangswert ersetzt werden, ist es unmöglich, die Vererbung einzelner Eigenschaften durch deren Auslassung zu erlauben. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, jedoch nur als Ganzes und nicht als Schlüsselwort für einen oder andere Werte. Das bedeutet, dass der einzige Weg, um einen bestimmten Wert erben zu lassen, darin besteht, die Langschreibweise der Eigenschaft mit dem Schlüsselwort inherit zu verwenden.

Anordnung der Eigenschaften

Kurzschreibweisen versuchen, keine spezifische 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 Rolle spielt, aber es funktioniert nicht so einfach, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle hier sind:

Kanten einer Box

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

  • 1-Wert-Syntax: border-width: 1em — Der Einzelwert steht für alle Kanten: Boxkanten mit einwertiger Syntax

  • 2-Wert-Syntax: border-width: 1em 2em — Der erste Wert steht für die vertikalen Kanten, also oben und unten, der zweite für die horizontalen, also links und rechts: Boxkanten mit zweiwertiger Syntax

  • 3-Wert-Syntax: border-width: 1em 2em 3em — Der erste Wert steht für die obere Kante, der zweite für die horizontalen, also links und rechts, und der dritte Wert für die untere Kante: Boxkanten mit dreiwertiger Syntax

  • 4-Wert-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere, rechte, untere und linke Kante in dieser Reihenfolge, also im Uhrzeigersinn beginnend oben: Boxkanten mit vierwertiger Syntax Die Anfangsbuchstaben von Oben-Rechts-Unten-Links entsprechen der Reihenfolge der Konsonanten des englischen Wortes trouble: TRBL. Sie können es sich auch als die Reihenfolge merken, in der die Zeiger einer Uhr rotieren 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 Eigenschaften zu den Ecken einer Box beschäftigen, wie border-radius, immer eine konsistente 1-bis-4-Wert-Syntax, die diese Ecken repräsentiert:

  • 1-Wert-Syntax: border-radius: 1em — Der Einzelwert steht für alle Ecken: Boxecken mit einwertiger Syntax

  • 2-Wert-Syntax: border-radius: 1em 2em — Der erste Wert steht für die obere linke und untere rechte Ecke, der zweite für die obere rechte und untere linke: Boxecken mit zweiwertiger Syntax

  • 3-Wert-Syntax: border-radius: 1em 2em 3em — Der erste Wert steht für die obere linke Ecke, der zweite für die obere rechte und untere linke, und der dritte Wert für die untere rechte Ecke: Boxecken mit dreiwertiger 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 in dieser Reihenfolge, also im Uhrzeigersinn beginnend oben links: Boxecken mit vierwertiger 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 auf nur eine verkürzt werden:

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

(Die Kurzschreibform ist tatsächlich gleichbedeutend mit den oben genannten Langform-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 zu folgendem verkürzt werden:

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

Diese Kurzschreibweise entspricht tatsächlich den oben genannten Langform-Eigenschaften plus font-variant: normal, font-size-adjust: none und font-stretch: normal.

Rahmen-Eigenschaften

Bei Rahmen können die Breite, Farbe und der 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 als:

css
border: 1px solid black;

Margin- und Padding-Eigenschaften

Kurzschreibweisen von Margin- und Padding-Werten funktionieren ähnlich; die Margin-Eigenschaft erlaubt es, Kurzschreibwerte mithilfe 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 sind dasselbe wie die folgende Deklaration, die die vierwertige Kurzschreibweise verwendet. Beachten Sie, dass die Werte in Uhrzeigersinn-Reihenfolge angegeben werden, beginnend am oberen Rand: oben, rechts, unten, dann links (TRBL, die Konsonanten von "trouble").

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

Die Regeln für die Margin-Kurzschreibweise bei der Angabe von einem, zwei, drei und vier Werten sind:

  • Wenn ein Wert angegeben ist, gilt dieser für alle vier Seiten.
  • Wenn zwei Werte angegeben sind, gilt der erste Margin für oben und unten, der zweite für links und rechts.
  • Wenn drei Werte angegeben sind, gilt der erste Margin für oben, der zweite für links und rechts, der dritte für unten.
  • Wenn vier Werte angegeben sind, gelten die Margins 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 vereinfacht werden als:

css
inset: 0 20px 0 20px;

Genau wie bei Margins und Paddings werden die Einsatzzahlen 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 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