01232017Pzt
Last updateÇrş, 09 Kas 2016 12pm


CSS DERSLERİ

CSS?de Kı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-weight: bold;
2 font-family: verdana, sans-serif;
3 font-size: 11px;
4 line-height: 15px;

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

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

1 background-color: #000;
2 background-image: url(ard.jpg);
3 background-repeat: no-repeat;
4 background-attachment: fixed;
5 background-position: 50px 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-width: 2px;
2 border-top-style: dashed;
3 border-top-color: #f00;

Kısaltırsak:

1 border-top: 2px dashed #f00;

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

1 border: 2px dashed #f00;
5. Margin ve Padding?ler

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

1 margin-top: 10px;
2 margin-right: 5px;
3 margin-bottom: 20px;
4 margin-left: 15px;

kıslatılmış hali:

1 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

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.

Kaynaklar

Kaynak : Fatih HAYRİOĞLU, CSS dersleri

Yorum ekle


Güvenlik kodu
Yenile

FACEBOOK'TA TAKİP EDİN