Maison > interface Web > tutoriel CSS > [CSS Note 8] Abréviation du code CSS, occupant moins de bande passante

[CSS Note 8] Abréviation du code CSS, occupant moins de bande passante

黄舟
Libérer: 2016-12-29 13:55:42
original
1258 Les gens l'ont consulté

1. Abréviation du code du modèle de boîte
N'oubliez pas que lorsque vous parlez du modèle de boîte, les marges, le remplissage et les bordures sont définis dans les quatre directions du haut, du bas, de la gauche et de la droite dans le sens des aiguilles d'une montre. Définir : en haut à droite, en bas à gauche. Des exemples d'applications spécifiques en marge et en remplissage sont les suivants :

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
Copier après la connexion

a généralement les trois abréviations suivantes :

Si les valeurs haut, droite, bas. , et left sont identiques, Par exemple, le code suivant :

margin:10px 10px 10px 10px;
Copier après la connexion

peut être abrégé en :

margin:10px;
Copier après la connexion

2. Si les valeurs de top et en bas sont les mêmes, les valeurs de gauche et de droite sont les mêmes, comme dans le code suivant :

margin:10px 20px 10px 20px;
Copier après la connexion

peut être abrégé en :

margin:10px 20px;
Copier après la connexion

3. Si les valeurs de gauche et de droite sont les mêmes, comme dans le code suivant :

margin:10px 20px 30px 20px;
Copier après la connexion

peut être abrégé en :

margin:10px 20px 30px;
Copier après la connexion

Remarque : les méthodes d'abréviation de padding et de border sont les mêmes que celles de margin.

2. Abréviation de la valeur de couleur
Le style CSS de couleur peut également être abrégé lorsque la couleur que vous définissez est une valeur de couleur hexadécimale, si les valeurs de chacun des deux chiffres sont les mêmes. , vous pouvez Abréviation moitié.

Exemple 1 :

p{color:#000000;}
可以缩写为:
p{color: #000;}
例子2:
p{color: #336699;}
可以缩写为:
p{color: #369;}
Copier après la connexion

3. Abréviation de police
Le code de style CSS de police dans la page Web a également sa propre abréviation. Voici le code pour définir la police. la page Web :

body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; }
Copier après la connexion

Tant de lignes de code peuvent en fait être abrégées en une seule phrase :

body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; }
Copier après la connexion

Remarque :

1 . En utilisant cette abréviation, vous devez au moins Pour spécifier les propriétés font-size et font-family, d'autres propriétés (telles que font-weight, font-style, font-varient, line-height) utiliseront automatiquement la valeur par défaut si ce n'est pas le cas. spécifié.

2. Lorsque vous abrégez, ajoutez "/" en diagonale entre la taille de la police et la hauteur de la ligne.

En général, comme il y a encore relativement peu d'anglais pour les sites Web chinois, les codes d'abréviation suivants sont plus couramment utilisés :

body{ font:12px/1.5em "宋体",sans-serif; }
Copier après la connexion

Il n'a que la taille de la police, l'espacement des lignes, la police chinoise et Paramètres de police anglais.

Ce qui précède est l'abréviation du code CSS [CSS Note 8], qui consomme moins de bande passante. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal