Kurzschreib-Eigenschaften

Kurzschreib-Eigenschaften sind CSS-Eigenschaften, die es Ihnen ermöglichen, die Werte mehrerer anderer CSS-Eigenschaften gleichzeitig festzulegen. Durch die Verwendung einer Kurzschreib-Eigenschaft können Sie konsistentere (und oft lesbarere) Stylesheets schreiben und dabei Zeit und Energie sparen.

Die CSS-Spezifikation definiert Kurzschreib-Eigenschaften, um die Definition der häufig zusammenhängenden Eigenschaften zu gruppieren, die auf dasselbe Thema wirken. Zum Beispiel ist die CSS-Eigenschaft background eine Kurzschreib-Eigenschaft, die in der Lage ist, die Werte von background-color, background-image, background-repeat und background-position zu definieren. Ebenso können die gebräuchlichsten schriftbezogenen Eigenschaften mit der Kurzschreib-Eigenschaft font definiert werden, und die verschiedenen Ränder um eine Box können mit der Kurzschreib-Eigenschaft margin definiert werden.

Schwierige Sonderfälle

Es gibt einige Sonderfälle, die Sie im Auge behalten sollten, wenn Sie Kurzschreib-Eigenschaften verwenden.

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

Nur die Werte der einzelnen Eigenschaften können vererben. Da fehlende Werte durch ihren Anfangswert ersetzt werden, ist es unmöglich, die Vererbung einzelner Eigenschaften durch Auslassen zuzulassen. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, aber nur als Ganzes, nicht als Schlüsselwort für einen Wert oder einen anderen. Das bedeutet, dass der einzige Weg, einen bestimmten Wert erben zu lassen, darin besteht, die Langform-Eigenschaft mit dem Schlüsselwort inherit zu verwenden.

Anordnung der Eigenschaften

Kurzschreib-Eigenschaften 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 leicht, wenn mehrere Eigenschaften ähnliche Werte haben können.

Zwei wichtige Fälle sind hier:

Ränder einer Box

Kurze Schreibweisen von Eigenschaften, die sich auf die Ränder einer Box beziehen, wie border-style, margin oder padding, verwenden immer eine konsistente 1-zu-4-Wert-Syntax, die diese Ränder darstellt:

  • 1-Wert-Syntax: border-width: 1em — Der einzelne Wert repräsentiert alle Ränder: Box-Ränder mit 1-Wert-Syntax

  • 2-Wert-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die vertikalen Ränder, also oben und unten, der zweite die horizontalen, also die linken und rechten Ränder: Box-Ränder mit 2-Wert-Syntax

  • 3-Wert-Syntax: border-width: 1em 2em 3em — Der erste Wert repräsentiert den oberen Rand, der zweite die horizontalen, also die linken und rechten, und der dritte Wert den unteren Rand: Box-Ränder mit 3-Wert-Syntax

  • 4-Wert-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die oberen, rechten, unteren und linken Ränder in dieser respektiven Reihenfolge, d.h. im Uhrzeigersinn, beginnend oben: Box-Ränder mit 4-Wert-Syntax Der Anfangsbuchstabe von Oben-Rechts-Unten-Links entspricht der Reihenfolge der Konsonanten im Wort trouble: TRBL. Sie können sich dies auch als die Reihenfolge merken, in der sich die Hände auf einer Uhr bewegen: 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 auf die Ecken einer Box beziehen, wie border-radius, immer eine konsistente 1-zu-4-Wert-Syntax, die diese Ecken darstellt:

  • 1-Wert-Syntax: border-radius: 1em — Der einzelne Wert repräsentiert alle Ecken: Box-Ecken mit 1-Wert-Syntax

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

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

  • 4-Wert-Syntax: border-radius: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere linke, die obere rechte, die untere rechte und die untere linke Ecke in dieser Reihenfolge, d.h. im Uhrzeigersinn, beginnend oben links: Box-Ecken mit 4-Wert-Syntax

Hintergrund-Eigenschaften

Betrachten Sie einen Hintergrund mit den folgenden Eigenschaften

css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

Diese vier Deklarationen können zu einer einzigen verkürzt werden:

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

(Die Kurzform ist eigentlich gleichwertig zu den obenstehenden Langform-Eigenschaften plus background-attachment: scroll und, in CSS3, einige zusätzliche Eigenschaften.)

Siehe background für detailliertere Informationen, einschließlich der 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 auf Folgendes verkürzt werden:

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

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

Rand-Eigenschaften

Bei Rändern können Breite, Farbe und Stil zu einer einzigen Deklaration vereinfacht werden. Zum Beispiel, betrachten Sie das folgende CSS:

css
border-width: 1px;
border-style: solid;
border-color: #000;

Es kann vereinfacht werden als:

css
border: 1px solid #000;

Rand- und Abstands-Eigenschaften

Kurzformen von Rand- und Abstands-Werten funktionieren ähnlich; die Eigenschaft margin erlaubt Kurzform-Werte, die mit einem, zwei, drei oder vier Werten spezifiziert werden können. Betrachten Sie die folgenden CSS-Deklarationen:

css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

Sie sind gleichbedeutend mit der folgenden Deklaration mithilfe der Vier-Wert-Kurzform. Beachten Sie, dass die Werte im Uhrzeigersinn angegeben werden, beginnend oben: oben, rechts, unten, dann links (TRBL, die Konsonanten in "trouble").

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

Regeln für margin-Kurzformen für ein-, zwei-, drei- und vier-Wert-Deklarationen sind:

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

Positions-Eigenschaften

Bei Positionen können die Kurzform-Versionen von oben, rechts, unten und links zu einer einzigen Deklaration vereinfacht werden. Zum Beispiel, betrachten Sie 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 Rändern und Abständen sind die inset-Werte im Uhrzeigersinn geordnet - oben, rechts, unten, dann links (TRBL).

Die universelle Kurzschreib-Eigenschaft

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

Weitere Informationen darüber, wie Vererbung in CSS funktioniert, finden Sie unter Umgang mit Konflikten oder Einführung in den CSS-Cascade.

Kurzschreib-Eigenschaften

Siehe auch