Achten Sie beim Schreiben von Kurzeigenschaften in CSS auf die Reihenfolge der TRouBLe (um Fallstricke zu vermeiden).

Kurzeigenschaften werden verwendet, um mehreren Eigenschaften gleichzeitig Werte zuzuweisen. Beispielsweise ist „Schriftart“ eine Abkürzungseigenschaft, mit der mehrere Schrifteigenschaften festgelegt werden können. Es gibt Schriftstil, Schriftstärke, Schriftgröße, Schrifthöhe und Schriftfamilie an.

Schriftart: kursiv fett 18px/1,2 „Helvetica“, „Arial“, serifenlos;

Darüber hinaus gibt es folgende Eigenschaften:

Hintergrund ist eine Abkürzung für mehrere Hintergrundeigenschaften: Hintergrundfarbe, Hintergrundbild, Hintergrundgröße, Hintergrundwiederholung, Hintergrundposition, Hintergrundursprung, Hintergrundchip und Hintergrundanhang.
„Border“ ist eine Kurzschreibweise für „Border-Width“, „Border-Style“ und „Border-Color“, und diese Eigenschaften sind ebenfalls Kurzschreibweisen.
„Border-width“ ist eine Abkürzungseigenschaft für die Breite des oberen, rechten, unteren und linken Rahmens.

Kurzeigenschaften können Code prägnant und klar machen, sie verbergen aber auch einige seltsame Verhaltensweisen.

Kurzschrifteigenschaften überschreiben stillschweigend andere Stile

Bei den meisten Kurzeigenschaften können Sie einige Werte weglassen und nur die Werte angeben, die Sie interessieren. Beachten Sie jedoch, dass dadurch ausgelassene Werte dennoch festgelegt werden, d. h. sie werden implizit auf ihre Anfangswerte zurückgesetzt. Dadurch werden an anderer Stelle definierte Stile stillschweigend überschrieben. Wenn Sie beispielsweise das Kurzschrift-Attribut „Font“ für den Titel einer Webseite verwenden und die Schriftstärke weglassen, wird die Schriftstärke auf „Normal“ eingestellt.

Kurzeigenschaften setzen den ausgelassenen Wert auf seinen Anfangswert

Fügen Sie das folgende CSS hinzu:

h1{ 
  Schriftstärke: fett; 
} 
.Titel{ 
  Schriftart: 32px Helvetica, Arial, serifenlos; 
}

Auf den ersten Blick könnte man meinen, dass die <h1 class="title">CSS-Eigenschaftskurzschrift</h1> den Titel fett darstellen würde, aber das ist nicht der Fall. Der obige Code entspricht dem folgenden Code:

h1 { 
  Schriftstärke: fett; 
} 
 
.Titel { 
  font-style: normal; (nächste 5 Zeilen) Die Anfangswerte dieser Eigenschaften sind font-variant: normal; 
  Schriftstärke: normal; 
  Schriftstreckung: normal; 
  Zeilenhöhe: normal; 
  Schriftgröße: 32px; 
  Schriftfamilie: Helvetica, Arial, serifenlos; 
}

Wenn Sie diese Stile zu <h1> hinzufügen, wird es in normaler Schrift statt in Fettschrift angezeigt. Diese Stile überschreiben auch die von Vorgängerelementen geerbten Schriftstile. Von allen Kurzschrifteigenschaften weist die Schriftart das größte Problem auf, da sie zu viele Eigenschaftswerte festlegt. Vermeiden Sie daher die Verwendung von Schriftarten außerhalb des allgemeinen Stils des <body>-Elements. Natürlich kann das gleiche Problem auch bei anderen Kurzschrifteigenschaften auftreten, seien Sie also vorsichtig.

Die Reihenfolge von Kurzwerten verstehen

Kurzschreibeigenschaften versuchen der Reihenfolge der angegebenen Eigenschaftswerte Rechnung zu tragen. Sie können „Rand: 1 Pixel durchgehend schwarz“ oder „Rand: 1 Pixel durchgehend schwarz“ festlegen. Beides funktioniert. Dies liegt daran, dass der Browser weiß, welchem Wertetyp Breite, Farbe und Rahmenstil entsprechen.

Es gibt jedoch viele Attribute, deren Werte nicht eindeutig sind. Dabei ist die Reihenfolge der Werte entscheidend. Es ist wichtig, die Reihenfolge dieser Kurzeigenschaften zu verstehen.

