Css Kısaltma

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
http://www.w3schools.com/css/default.asp
http://www.eyeofdesign.com
http://www.spoono.com
http://www.dustindiaz.com/css-shorthand/
Türkçe Kaynak: Fatih Hayrioğlu

More Articles for You

2014 Ajanda Tasarımı (INDD)

Merhabalar arkadaşlar, az once yabancı kaynaklı bir internet sitesinden bularak sizlere sunuyorum bunu. 2014 Ajandası hazır tasarımdır. Tamamiyle ingilizceydi Türkçeleştirme …

“Hediyem İstanbul” Desen Tasarımı Yarışması

Yarışma Amacı: “Hediyem İstanbul”un kurumsal yapısını ve konseptini temsil edecek “özgün” DESEN tasarımları ortaya çıkarmak üzere düzenlenen bir yarışmadır. İstanbul …

En Hızlı İnternete Sahip Ülkeler

Dünya nüfusunun 3’te 1’inin hızlı internet erişimine sahip olduğu günümüzde en hızlı kullanım oranları Asya ve Avrupa ülkelerinde. İnternetin doğduğu …

29 Ekim Cumhuriyet Bayramı Doodle

Google 29 Ekim Cumhuriyet bayramımızı unutmadı. Çok hoş bir görselle anlattı. Google uzun süredir bu tür olayları ve sanatçılarla ilgili …

Metrica for Apps

Yandex, ücretsiz internet ölçümleme servisiYandex.Metrica‘nın mobil uygulama geliştiricilerine özel sürümü olan Metrica for Apps‘i kullanıma sundu. iOS, Android ve Windows Phone …

Css Gradient Kodları

Merhaba arkadaşlar, css3’ün nimetleri saymakla bitmiyor. Bu dersimizde Gradient yani renk geçiş efekti koduna bakacağız. Normalde bu tarz renk geçişleri …