10 abréviations CSS/conseils d'optimisation compilés

Le plus grand avantage de l'abréviation est qu'elle peut réduire considérablement la taille des fichiers CSS, optimiser les performances globales du site Web et faciliter la lecture. Ce qui suit est une introduction aux règles d'abréviation CSS. peut s'y référer. J'espère que cela sera utile à tout le monde

L'abréviation CSS fait référence à l'abréviation de plusieurs lignes de propriétés CSS en une seule ligne, également connue sous le nom d'optimisation de code CSS ou d'abréviation CSS. Le plus grand avantage de l'abréviation CSS

est qu'elle peut réduire considérablement la taille des fichiers CSS, optimiser les performances globales du site Web et le rendre plus facile à lire. Ce qui suit présente les règles d'abréviation CSS courantes :

1. Taille de la boîte

Ici sont principalement utilisées pour deux attributs : margin et padding. et pareil.

La boîte a quatre directions, haut, bas, gauche et droite, et chaque direction a une marge :

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

Vous pouvez l'abréger comme :

margin:1px 2px 3px 4px;

Marge de syntaxe : haut à droite en bas à gauche

//四个方向的边距相同，等同于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. Border (border)

Les propriétés de la frontière sont les suivantes :

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

peut être abrégé en une phrase :

border:1px solid #000;

Bordure de syntaxe : couleur de style de largeur

Arrière-plans

Les attributs de l'arrière-plan. sont les suivantes :

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

peut être abrégé en une phrase :

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

La syntaxe est background:color image repeat attachment position;

vous Une ou plusieurs valeurs d'attribut peuvent être omises. En cas d'omission, la valeur de l'attribut utilisera la valeur par défaut du navigateur

. est :

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

4. Polices

Les attributs des polices sont les suivants :

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

peut être abrégé en une phrase :

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

Notez que si vous abrégez la définition de la police, vous devez définir au moins deux valeurs : font-size et font-family.

5. Listes

Pour annuler les points et les numéros de série par défaut, vous pouvez écrire list-style:none;,
Les attributs de la liste sont les suivants :

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

peut être abrégé en une phrase :

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

6. Couleur (Couleur)

Valeur de couleur hexadécimale, si la valeur de chacun des deux chiffres est la même, elle peut être abrégée de moitié. Par exemple :

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

7. La valeur de l'attribut est 0

Le principe d'écriture est que si la valeur de l'attribut CSS est 0, alors vous Au lieu d'y ajouter des unités (par exemple : px/em), vous pourriez l'écrire comme ceci :

 :

padding: 10px 5px 0px 0px;

Essayez ceci :

padding: 10px 5px 0 0;

8. Le dernier point-virgule

Le point-virgule après la dernière valeur d'attribut n'a pas besoin de l'être. être écrit, tel que :

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

peut être abrégé comme :

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

9. Font-weight

Vous pourriez écrire :

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

peut être abrégé comme :

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

10. Rayon de coin (border-radius)

Border-radius est un attribut nouvellement ajouté en CSS3, utilisé pour implémenter des bordures arrondies.

-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;

peut être abrégé comme suit :

-moz-border-radius:0 6px 6px; 
-webkit-border-radius:0 6px 6px; 
border-radius:0 6px 6px;

Syntaxe border-radius :topleft topright bottomright bottomleft

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!