1. Hoch, Rechts, Runter, Links

Wenn es um Eigenschaften wie Ränder, Polsterungen und Rahmeneigenschaften geht, die Werte für alle vier Seiten eines Elements angeben, können Entwickler leicht die Reihenfolge dieser Kurzeigenschaften falsch verstehen. Die Werte dieser Eigenschaften werden im Uhrzeigersinn, beginnend von oben, aufgelistet.

Wenn Sie sich die Reihenfolge merken, können Sie Fehler vermeiden. Die Eselsbrücke hierfür ist TRouBLe: oben, rechts, unten, links.

Verwenden Sie diese Formel, um die Polsterung auf allen vier Seiten eines Elements festzulegen. Für den im Bild unten gezeigten Link beträgt die obere Polsterung 10px, die rechte Polsterung 15px, die untere Polsterung 0 und die linke Polsterung 5px. Obwohl diese Auffüllungen möglicherweise nicht einheitlich erscheinen, veranschaulichen sie die Reihenfolge der Kurzeigenschaften.

.nav ein { 
  Farbe: weiß; 
  Hintergrundfarbe: #13a4a4; 
  Polsterung: 10px 15px 0 5px; /* Polsterung oben, rechts, unten, links*/ 
  Rahmenradius: 2px; 
  Textdekoration: keine; 
}

Attributwerte können in diesem Modus auch abgekürzt werden. Wenn einer der vier Eigenschaftswerte am Ende der Deklaration nicht angegeben wird, nimmt die nicht angegebene Seite den Wert der gegenüberliegenden Seite an. Bei der Angabe von drei Werten wird der zweite Wert sowohl für die linke als auch für die rechte Seite verwendet. Wenn zwei Werte angegeben werden, wird der erste Wert für oben und unten verwendet. Wird nur ein Wert angegeben, wird dieser für alle vier Richtungen verwendet. Daher sind die folgenden Deklarationen alle gleichwertig.

Polsterung: 1em 2em; 
Polsterung: 1em 2em 1em; 
Polsterung: 1em 2em 1em 2em;

Die folgenden Deklarationen sind ebenfalls gleichwertig.

Polsterung: 1em; 
Polsterung: 1em 1em; 
Polsterung: 1em 1em 1em; 
Polsterung: 1em 1em 1em 1em;

Was vielen Entwicklern schwerfällt, ist die Angabe von drei Werten. Denken Sie daran, dass in diesem Fall die Werte für oben, rechts und unten angegeben sind. Da der Wert auf der linken Seite nicht angegeben ist, ist er gleich dem Wert auf der rechten Seite. Der zweite Wert wird auf die linke und rechte Seite angewendet. Daher legt padding: 10px 15px 0 den linken und rechten Rand auf 15px, den oberen Rand auf 10px und den unteren Rand auf 0 fest.

In den meisten Fällen müssen jedoch nur zwei Werte angegeben werden. Insbesondere bei kleineren Elementen ist es besser, wenn die Polsterung links und rechts größer ist als die Polsterung oben und unten. Dieser Stil eignet sich sehr gut für Schaltflächen oder Navigationslinks auf Webseiten, wie in der folgenden Abbildung gezeigt.

.nav ein { 
  Farbe: weiß; 
  Hintergrundfarbe: #13a4a4; 
  Polsterung: 5px 15px; /* Polsterung oben und unten, dann Polsterung links und rechts*/ 
  Rahmenradius: 2px; 
  Textdekoration: keine; 
}

Dabei werden Kurzeigenschaften verwendet, um zuerst vertikal und dann horizontal eine Polsterung hinzuzufügen.

Da sich hieran viele Eigenschaften orientieren, sollten Sie dies am besten im Hinterkopf behalten.

2. Horizontal, vertikal

Die Formel „TRouBLe“ gilt nur für Eigenschaften, die Werte für die vier Richtungen der Box separat festlegen. Es gibt auch einige Eigenschaften, die nur die Angabe von maximal zwei Werten unterstützen, darunter „background-position“, „box-shadow“ und „text-shadow“ (obwohl es sich strenggenommen nicht um Kurzeigenschaften handelt). Die Reihenfolge dieser Attributwerte ist genau umgekehrt zur Reihenfolge der vierwertigen Attribute wie z. B. der Polsterung. Beispielsweise gibt padding: 1em 2em zuerst die vertikalen Eigenschaftswerte oben/unten und dann die horizontalen Eigenschaftswerte rechts/links an, während background-position: 25% 75% zuerst die horizontalen Eigenschaftswerte rechts/links und dann die vertikalen Eigenschaftswerte oben/unten angibt.

Obwohl es kontraintuitiv erscheinen mag, die Definitionen in umgekehrter Reihenfolge zu haben, ist der Grund einfach: Die beiden Werte stellen ein kartesisches Raster dar. Kartesische Gittermessungen erfolgen üblicherweise in der Reihenfolge x, y (horizontal, vertikal). Um beispielsweise einem Element einen Schatten hinzuzufügen, müssen Sie, wie in Abbildung 1–15 gezeigt, zuerst den x-Wert (horizontal) angeben.

.nav .vorgestellt{ 
  Hintergrundfarbe: orange; 
  box-shadow: 10px 2px #6f9090; /* Der Schatten ist 10px nach rechts und 2px nach unten versetzt */ 
}

<div Klasse="nav"> 
  <a href="#">Startseite</a> 
  <a href="#">Kaffee</a> 
  Brauereien 
  <a href="#" class="featured">Sonderangebote</a> 
</div>

Der erste (größere) Wert gibt den horizontalen Versatz an und der zweite (kleinere) Wert den vertikalen Versatz.

Wenn für eine Eigenschaft Werte in zwei Richtungen von einem Punkt aus angegeben werden müssen, denken Sie an ein „kartesisches Raster“. Wenn eine Eigenschaft den Wert eines Elements in vier Richtungen angeben muss, denken Sie an „Uhr“.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Beachtung der Reihenfolge von TRouBLe in Kurzeigenschaften in CSS (um Fallstricke zu vermeiden). Weitere relevante Inhalte über die Beachtung der Reihenfolge von TRouBLe in Kurzeigenschaften in CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Details zum JavaScript-Abschluss

>>: So begrenzen Sie die Anzahl der Datensätze in einer Tabelle in MySQL

Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode

Achten Sie beim Schreiben von Kurzeigenschaften in CSS auf die Reihenfolge der TRouBLe (um Fallstricke zu vermeiden).

Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode

Fortgeschrittenes Front-End, das Ihnen die Verwendung der Javascript-Speicherfunktion beibringt

HTML-Grundlagen - Pflichtlektüre - Umfassendes Verständnis von CSS-Stylesheets

Detaillierte Erläuterung der kostenlosen AWS-Serveranwendung und des Tutorials zur Einrichtung eines Netzwerkproxys

So lösen Sie das Problem, dass der Bridge-Modus der virtuellen VMware-Maschine nicht auf das Internet zugreifen kann

Verwenden Sie Grafana+Prometheus, um die Leistung des MySQL-Dienstes zu überwachen

Mysql Online-Wiederherstellung des Undo-Tabellenbereichs tatsächlicher Kampfdatensätze

Detaillierte Erläuterung der Befehle für grundlegende MySQL-Operationsanweisung

Zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue

js implementiert zufälligen Namensaufruf

Artikel empfehlen

HTML-Tabelle_Powernode Java Academy

Methoden zur Optimierung von Oracle-Datenbanken mit großen Speicherseiten unter Linux

So legen Sie die Position des Blockelements in der Mitte des Fensters fest

Eine kurze Diskussion über das Design des Tomcat-Mehrschichtcontainers

Zusammenfassung der Grundsätze zum Schreiben von HTML-Seiten für E-Mails

Grafisches Tutorial zur Installation von Ubuntu 18.04 auf einer virtuellen VMware 15-Maschine

Detaillierte Erläuterung des Vue-Routing-Routers

Detaillierte Erklärung langsamer MySQL-Abfragen

Linux-Anfänger konfigurieren in virtuellen Maschinen IP und starten das Netzwerk neu

Eine kurze Erläuterung des Navigationsfensters in Iframe-Webseiten

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15

Lösen Sie das Problem des IDEA-Konfigurations-Tomcat-Startfehlers

So verwenden Sie den Linux-Befehl seq

WeChat Mini-Programm: Position des Videofeuers zufällig

Eine kurze Erläuterung der $notify-Punkte des Elements