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