CSS’de Kısaltmalar

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:

    font-weight: bold;
    font-family: verdana, sans-serif;
    font-size: 11px;
    line-height: 15px;

Kısaltma olarak kullanlan kod ise tek satır:

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.

    background-color: #000;
    background-image: url(ard.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50px 50px;

Kısaltırsak:

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:

	border-top-width: 2px;
    border-top-style: dashed;
    border-top-color: #f00;

Kısaltırsak:

	border-top: 2px dashed #f00;

Bu özellikleri tüm kenarlara uygulmak için:

	border: 2px dashed #f00;

5. Margin ve Padding’ler

Margin ve paddingler de normal tanımlama şöyledir:

    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    margin-left: 15px;

kıslatılmış hali:

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

ul {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.png);
}

Kısaltırsak;

ul li {
	list-style:square inside url(image.png);
}
/* 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.

padding:0;

Bu durumun bir istisnası mevcuttur oda yüzde değerlerinde atama yapılırken 0% olarak atama yapılmalıdır.

Kaynaklar

47 Yorum (Yorum Ekle)

celil sırma diyor ki:

Eylül 19, 2008, 14:09

slm fatih bey. öncelikle bu güzel çalışmanızdan ve paylaşımınızdan dolayı tebrik ederim. css de kısaltmalar başlığı altında örneğin font için düşünelim. kısaltma yaptığımızda verilen değerlerin yazılış sırası varmı. ben bir deneme yaptım. bold sonda veya ortada olunca çalışmıyor. başta olunca sorun yok. bunların belirli bir sırası varmı??? teşekkürler

Cevapla

fatih.hayrioglu diyor ki:

Eylül 1, 2008, 08:55

@Selim Saraçoğlu birden fazla sınıf tanımı ile aynı şeyi yapıyoruz zaten

Cevapla

Selim Saraçoğlu diyor ki:

Ağustos 29, 2008, 12:48

Merhabalar,

bu şekilde iki ayrı seciciyi aynı anda kullanmak mümkün ama benim işime yaramıyor.
Yani şu şekilde birşey varmıdır acaba varsa kullanımı nasıldır.
.BirinciSecici{ color:#000; import(IkinciSecici) import(ucuncuSecici) } .IkinciSecici { text-align:center; } .UcuncuSecici { background-color:red; }

Cevapla

kraloyun diyor ki:

Şubat 9, 2008, 14:12

Hocam css öğrenmek için yabancı sitelerden indirdiğim templateleri inceledim durdum.
Bu kadar zamanı boşuna harcamışım.
Soruların cevabı burada varmış.
Akıcı ve sade bir dille öyle güzel olayları ifade etmissiniz ki anlamamk mümkün değil.
Başarılar dilerim. Saygılarımla…

Cevapla