Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS'de Kısaltmalar
#1
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.

Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:
Kod:
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;

Kısaltma olarak kullanlan kod ise tek satır:
Kod:
    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.
Kod:
background-color: #000;
background-image: url(ard.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 50px;

Kısaltırsak:
Kod:
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:
Kod:
border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;

Kısaltırsak:
Kod:
border-top: 2px dashed #f00;

Bu özellikleri tüm kenarlara uygulmak için:
Kod:
border: 2px dashed #f00;

5. Margin ve Padding’ler

Margin ve paddingler de normal tanımlama şöyledir:
Kod:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;

kıslatılmış hali:
Kod:
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 5pxWink birinci – üst, ikinci – sağ, üçüncü – alt, dördüncü – sol.

3 Değer: (margin: 20px 15px 10pxWink birinci – üst, ikinci – sol ve sağ, üçüncü – alt.

2 Değer: (margin: 20px 15pxWink birinci – üst ve alt, ikinci – sol ve sağ.

1 Değer: (margin: 10pxWink birinci – üst, sağ, alt ve sol
6. Listeler

Liste tanılmalrında da kısaltmalar mümkündür
Kod:
ul {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.png);
}

kısaltırsak;
Kod:
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.

Kod:
padding:0;

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

Ders; fatihhayrioglu
Ara
Cevapla
#2
Bilmeyenler İçin Faydalı Bir Ders.
+Rep
~Geçmişini Bilmeyen,Geleceğini Bilemez~
~Frabelez~
Cevapla
#3
Güzel konu..
Teşekkürler Smile
Cevapla


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi


10tl.net Destek Forumu -