Kurzschreibweisen

Kurzschreibweisen sind CSS-Eigenschaften, die es Ihnen ermöglichen, die Werte mehrerer anderer CSS-Eigenschaften gleichzeitig festzulegen. Durch die Verwendung einer Kurzschreibweise können Sie prägnantere (und oft lesbarere) Style-Sheets erstellen, was Zeit und Energie spart.

Die CSS-Spezifikation definiert Kurzschreibweisen, um die Definition von gemeinsamen Eigenschaften, die auf das gleiche Thema wirken, zu gruppieren. 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 zu definieren. Ebenso können die häufigsten schriftbezogenen Eigenschaften mit der Kurzschreibweise font definiert werden, und die verschiedenen Ränder um ein Kästchen können mit der Kurzschreibweise margin definiert werden.

Knifflige Grenzfälle

Es gibt einige Grenzfälle, die bei der Verwendung von Kurzschreibweisen berücksichtigt werden müssen.

Auslassung von Eigenschaften

Ein nicht spezifizierter Wert 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;
}

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

Nur die individuellen Eigenschaftswerte können vererbt werden. Da fehlende Werte durch ihren Anfangswert ersetzt werden, ist es unmöglich, die Vererbung von einzelnen Eigenschaften zu ermöglichen, indem man sie auslässt. 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 zu vererben, darin besteht, die Langschreibweise 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. Es funktioniert jedoch nicht so gut, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle sind hier:

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

Kanten eines Kastens

Kurzschreibweisen, die sich auf die Kanten eines Kastens beziehen, wie border-style, margin oder padding, verwenden immer eine konsistente 1-bis-4-Werte-Syntax, die diese Kanten darstellt:

1-Wert-Syntax: border-width: 1em — Der einzelne Wert repräsentiert alle Kanten:
2-Wert-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die vertikalen, das heißt obere und untere Kanten, der zweite die horizontalen, das heißt die linken und rechten:
3-Wert-Syntax: border-width: 1em 2em 3em — Der erste Wert repräsentiert die obere Kante, der zweite die horizontalen, das heißt 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, immer in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend oben: Der Anfangsbuchstabe von Oben-Rechts-Unten-Links passt zur Reihenfolge der Konsonanten des Wortes trouble: TRBL. Sie können es sich auch als die Reihenfolge merken, in der sich die Zeiger auf einer Uhr drehen würden: 1em beginnt um 12 Uhr, dann 2em um 3 Uhr, dann 3em um 6 Uhr und 4em um 9 Uhr.

Ecken eines Kastens

In ähnlicher Weise verwenden Kurzschreibweisen, die sich auf die Ecken eines Kastens beziehen, wie border-radius, immer eine konsistente 1-bis-4-Werte-Syntax, die diese Ecken darstellt:

1-Wert-Syntax: border-radius: 1em — Der einzelne Wert 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 Ecke:
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 Ecke, 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, immer in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend oben links:

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

Weitere detaillierte Informationen, einschließlich der CSS3-Eigenschaften, finden Sie unter background.

Schriftart-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 folgendermaßen verkürzt werden:

css

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

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

Rahmen-Eigenschaften

Bei Rahmen können Breite, Farbe und Stil in eine einzige Deklaration vereinfacht werden. Betrachten Sie zum Beispiel 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

Kurzschreibweisen für Rand- und Abstands-Werte funktionieren ähnlich; die Rand-Eigenschaft erlaubt die Angabe von Kurzschriftwerten mit einem, zwei, drei oder vier Werten. Betrachten Sie die folgenden CSS-Deklarationen:

css

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

Diese entsprechen der folgenden Deklaration mit der Vier-Wert-Kurzschrift. Beachten Sie, dass die Werte in Uhrzeigersinn-Reihenfolge sind, beginnend oben: oben, rechts, unten, dann links (TRBL, die Konsonanten in "trouble").

css

margin: 10px 5px 10px 5px;

Die Kurzschriftregeln für Ränder bei ein-, zwei-, drei- und vierwertigen Deklarationen 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.

Positions-Eigenschaften

Mit Position können die Kurzschreibversionen von oben, rechts, unten und links in eine einzige Deklaration vereinfacht werden. Betrachten Sie zum Beispiel das folgende CSS:

css

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