CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation

Durch die Verwendung von Abkürzungen können Sie die Größe Ihrer CSS-Dateien verringern und sie leichter lesbar machen. Die wichtigsten Regeln für CSS-Abkürzungen finden Sie unter „Zusammenfassung der Syntax allgemeiner CSS-Abkürzungen“. Die wichtigsten Regeln für CSS-Abkürzungen lauten wie folgt:

Farbe
Wenn die Werte je zweier Ziffern eines hexadezimalen Farbwertes gleich sind, können diese in zwei Hälften gekürzt werden, zum Beispiel:
#000000 kann als #000 abgekürzt werden; #336699 kann als #369 abgekürzt werden;

Hinweis: Vermischen Sie Volltext- und abgekürzte Farbkonfigurationen nicht im selben CSS-Konfigurationsabschnitt, da dies bei extrem niedrigen Systemressourcen zu Darstellungsfehlern im Browser führen kann.

Kastengröße <br />Es gibt normalerweise vier Möglichkeiten, sie zu schreiben:
Eigenschaft: Wert1; bedeutet, dass alle Kanten den Wert Wert1 haben;
Eigenschaft: Wert1 Wert2; bedeutet, dass die Werte oben und unten Wert1 und die Werte rechts und links Wert2 sind
Eigenschaft: Wert1 Wert2 Wert3; bedeutet, dass der Wert oben Wert1 ist, die Werte rechts und links Wert2 sind und der Wert unten Wert3 ist
Eigenschaft: Wert1 Wert2 Wert3 Wert4; die vier Werte stehen jeweils für oben, rechts, unten und links
Eine praktische Methode zum Merken ist im Uhrzeigersinn: oben, rechts, unten, links. Spezifische Anwendungsbeispiele für Ränder und Polsterungen sind wie folgt:
Rand: 1em 0 2em 0,5em;

Grenze
Die Eigenschaften der Grenze sind wie folgt:
Rahmenbreite: 1px;
Rahmenstil: durchgezogen;
Rahmenfarbe: #000;
Es kann in einem Satz abgekürzt werden: border:1px solid #000;
Die Syntax lautet Rahmen:Breite, Stil, Farbe;

Hintergründe
Die Eigenschaften des Hintergrunds sind wie folgt:
Hintergrundfarbe: #f00;
Hintergrundbild:URL(Hintergrund.gif);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundanhang: behoben;
Hintergrundposition: 0 0;
Es kann in einem Satz zusammengefasst werden: background:#f00 url(background.gif) no-repeat fixed 0 0;

Die Syntax lautet Hintergrund: Farbbild, Wiederholung der Anhängeposition;

Sie können einen oder mehrere dieser Eigenschaftswerte weglassen. Wenn Sie sie weglassen, wird der Standardwert des Browsers verwendet:

Farbe: transparent
Bild: keines
wiederholen: wiederholen
Anhang: Schriftrolle
Position: 0% 0%

Schriftarten
Die Schrifteigenschaften sind wie folgt:
Schriftstil: kursiv;
Schriftvariante: Kapitälchen;
Schriftstärke: fett;
Schriftgröße: 1em;
Zeilenhöhe: 140 %;
Schriftfamilie: „Lucida Grande“, serifenlos;
Es lässt sich zu einem Satz abkürzen: Schriftart: kursiv, Kapitälchen, fett 1em/140 % „Lucida Grande“, serifenlos;
Beachten Sie, dass Sie beim Abkürzen der Schriftartdefinition mindestens zwei Werte definieren müssen: Schriftgröße und Schriftfamilie.

Listen
Um die Standardpunkte und Seriennummern zu löschen, können Sie „list-style:none;“ schreiben.

Die Eigenschaften der Liste sind wie folgt:
Listenstiltyp: Quadrat;
Listenstil-Position:innen;
Listenstil-Bild:URL(Bild.gif);
Es kann auf einen Satz gekürzt werden: list-style:square inside url(image.gif);

<<: Analyse des MySQL-Beispiels DTID Master-Slave-Prinzip

>>: Lösen Sie das Problem, dass Zeilenhöhe = Elementhöhe, der Text aber nicht vertikal zentriert ist

Beispiel für die Implementierung einer Komponente mit fester Unterseite in Vue

Zusammenfassung gängiger MySQL-Funktionsbeispiele [Aggregatfunktionen, Zeichenfolgen, Zahlen, Zeit- und Datumsverarbeitung usw.]

Artikel

Was ist Webdesign

Artikel

So implementieren Sie CSS, um Auslassungspunkte anzuzeigen, wenn einzeiliger oder mehrzeiliger Text überläuft

Artikel

Artikel empfehlen

MySQL-Fehler: Beim Versuch, eine Sperre zu erhalten, wurde ein Deadlock festgestellt. Versuchen Sie, die Transaktionslösung neu zu starten.

Finden Sie das Problem Als ich kürzlich die vorhe...

CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation

Beispiel für die Implementierung einer Komponente mit fester Unterseite in Vue

Docker-Batch starten und alle Container schließen

JS implementiert das Schere-Stein-Papier-Spiel

Tutorial zur Verwendung von $attrs und $listeners in Vue

Vue implementiert das Senden von Emoticons im Chatfenster

CSS3 realisiert die Animation des Shuttle-Sternenhimmels

So installieren Sie Babel mit NPM in VSCode

Zusammenfassung gängiger MySQL-Funktionsbeispiele [Aggregatfunktionen, Zeichenfolgen, Zahlen, Zeit- und Datumsverarbeitung usw.]

Was ist Webdesign

So implementieren Sie CSS, um Auslassungspunkte anzuzeigen, wenn einzeiliger oder mehrzeiliger Text überläuft

Artikel empfehlen

MySQL-Fehler: Beim Versuch, eine Sperre zu erhalten, wurde ein Deadlock festgestellt. Versuchen Sie, die Transaktionslösung neu zu starten.

Mysql SQL-Anweisungsvorgang zum Hinzufügen oder Ändern des Primärschlüssels

So rufen Sie mit dem Flash-Plugin die Kamera des PCs auf und binden diese in die TML-Seite ein

Verwenden Sie vue2+elementui für Hover-Prompts

Führt das Laden von CSS zu einer Blockierung?

Detaillierte Erklärung der drei Möglichkeiten zum Festlegen von Rahmen in HTML

Nginx verwendet Reverse-Proxy, um eine Analyse des Lastausgleichsprozesses zu implementieren

Border-Radius IE8-kompatible Verarbeitungsmethode

So installieren Sie Redis in Docke

Detaillierte Erläuterung der Verwendung des Baidu-Stils in Eslint im React-Projekt

Next.js – Erste Schritte-Tutorial

So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern

Warum Seconds_Behind_Master immer noch 0 ist, wenn eine MySQL-Synchronisierungsverzögerung auftritt

mysql IS NULL mit Indexfallerklärung

Warum wird nicht empfohlen, in Vue eine leere Zeichenfolge als Klassennamen zu verwenden?