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
La valeur de couleur hexadécimale, si les valeurs de chacun des deux chiffres sont les mêmes, peut être abrégée 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 la valeur de droite et de gauche est valeur2.
- property:value1 value2 value3; signifie que la valeur du haut est valeur1, la valeur de droite et de gauche est valeur2 et la valeur du bas est valeur3.
- property:value1 value2 value3 value4; Les quatre valeurs représentent tour à tour haut, droite, bas, gauche
Le moyen pratique de mémoriser est dans le sens des aiguilles d'une montre, en haut à droite, en bas à gauche. Des exemples d'applications spécifiques en marge et en remplissage sont les suivants :
margin:1em 0 2em 0.5em
Bordure(frontière)
Les propriétés de la bordure sont les suivantes :
- border-width:1px;
- border-style:solid;
- couleur de la bordure :#000;
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 de fond :#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
-
peut être abrégé en une phrase : background:#f00 url(background.gif) no-repeatfixed 0 0
La syntaxe est
background:position de pièce jointe de répétition d'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 : faites défiler
- position : 0% 0%
-
Polices
Les attributs de la police sont les suivants :
style de police : italique ;
- font-variant:small-caps;
- font-weight: gras;
- taille de police : 1em ;
- hauteur de ligne : 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.
Listes
Pour annuler les points et les numéros de série par défaut, vous pouvez écrire list-style:none;,
Les attributs de
liste sont les suivants :
list-style-type : carré ;
- list-style-position:inside;
- list-style-image:url(image.gif);
-
peut être abrégé en une phrase : list-style:square inside url(image.gif);