L'utilisation d'abréviations peut aider à réduire la taille de vos fichiers CSS et à les rendre plus faciles à lire. Les principales règles pour les abréviations CSS sont les suivantes :
couleur
Les valeurs de couleur hexadécimales, si les valeurs de chacun des deux chiffres sont identiques, peuvent être abrégées de moitié, par exemple : #000000 peut être abrégé en #000 ; #336699 peut être abrégé en #369 ;
Taille de la boîte
Il existe généralement quatre méthodes d'écriture :
property:value1; signifie que toutes les arêtes ont une valeur value1 ;
property:value1 value2 ; signifie que la valeur du haut et du bas est valeur1 et que la valeur de droite et de gauche est valeur2.
property:value1 value2 value3 ; signifie que la valeur du haut est la valeur1, la valeur de la droite et de la gauche est la valeur2 et la valeur du bas est la valeur3.
property:value1 value2 value3 value4;Les quatre valeurs représentent le haut, la droite, le bas et la gauche dans l'ordre
Un moyen pratique de se souvenir est dans le sens des aiguilles d'une montre, en haut à droite, en bas à gauche. Des exemples d'applications spécifiques en matière de marge et de remplissage sont les suivants :
marge : 1em 0 2em 0,5em ;
frontière
Les propriétés de la bordure sont les suivantes :
largeur de bordure : 1 px ;
style de bordure : solide ;
couleur de la bordure : #000 ;
Il peut être abrégé en une phrase : border:1px solid #000;
La syntaxe est border:width style color ;
Arrière-plans
Les propriétés du fond sont les suivantes :
couleur d'arrière-plan : #f00 ;
image d'arrière-plan:url(background.gif);
répétition d'arrière-plan : pas de répétition ;
pièce jointe d'arrière-plan : corrigé ;
position d'arrière-plan : 0 0 ;
Il peut être abrégé en une phrase : background:#f00 url(background.gif) no-repeatfixed 0 0;
La syntaxe est la suivante : background : position de la pièce jointe de répétition de l'image couleur ;
Vous pouvez omettre une ou plusieurs valeurs d'attribut. En cas d'omission, la valeur d'attribut utilisera la valeur par défaut du navigateur. La valeur par défaut est :
couleur: transparent
image : aucune
répéter : répéter
pièce jointe : défilement
poste : 0 % 0 %
polices
Les propriétés de la police sont les suivantes :
style de police : italique ;
variante de police : petites majuscules ;
poids de la police : gras ;
taille de police : 1em ;
hauteur de ligne : 140 % ;
famille de polices : "Lucida Grande", sans-serif ;
Il 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 police, vous devez définir au moins deux valeurs : font-size et font-family.
Listes
Pour annuler les points et les numéros de série par défaut, vous pouvez écrire list-style:none;,
Les propriétés de list sont les suivantes :
type de style de liste: carré ;
position-style-liste : à l'intérieur ;
liste-style-image:url(image.gif);
Il peut être abrégé en une phrase : list-style:square inside url(image.gif);