CSS:kodlama
yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece
hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını
en aza indirmiş oluruz.
1. Font
Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:
view sourceprint?1.font-weight: bold;
2.font-family: verdana, sans-serif;
3.font-size: 11px;
4.line-height: 15px;
Kısaltma olarak kullanlan kod ise tek satır:
view sourceprint?1.font: bold 11px/15px verdana, sans-serif;
2. Background
Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma
kullanarak tek tanıma indirebilriz.
view sourceprint?1.background-color: #000;
2.background-image: url(ard.jpg);
3.background-repeat: no-repeat;
4.background-attachment: fixed;
5.background-position: 50px 50px;
Kısaltırsak:
view sourceprint?1.background: { #000 url(ard.jpg) no-repeat fixed
50px 50px; }
3. Renkler(Hex-decimal)
CSS stillerinde renkler genelde hex-decimal renk kodu ile
tanımlanır örneğin color: #ff0000; kırmızı. Renkler 6 karakterle
gösterilsede bir çok renk(web tabanlı) 3 karakterin tekrarlanması
ile oluşturulur. Örneğin, kırmızı’nın hex-decimal kodunun
kısaltırsak color: #f00;. Buradaki her karakter hex-decimal koddaki
iki karaktere karşılık gelmektedir. Mesela, beyaz renk
kullanacağınızda, color: white; veya color: #ffffff; kulanımı
önermeyiz. Kısaltılmış olanı color: #fff; kullanmanız daha
avantajlıdır.
4. Border
Kenarklık tanımlamalarında her özellik için bir tanımlama
yapılır. örnek olarak bir elementin üst kenarına atama yapmak için:
view sourceprint?1.border-top-width: 2px;
2.
border-top-style: dashed;
3.
border-top-color: #f00;
Kısaltırsak:
view sourceprint?1.border-top: 2px dashed #f00;
Bu özellikleri tüm kenarlara uygulmak için:
view sourceprint?1.border: 2px dashed #f00;
5. Margin ve Padding’ler
Margin ve paddingler de normal tanımlama şöyledir:
view sourceprint?1.margin-top: 10px;
2.margin-right: 5px;
3.margin-bottom: 20px;
4.margin-left: 15px;
kıslatılmış hali:
view sourceprint?1.margin: 10px 5px 20px 15px;
Burada öznitelikler sağdan başlayarak saat yönünde devam eder.
Aşağıda çeşitli kısaltma yöntemleri birlikte verilmiştir:
4 Değer: (margin: 20px 15px 10px 5px;) birinci – üst, ikinci
– sağ, üçüncü – alt, dördüncü – sol.
3 Değer: (margin: 20px 15px 10px;) birinci – üst, ikinci –
sol ve sağ, üçüncü – alt.
2 Değer: (margin: 20px 15px;) birinci – üst ve alt, ikinci –
sol ve sağ.
1 Değer: (margin: 10px;) birinci – üst, sağ, alt ve sol
6. Listeler
Liste tanılmalrında da kısaltmalar mümkündür
view sourceprint?1.ul {
2.
list-style-type:square;
3.
list-style-position:inside;
4.
list-style-image:url(image.png);
5.}
Kısaltırsak;
view sourceprint?1.ul li {
2.
list-style:square inside url(image.png);
3.}
4./* burda özel bir durum vardır eğer resim yoksa yedek olarak
square özelliği gösterilecektir. */
7. Sıfır ‘0′ ın Kısaltma olarak kullanılması
Kısaltmalarda son olarak ‘0′ ın kullanımına değineceğiz. Normalde
bir elemente değer ataması yapılırken değerin yanına birimi de
yazılır(örn: 3px, 0.2em vd.), Ancak sıfır ‘0′ için bu zorunlu
değilidir.
view sourceprint?1.padding:0;
Bu durumun bir istisnası mevcuttur oda yüzde değerlerinde atama
yapılırken 0% olarak atama yapılmalıdır.