10 CSS-Abkürzungen/Optimierungstipps zusammengestellt

Der größte Vorteil der Abkürzung besteht darin, dass sie die Größe von CSS-Dateien erheblich reduzieren, die Gesamtleistung der Website optimieren und sie leichter lesbar machen kann. Das Folgende ist eine Einführung in die CSS-Abkürzungsregeln Ich kann darauf verweisen. Ich hoffe, es wird für alle hilfreich sein

CSS-Abkürzung bezieht sich auf die Zusammenfassung mehrerer Zeilen von CSS-Eigenschaften in einer Zeile, auch bekannt als CSS-Codeoptimierung oder CSS-Abkürzung. Der größte Vorteil der Abkürzung CSS

besteht darin, dass sie die Größe von CSS-Dateien erheblich reduzieren, die Gesamtleistung der Website optimieren und sie leichter lesbar machen kann. Im Folgenden werden gängige CSS-Abkürzungsregeln vorgestellt:

1. Boxgröße
Hier werden hauptsächlich zwei Attribute verwendet: Rand und Polsterung und das Gleiche.

Das Feld hat vier Richtungen: oben, unten, links und rechts, und jede Richtung hat einen Rand:

margin-top:1px; 
margin-right:2px; 
margin-bottom:3px; 
margin-left:4px;

Sie können es abkürzen als:

margin:1px 2px 3px 4px;

Syntax-Rand: oben rechts unten links

//四个方向的边距相同，等同于margin:1px 1px 1px 1px; 
margin:1px; 
//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px 
margin:1px 2px; 
//右边距和左边距相同，等同于margin:1px 2px 3px 2px; 
margin:1px 2px 3px; 
//注意，这里虽然上下边距都为1px，但是这里不能缩写。 
margin:1px 2px 1px 3px;

2. Grenze (Grenze)

Die Eigenschaften der Grenze sind wie folgt:

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

kann auf einen Satz abgekürzt werden:

border:1px solid #000;

Syntax border:width style color


Hintergründe

Die Attribute des Hintergrunds lauten wie folgt:

background-color:#f00; 
background-image:url(background.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0;

kann zu einem Satz abgekürzt werden:

background:#f00 url(background.gif) no-repeat fixed 0 0;

Die Syntax ist Hintergrund: Farbbildwiederholungsposition; Sie können einen oder mehrere der Attributwerte weglassen. Wenn sie weggelassen werden, verwendet der Attributwert den Standardwert des Browsers ist:

4. Schriftarten

color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0%

Die Attribute von Schriftarten sind wie folgt:

kann auf einen Satz abgekürzt werden:

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

Beachten Sie, dass Sie bei einer Abkürzung die Schriftartdefinition mindestens definieren müssen zwei Werte: Schriftgröße und Schriftfamilie.

5. Listen

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Um die Standardpunkte und fortlaufenden Nummern zu löschen, können Sie list-style:none; schreiben.
Die Attribute der Liste sind wie folgt :

kann auf einen Satz abgekürzt werden:

list-style-type:square; 
list-style-position:inside; 
list-style-image:url(image.gif);

6. Farbe (Farbe)

list-style:square inside url(image.gif);

Hexadezimaler Farbwert. Wenn der Wert aller beiden Ziffern gleich ist, kann er halbiert werden. Zum Beispiel:

7. Der Attributwert ist 0

Aqua: #00ffff ——#0ff 
Black: #000000 ——#000 
Blue: #0000ff ——#00f 
Dark Grey: #666666 ——#666 
Fuchsia:#ff00ff ——#f0f 
Light Grey: #cccccc ——#ccc 
Lime: #00ff00 ——#0f0 
Orange: #ff6600 ——#f60 
Red: #ff0000 ——#f00 
White: #ffffff ——#fff 
Yellow: #ffff00 ——#ff0

Das Schreibprinzip ist, dass wenn der CSS-Attributwert 0 ist, dann können Sie es, anstatt Einheiten hinzuzufügen (z. B. px/em), so schreiben:

:

Versuchen Sie Folgendes:

padding: 10px 5px 0px 0px;

8. Das letzte Semikolon

padding: 10px 5px 0 0;

Das Semikolon nach dem letzten Attributwert muss nicht sein geschrieben werden, wie zum Beispiel:

kann abgekürzt werden als:

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal; 
}

9. Schriftstärke

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal 
}

Sie könnten schreiben:

kann abgekürzt werden als:

h1{ 
font-weight:bold; 
} 
p{ 
font-weight:normal; 
}

10. Eckenradius (border-radius)

h1{ 
font-weight:700; 
} 
p{ 
font-weight:400; 
}

Border-radius ist ein neu hinzugefügtes Attribut in CSS3, das zum Implementieren abgerundeter Ränder verwendet wird.

kann abgekürzt werden als:

-moz-border-radius-bottomleft:6px; 
-moz-border-radius-topleft:6px; 
-moz-border-radius-topright:6px; 
-webkit-border-bottom-left-radius:6px; 
-webkit-border-top-left-radius:6px; 
-webkit-border-top-right-radius:6px; 
border-bottom-left-radius:6px; 
border-top-left-radius:6px; 
border-top-right-radius:6px;

Syntax border-radius:topleft topright bottomright bottomleft

Das obige ist der detaillierte Inhalt von10 CSS-Abkürzungen/Optimierungstipps zusammengestellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!