Mhmet-Simsek.Tr.Gg
Icerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya GelcekIcerik Buraya Gelcek

M & Ş Media

Csskısaltmalar

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:

1 font-weightbold;
2 font-familyverdanasans-serif;
3 font-size11px;
4 line-height15px;

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

1 fontbold 11px/15px verdanasans-serif;
2. Background

Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebilriz.

1 background-color#000;
2 background-imageurl(ard.jpg);
3 background-repeatno-repeat;
4 background-attachmentfixed;
5 background-position50px 50px;

Kısaltırsak:

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:

1 border-top-width2px;
2 border-top-styledashed;
3 border-top-color#f00;

Kısaltırsak:

1 border-top2px dashed #f00;

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

1 border2px dashed #f00;
5. Margin ve Padding’ler

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

1 margin-top10px;
2 margin-right5px;
3 margin-bottom20px;
4 margin-left15px;

kıslatılmış hali:

1 margin10px 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

1 ul {
2 list-style-type:square;
3 list-style-position:inside;
4 list-style-image:url(image.png);
5 }

Kısaltırsak;

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.

1 padding:0;

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

© Mhmet-Simsek.Tr.Gg
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol