L’un des moyens les plus efficaces d’écrire du CSS consiste à utiliser des abréviations. L'utilisation d'abréviations peut rendre vos fichiers CSS plus petits et plus lisibles. Comprendre les abréviations des propriétés CSS est également l'une des compétences de base des ingénieurs de développement front-end. Aujourd'hui, nous résumons systématiquement les abréviations des propriétés CSS.
abréviation de couleur
L'abréviation de couleur est la plus simple. Lorsque la valeur de la couleur est en hexadécimal, si la valeur de chaque couleur est la même, elle peut s'écrire :
| couleur: #113366 |
peut être abrégé en
| couleur: #136 |
Les abréviations peuvent être utilisées partout où des valeurs de couleur hexadécimales sont utilisées, telles que background-color, border-color, text-shadow, box-shadow, etc.
taille de la boîte
Il y a principalement deux attributs utilisés ici : margin et padding. Nous prenons margin comme exemple, et padding est le même. La boîte comporte quatre directions : haut, bas, gauche et droite, et chaque direction comporte une marge :
| marge supérieure : 1 px ; marge droite : 1px ; marge-botton : 1px ; marge gauche : 1px ; |
Ces quatre valeurs peuvent être abrégées ensemble :
| marge : 1px 1px 1px 1px ; |
L’ordre des abréviations est haut->droite->bas->gauche. Sens horaire. Si les valeurs des côtés opposés sont les mêmes, elles peuvent être omises :
| margin:1px;//Les marges dans les quatre directions sont les mêmes, ce qui équivaut à margin:1px 1px 1px 1px; margin:1px 2px;//Les marges supérieure et inférieure sont toutes deux de 1px, et les marges gauche et droite sont toutes deux de 2px, ce qui équivaut à margin:1px 2px 1px 2px margin:1px 2px 3px;//La marge droite et la marge gauche sont identiques, ce qui équivaut à margin:1px 2px 3px 2px; margin:1px 2px 1px 3px;//Notez que bien que les marges supérieure et inférieure ici soient toutes deux de 1px, les abréviations ne peuvent pas être utilisées ici. |
frontière
Border est un attribut relativement flexible. Il comporte trois sous-attributs : border-width, border-style et border-color.
| largeur de bordure : nombre + unité ; style de bordure : aucun || pointillé || double rainure || début de crête || couleur de la bordure : couleur ; |
Il peut être abrégé dans l'ordre de largeur, de style et de couleur :
| bordure : 5px solide #369 ; |
Parfois, la bordure peut être écrite plus simplement et certaines valeurs peuvent être omises, mais faites attention à celles qui sont nécessaires. Vous pouvez également la tester :
| border:groove red; //Devinez quelle est la largeur de cette bordure ? border:solid; //À quoi cela ressemblerait-il ? border:5px; //Est-ce que ça va ? border:5px red; //Est-ce que ça va ? ? border:red; //Est-ce que ça va ? ? ? |
Comme vous pouvez le voir dans le code ci-dessus, la largeur par défaut de la bordure est de 3 pixels et la couleur par défaut est noir-noir. Dans l’abréviation de border, border-style est requis.
Vous pouvez également utiliser des abréviations pour chaque arête :
| bordure supérieure : 4 px solide #333 ; bordure droite : 3px solide #666 ; bordure inférieure : 3px solide #666 ; bordure gauche : 4px solide #333 ; |
Vous pouvez également utiliser des abréviations pour chaque attribut :
| border-width: 1px 2px 3px; //Jusqu'à quatre valeurs peuvent être utilisées, les règles d'abréviation sont similaires à l'abréviation de taille de boîte, la même ci-dessous style de bordure : rainure en pointillés pleins ; couleur de la bordure : rouge bleu blanc noir ; |
contour
Le contour est similaire à la bordure. La différence est que la bordure affectera le modèle de boîte, mais pas le contour.
| largeur du contour : nombre + unité ; style de contour : aucun || pointillé || double rainure || début de crête || couleur du contour : couleur ; |
Peut être abrégé comme suit :
| contour : 1px rouge uni ; |
De même, dans l'abréviation de outline, outline-style est également requis et les deux autres valeurs sont facultatives. La valeur par défaut est la même que border.
arrière-plan
L'arrière-plan est l'une des abréviations les plus couramment utilisées et contient les propriétés suivantes :
| couleur d'arrière-plan : couleur || #hex || RVB (% || 0-255) || image d'arrière-plan:url(); répétition d'arrière-plan : répéter || répéter-x || répéter-y || position d'arrière-plan : XY || (haut||bas||centre) (gauche||droite||centre) ; background-attachment : défilement || corrigé ; |
L'abréviation de background peut grandement améliorer l'efficacité du CSS :
| background:#fff url(img.png) non-répétition 0 0 ; |
L'abréviation de background a également quelques valeurs par défaut :
| arrière-plan : transparent aucun répéter le défilement en haut à gauche ; |
La valeur de la propriété background ne sera pas héritée. Vous ne pouvez en déclarer qu'une seule et la valeur par défaut sera appliquée aux autres valeurs.
fonte
L’abréviation de police est également la plus utilisée, et c’est également l’un des moyens d’écrire du CSS efficace.
la police contient les propriétés suivantes :
| style de police : normal italique || oblique ; variante de police:normale || petites majuscules; poids de la police : normal || plus gras || plus léger (100-900); taille de police : (nombre+unité) || (xx-small - xx-large) ; hauteur de ligne : normal || (nombre+unité) ; font-family:name,"plus de noms"; |
Chaque attribut de font a également une valeur par défaut. Il est relativement important de retenir ces valeurs par défaut :
| style de police : normal ; variante de police : normal ; poids de la police : normal ; taille de police : hériter ; hauteur de ligne : normale ; famille de polices : hériter ; |
En fait, l'abréviation de police est celle qui nécessite le plus de prudence parmi ces abréviations. Une légère négligence peut entraîner des conséquences inattendues. Par conséquent, de nombreuses personnes ne sont pas d'accord avec l'utilisation de l'abréviation de police.
Mais voici un petit manuel, je pense qu'il vous aidera à mieux comprendre l'abréviation de font :
style de liste
L’attribut des listes le plus couramment utilisé est peut-être :
| style de liste : aucun |
Il efface tous les styles de liste par défaut, tels que les nombres ou les points.
list-style a également trois attributs :
| list-style-type:aucun || disque || carré || alpha-inférieur || list-style-position : à l'intérieur || à l'extérieur || list-style-image : (url) || aucun hériter || |
Les attributs par défaut de list-style sont les suivants :
| style de liste : disque extérieur à aucun |
A noter que si une image est définie en list-style, la priorité de l'image est supérieure à celle de list-style-type, par exemple :
| style de liste : cercle à l'intérieur de l'URL (../img.gif) |
Dans cet exemple, si img.gif existe, le symbole de cercle défini précédemment ne sera pas affiché.
PS : En fait, list-style-type a de nombreux styles utiles. Les étudiants intéressés peuvent se référer à : https://developer.mozilla.org/en/CSS/list-style-type.
rayon de bordure (rayon du coin)
Border-radius est un attribut nouvellement ajouté dans CSS3, utilisé pour implémenter des bordures arrondies. L'inconvénient actuel de cet attribut est que chaque navigateur le prend en charge différemment. IE ne le prend pas encore en charge. Gecko (firefox) et webkit (safari/chrome) doivent respectivement utiliser les préfixes privés -moz- et -webkit-. Ce qui est encore plus déroutant, c'est que si l'attribut border-radius d'un seul coin est écrit de manière plus différente entre les deux navigateurs, vous devrez écrire un grand nombre d'attributs privés :
| -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; bordure-bas-gauche-radius:6px; bordure-haut-gauche-radius:6px; bordure en haut à droite : 6px ; |
Euh, tu es déjà ébloui ? Il s'agit simplement d'obtenir la situation dans laquelle le coin supérieur gauche n'est pas arrondi et les trois autres coins sont arrondis. Ainsi, pour le rayon-frontière, Shenfei recommande fortement d'utiliser l'abréviation :
| -moz-border-radius:0 6px 6px; -webkit-border-radius :0 6px 6px ; rayon de bordure : 0 6px 6px ; |
C'est beaucoup plus simple. PS : Malheureusement, le dernier Safari (4.0.5) ne supporte pas encore cette abréviation... (merci @fireyy)
C'est tout. Y a-t-il d'autres attributs qui peuvent être abrégés ? Tout le monde est invité à en discuter ensemble.