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
Detaillierte Erklärung der Lösung für den Fehler beim Erstellen eines Benutzers und Erteilen von Berechtigungen in mysql8.0
Frage 1: Die Schreibmethode, die einen Fehler mel...
JavaScript-Entwurfsmuster, Proxy-Muster lernen
Inhaltsverzeichnis Überblick Durchführung Schutz-...
Detaillierte Erklärung der grundlegenden Verwendung des VUE Watch Listener
Inhaltsverzeichnis 1. Der folgende Code ist eine ...
Diagramm zum Implementierungsprozess der Linux-Jenkins-Konfigurations-Salve-Knoten
Vorwort: Die verteilte Master-Slave-Architektur v...
Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen
1. Übersicht Gruppieren nach bedeutet, Daten nach...
Multiservice-Image-Packaging-Vorgang von Dockerfile unter Aufsicht
Schreiben einer Docker-Datei Konfigurieren Sie di...
VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion
Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...
Detaillierte Schritte zum Erstellen eines Vue-Scaffolding-Projekts
Vue-Gerüst -> vue.cli Erstellen Sie schnell ei...
Tutorial zur Installation von MySQL 8.0.18 unter Windows (Community Edition)
In diesem Artikel wird kurz die Installation von ...
Zusammenfassung der Grundkenntnisse und Vorgänge der MySQL-Datenbank
Dieser Artikel erläutert anhand von Beispielen di...
Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME
Verwenden Sie die FRAME-Eigenschaft, um den Stilt...
Beispiel zum Erstellen eines lokalen Benutzers in MySQL und Erteilen von Datenbankberechtigungen
Vorwort Wenn Sie MySQL installieren, erstellen Si...
Design-Story: Der Wachmann, der sich Nummernschilder nicht merken kann
<br />Um die Fahrzeuge zu regeln, die in die...
MySQL Order By-Codebeispiel für Sortierregeln für mehrere Felder
Sag es im Voraus Aus einer Laune heraus möchte ic...
So installieren und konfigurieren Sie MySQL und ändern das Root-Passwort
1. Installation apt-get install mysql-server erfo...