[go: up one dir, main page]
  1. Web
  2. CSS
  3. Guides
  4. Kaskadierung und Vererbung
  5. Kurzschreibweise-Eigenschaften

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Kurzschreibweise-Eigenschaften

Kurzschreibweise-Eigenschaften sind CSS-Eigenschaften, die es Ihnen ermöglichen, die Werte mehrerer anderer CSS-Eigenschaften gleichzeitig festzulegen. Durch die Verwendung einer Kurzschreibweise-Eigenschaft können Sie prägnantere (und oft besser lesbare) Stylesheets schreiben und dabei Zeit und Energie sparen.

Die CSS-Spezifikation definiert Kurzschreibweise-Eigenschaften, um die Definition gängiger Eigenschaften zu gruppieren, die auf dasselbe Thema wirken. Beispielsweise ist die CSS-Eigenschaft background eine Kurzschreibweise-Eigenschaft, die es ermöglicht, 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 eine Box können mit der margin-Kurzschreibweise definiert werden.

Schwierige Grenzfälle

Es gibt einige Grenzfälle, die beim Einsatz von Kurzschreibweise-Eigenschaften beachtet werden sollten.

Eigenschaften auslassen

Ein Wert, der nicht angegeben wird, 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;
}

Dies wird die Hintergrundfarbe nicht auf red setzen, sondern auf den Standardwert für background-color, welcher transparent ist.

Nur die individuellen Eigenschaftenwerte können vererben. Da fehlende Werte durch ihren Anfangswert ersetzt werden, ist es unmöglich, die Vererbung von individuellen Eigenschaften zu erlauben, indem man sie weglässt. Das Schlüsselwort inherit kann auf eine Eigenschaft angewendet werden, jedoch nur als Ganzes, nicht als Schlüsselwort für einen bestimmten Wert oder einen anderen. Das bedeutet, dass der einzige Weg, um einen bestimmten Wert vererben zu lassen, die langfassige Eigenschaft mit dem Schlüsselwort inherit zu verwenden.

Reihenfolge der Eigenschaften

Kurzschreibweise-Eigenschaften versuchen, keine bestimmte Reihenfolge für die Werte der Eigenschaften vorzuschreiben, die sie ersetzen. Dies funktioniert gut, wenn diese Eigenschaften Werte unterschiedlicher Typen verwenden, da die Reihenfolge keine Wichtigkeit hat, aber es funktioniert nicht so leicht, wenn mehrere Eigenschaften identische Werte haben können.

Zwei wichtige Fälle sind hier:

Kanten eines Kastens

Kurzschreibweisen, die Eigenschaften in Bezug auf Kanten eines Kastens behandeln, wie border-style, margin oder padding, verwenden immer eine konsistente 1-zu-4-Wert-Syntax, die diese Kanten darstellt:

  • 1-Wert-Syntax: border-width: 1em — Der Einzelwert repräsentiert alle Kanten: Kanten eines Kastens mit Ein-Wert-Syntax

  • 2-Wert-Syntax: border-width: 1em 2em — Der erste Wert repräsentiert die vertikalen, das heißt oben und unten, Kanten, der zweite die horizontalen Kanten, das heißt die linken und rechten: Kanten eines Kastens mit Zwei-Wert-Syntax

  • 3-Wert-Syntax: border-width: 1em 2em 3em — Der erste Wert repräsentiert die obere Kante, der zweite die horizontalen, das heißt die linken und rechten, und der dritte Wert die untere Kante: Kanten eines Kastens mit Drei-Wert-Syntax

  • 4-Wert-Syntax: border-width: 1em 2em 3em 4em — Die vier Werte repräsentieren die obere, rechte, untere und linke Kante jeweils in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend oben: Kanten eines Kastens mit Vier-Wert-Syntax Der Anfangsbuchstabe von Oben-Rechts-Unten-Links entspricht der Reihenfolge der Konsonanten im Wort trouble: TRBL. Sie können es sich auch als die Reihenfolge merken, in der die Zeiger auf einer Uhr rotieren würden: 1em beginnt auf der 12 Uhr Position, dann 2em auf der 3 Uhr Position, dann 3em auf der 6 Uhr Position und 4em auf der 9 Uhr Position.

Ecken eines Kastens

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

  • 1-Wert-Syntax: border-radius: 1em — Der Einzelwert repräsentiert alle Ecken: Ecken eines Kastens 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: Ecken eines Kastens 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 Ecke, und der dritte Wert die untere rechte Ecke: Ecken eines Kastens 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 Ecke jeweils in dieser Reihenfolge, das heißt im Uhrzeigersinn beginnend oben links: Ecken eines Kastens mit Vier-Wert-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 eine einzige verkürzt werden:

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

(Die Kurzform entspricht eigentlich den ausführlichen Eigenschaften oben 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 die folgende verkürzt werden:

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

Diese Kurzform-Deklaration entspricht eigentlich den ausführlichen Deklarationen oben plus font-variant: normal, font-size-adjust: none und font-stretch: normal.

Rahmen-Eigenschaften

Bei Rahmen können die Breite, die Farbe und der Stil in einer Deklaration vereinfacht werden. Betrachten Sie zum Beispiel die folgende CSS:

css
border-width: 1px;
border-style: solid;
border-color: black;

Sie kann vereinfacht werden auf:

css
border: 1px solid black;

Rand- und Innenabstand-Eigenschaften

Kurzfassungen von Rand- und Innenabstandswerten funktionieren ähnlich; die Margin-Eigenschaft erlaubt, Kurzformen 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 sind identisch mit der folgenden Deklaration unter Verwendung der Vier-Wert-Kurzform. Beachten Sie, dass die Werte im Uhrzeigersinn angeordnet sind, beginnend oben: oben, rechts, unten, dann links (TRBL, die Konsonanten in "trouble").

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

Die Kurzform-Regeln für einen, zwei, drei und vier Wert-Deklarationen sind:

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

Positions-Eigenschaften

Bei Position können die Kurzformen von oben, rechts, unten und links in einer Deklaration vereinfacht werden. Betrachten Sie zum Beispiel die folgende CSS:

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

Sie kann vereinfacht werden auf:

css
inset: 0 20px 0 20px;

Genau wie Ränder und Innenabstände sind die Einfügewerte im Uhrzeigersinn angeordnet - oben, rechts, unten, dann links (TRBL).

Die universelle Kurzschreibweise-Eigenschaft

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

Siehe Konflikte verwalten oder Einführung in die CSS-Kaskade für weitere Informationen darüber, wie Vererbung in CSS funktioniert.

Kurzschreibweise-Eigenschaften

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