Eine kurze Diskussion über die vereinfachte Abkürzung von CSS-Code

Die heutzutage von vielen Menschen verwendeten CSS-Codes sind sehr umständlich. Tatsächlich können viele davon vereinfacht und abgekürzt werden.
Dieses Mal werde ich basierend auf dem, was ich weiß, mit Ihnen über die vereinfachte Abkürzung von CSS-Code sprechen.

1. Alle CSS-Codes müssen nur ein Style-Tag verwenden. Es ist nicht erforderlich, eines zu jedem Absatz hinzuzufügen. Zum Beispiel:
body{background:url("") wiederholen behoben!important;}

.bodybg{background:url("") no repeat no scroll!important;}

Es kann vereinfacht und zusammengeführt werden in:

body{background:url("") reparieded!important;}
.bodybg{background:url("") no repeat no scroll!important; }

CSS-Codes wie das Ändern des Hintergrunds jedes Teils des Blogs, das Ändern der Schriftfarbe jedes Teils des Blogs, das Ändern der Breite der Vorlage, der Maus, der Bildlaufleiste usw. können eingebunden werden ein Style-Tag.


2. Farbe: Hexadezimaler Farbwert. Wenn die Werte der beiden Ziffern gleich sind, können sie zum Beispiel halbiert werden:

Schwarz #000000 abgekürzt werden mit #000; Weiß #ffffff kann mit #fff abgekürzt werden; kann mit #369 abgekürzt werden.

Einige gängige Farben wie Schwarz, Weiß, Rot, Blau, Grün, Gelb usw. Wenn Sie sich nicht an den Code erinnern können, können Sie die entsprechenden englischen Farben Schwarz, Weiß, Rot, Blau, Grün verwenden. gelb usw. zum Ausdruck bringen.

3. Wenn Sie mehrere Attribute desselben Logos steuern, können Sie mehrere Attribute in eine geschweifte Klammer setzen und verschiedene Attribute durch Semikolons trennen. Beispielsweise ein großer Hintergrund und eine große Bildlaufleiste:

body {background:url("") wiederholen behoben!important;}
body {SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT -COLOR : #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR : # EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}

kann vereinfacht und zusammengeführt werden in:

body {background:url("") wiederholen behoben!important;
SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;🎜>

4. Steuern Sie mehrere Identitäten mit die gleichen Attribute Sie können auch miteinander kombiniert und durch Kommas getrennt werden. Zum Beispiel:

.bodytop{background:#transparent;}
.bodybg{background:#transparent;}

kann vereinfacht und zusammengeführt werden zu:

. bodytop,. bodybg{background:#transparent;}
.bodytop{display:none;}
.bodyBottom{display:none;}

kann vereinfacht und zusammengeführt werden zu:

.bodytop, .bodyBottom{display:none;}


.feeds .text a{color:#000;}
.feeds .function a{color:#000;}
kann das Zusammenführen vereinfachen Für:

.feeds .text a,.feeds .function a{color:#000}

Ich gebe Ihnen so viele Beispiele, nur um es und Sie klarer zu machen Sie müssen es auf Ihre eigene Situation stützen, um den Abkürzungscode zu vereinfachen.

Gefällt mir der Code für die transparente Homepage-Vorlage, die jetzt von vielen Leuten in ihren Blogs gepostet wird:

.logo
{background:#transparent}
.banner
{ Hintergrund:#transparent }
.menu
{Hintergrund:#transparent}
.bodyBg
{Hintergrund:#transparent}
.bodyBottom
{Hintergrund:#transparent}
.feeds .up
{background:#transparent}
.feeds .down
{background:#transparent} .page
{background:#transparent}
.links .up
{background:#transparent}
{background:#transparent}
.photo .mid
{background:#transparent}
.label .mid
{background:#transparent}
.calendar .mid
{background: #transparent} Hintergrund:#transparent }
.gbook .up
{Hintergrund:#transparent}
.gbook .down
{Hintergrund:#transparent}
.links .more
{Hintergrund: #transparent}
.add .ico
{background:#transparent}
.add
{background:#transparent}

Tatsächlich kann es abgekürzt werden als:

.logo, .banner,.menu,
.bodyBg,.bodyBottom,.feeds .up,.feeds .down,.feeds .function,.feeds .page,
.links .up, .links .down,.links .mid,.photo .mid,.label .mid,
.calendar .mid,.callboard .up,.callboard .down,.callboard .mid,
.gbook .up ,.gbook .down,.links .more,.add .ico,.add
{background:#transparent}


Hintergründe

Die Attribute des Hintergrunds sind wie folgt:

Hintergrundfarbe:#f00;
Hintergrundbild:url("");
Hintergrundwiederholung:keine Wiederholung;
Hintergrundanhang:fest;
Hintergrundposition:0 0;

kann zu einem Satz abgekürzt werden: Hintergrund:#f00 URL("") No-Repeat Fixed 0 0;

Die Syntax lautet: Hintergrund:Farbbild-Wiederholungsposition des Anhangs;


7. Rand

Die Eigenschaften des Randes sind wie folgt:

border-width:1px;
border-; color:#000 ;

kann zu einem Satz abgekürzt werden: border:1px solid #000; Die Syntax lautet: border:width style color;


9. Schriftarten (Schriftarten)

Die Attribute der Schriftart sind wie folgt:

font-style:italic;
font-variant:small-caps;
font-weight :bold;
font-size:1em ;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

kann abgekürzt werden als: Schriftart :italic small-capsbold 1em/140% Lucida Grande",sans-serif;

Beachten Sie, dass Sie bei einer Abkürzung der Schriftartdefinition mindestens zwei Werte definieren müssen: Schriftgröße und Schriftfamilie.
10. Der CSS-Code berücksichtigt keine Groß-/Kleinschreibung, Zeilenumbrüche oder Leerzeichen, solange das Format korrekt ist.

Der Vorteil der CSS-Abkürzung für unseren Blog besteht darin, dass sie den Code vereinfachen und weniger redundant machen kann. Sie ist jedoch für die Erstellung einer Website sehr wichtig.
Die Geschwindigkeit beim Aufrufen von CSS-Stylesheet-Dateien hängt damit zusammen Je kleiner die Datei, desto schneller die Aufrufgeschwindigkeit.
In gewisser Hinsicht kann es die Ladegeschwindigkeit von Website-Seiten verbessern, und Geschwindigkeit ist ein entscheidender Faktor für eine Website.

Daher sollten Sie beim Erstellen von CSS-Stylesheet-Dateien versuchen, den Code abzukürzen und zu vereinfachen, z. B. durch einige zusätzliche Leerzeichen
und beispielsweise die Kommentare im Code, den ich in der Gesamtvorlage sechs bereitgestellt habe „Lock Heart for You“ usw. sollten so weit wie möglich gelöscht werden.


Hier ist eine Liste der abgekürzten CSS-Eigenschaften und der allgemeinen Eigenschaften, die sie darstellen:

Hintergrund: Hintergrundanhang, Hintergrundfarbe, Hintergrundbild, Hintergrundposition, Hintergrundwiederholung
Rahmen (Rand): Randfarbe, Randstil, Randbreite
border-bottom (unterer Rand): untere Randfarbe, unterer Randstil, untere Randbreite
border-left (linker Rand): linke Randfarbe, Stil des linken Randes, Breite des linken Randes
border-right (rechter Rand): Farbe des rechten Randes, Stil des rechten Randes, Breite des rechten Randes
border-top (oberer Rand): Farbe des oberen Randes, Stil des oberen Randes, oberer Rand Breite
Cue (Sound-Eingabeaufforderung): vordere Eingabeaufforderung, Post-Eingabeaufforderung
Schriftart (Schriftart): Schriftart, Schriftgröße, Schriftstil, Schriftstärke, Schriftvariante, Zeilenhöhe, Anpassung der Schriftgröße, Schriftdehnung
Liste -style (Listenstil): Listenstilbild, Listenstilposition, Listenstiltyp
Rand (leer): oberer Rand, rechter Rand, unterer Rand, linker Rand
Umriss (Umriss): Umrissfarbe, Umrissstil , Umrissbreite
Auffüllung (Lücke): obere Lücke, rechte Lücke, untere Lücke, linke Lücke
Pause (Pause): hintere Pause, vordere Pause
Der Anhang ist ein sehr einfach zu verwendender CSS-Code Editor, der Effekte in Echtzeit anzeigen kann.
()