CSS-də qısaltmalar

CSS, kodlaşdırma edərkən bəzi qısaltmalardan istifadə etməyimizə icazə verir. Beləcə həm çox kod yığınından xilas olmuş oluruq, həm də faylın həcmini ən aza endirmiş oluruq.

1. Font
Normal olaraq şrift qeyd etmək istəyəndə 4 CSS kodu istifadə edilir: 
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;
Bunu qısaldaraq bir sətirdə yaza bilərik:
font: bold 11px/15px verdana, sans-serif;
 
2. Background
Background (arxa fon) istifadəsi zamanı 5 ədəd css kodundan istifadə edilir. Bunu da qısaldıb, bir sətir etmək mümkündür.
background-color: #000; 
background-image: url(fon.jpg);
background-repeat: no-repeat; 
background-attachment: fixed;
background-position: 50px 50px;
Qısaltsaq:
background: { 
    #000 url(fon.jpg) no-repeat fixed 50px 50px; 
}
 
3. Rənglər (Hex-decimal)
CSS stillərində rənglər adətən hex-decimal rəng kodu ilə təyin olunur. Məsələn color: #ff0000; qırmızı. Rənglər 6 simvolla göstərilsə də bir çox rəng 3 simvolun təkrarlanması ilə yaradılır. Məsələn, qırmızının hex-decimal kodunun qısaltsaq color: #f00; olar. Buradakı hər simvol hex-decimal koddakı iki simvolu əvəz edir. Məsələn, ağ rəng üçün, color: white; və ya color: #ffffff; istifadəsi elə də məsləhət görülmür. Qısaldılmış olanı, yəni color: #fff; istifadə etmək daha yaxşı olar.
 
4. Border
Border (Kənarlar) istifadəsi zamanı hər xüsusiyyət üçün bir təyin etmə aparılır. Nümunə olaraq bir elementin üst kənarı üçün: 
border-top-width: 2px; 
border-top-style: dashed;
border-top-color: #f00;
Qısaltsaq:
border-top: 2px dashed #f00;
Bu xüsusiyyətləri bütün kənarlara tətbiq etmək üçün: 
border: 2px dashed #f00;
 
5. Margin və Padding
Margin və padding üçün normal təyin etmə belədir:
margin-top: 10px; 
margin-right: 5px; 
margin-bottom: 20px; 
margin-left: 15px;
Qısaldılmış halı
margin: 10px 5px 20px 15px;
 
Burada dəyərlər sağdan başlayaraq saat istiqamətində davam edir. Aşağıda müxtəlif qısaltma üsulları göstərilmişdir:

4 dəyər: (margin: 20px 15px 10px 5px;) birinci - üst, ikinci - sağ, üçüncü - alt, dördüncü - sol.

3 dəyər: (margin: 20px 15px 10px;) birinci - üst, ikinci - sol və sağ, üçüncü - alt. 

2 dəyər: (margin: 20px 15px;) birinci - üst və alt, ikinci - sol və sağ. 

1 dəyər: (margin: 10px;) - üst, sağ, alt və sol
 
6. Siyahılar
Siyahı kodlarında da qısaltmalar mümkündür.
ul { 
    list-style-type:square; 
    list-style-position:inside;
    list-style-image:url(image.png); 
}
Qısaltsaq:
ul li { 
    list-style:square inside url(image.png); 
} /* burada xüsusi bir vəziyyət vardır ki, əgər şəkil yoxdursa ehtiyat olaraq square xüsusiyyəti göstəriləcək. */
 
7. Sıfır '0'-ın qısaltma olaraq istifadə edilməsi
Qısaltmalarda son olaraq '0'-ın istifadəsini nəzərdən keçirək. Normalda bir elementə dəyər təyin edilərkən dəyərin yanına vahidi də yazılır (məsələn: 3px, 0.2em və s.). Ancaq sıfır '0' üçün bu zəruri deyilidir. 
padding:0;
Bu vəziyyətin bir istisna halı mövcuddur, əgər faiz dəyərləri verilərsə o zaman 0% olaraq qeyd edilməlidir.
CSS3