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:
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
Artikel empfehlen
Häufige Tomcat-Ausnahmen und Lösungscodebeispiele
Das Unternehmensprojekt wurde in Java entwickelt ...
So drücken Sie relative Pfade in Linux aus
Wenn Ihr aktueller Pfad beispielsweise /var/log i...
Detaillierte Erläuterung der erweiterten Konstruktionseigenschaften von Vue
Inhaltsverzeichnis 1. Richtlinie Zollrichtlinie 2...
Zusammenfassung der HTML-Formatierungsstandards für webbasierte E-Mail-Inhalte
1. Seitenanforderungen 1) Verwenden Sie standardm...
SSM VUE Axios Detaillierte Erklärung
Inhaltsverzeichnis Wie wird das SQL-Protokoll ang...
Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen
Ich habe meiner persönlichen Website vor Kurzem e...
So verwenden Sie den dd-Befehl in Linux, ohne die Festplatte zu zerstören
Egal, ob Sie versuchen, Daten von einem sterbende...
Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis
1. Die Div-CSS-Maushandform ist Cursor:Zeiger; 2. ...
Detaillierte Erläuterung der Wertübertragung von nicht über- und untergeordneten Komponenten in Vue3
Inhaltsverzeichnis App.vue sub1.vue sub2.vue Zusa...
js realisiert die Funktion zum Klicken zum Wechseln der Karte
In diesem Artikelbeispiel wird der spezifische Co...
Erstellen eines FastDFS-Dateisystems in Docker (Tutorial mit mehreren Images)
Inhaltsverzeichnis Über FastDFS 1. Suche nach Bil...
3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen
Inhaltsverzeichnis 1. Der magische Erweiterungsop...
Detailliertes Tutorial zur Verwendung von VMware WorkStation mit Docker für Windows
Inhaltsverzeichnis 1. Einleitung 2. Installieren ...
Der Einsatz von MySQL Triggern und worauf zu achten ist
Inhaltsverzeichnis Über Trigger Verwendung von Tr...
So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp
Heute verwenden wir Uniapp, um Echarts zur Anzeig...