Webmaster Platformu
 
AnasayfaAnasayfa  TakvimTakvim  GaleriGaleri  SSSSSS  AramaArama  Üye ListesiÜye Listesi  Kullanıcı GruplarıKullanıcı Grupları  Kayıt OlKayıt Ol  Giriş yap  

Paylaş | 
 

 CSS’de Kısaltmalar

Aşağa gitmek 
YazarMesaj
Learned
Admin
Admin
avatar

Erkek
Mesaj Sayısı : 81
Nerden : Forum :)
Lakap : Learned
Ruh Hali :
Takımınız :
Kayıt tarihi : 01/03/09

MesajKonu: CSS’de Kısaltmalar   Paz Mart 01, 2009 5:27 pm

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:

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

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.
Sayfa başına dön Aşağa gitmek
Kullanıcı profilini gör http://www.bilgiliyiznet.tr.gg/
 
CSS’de Kısaltmalar
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
Web'in Masteri.. :: Web Programlama :: Css-
Buraya geçin: