Buradasınız: Emre Supçin / Css / CSS’in Önemli Kısaltmaları Nelerdir?

CSS’in Önemli Kısaltmaları Nelerdir?

İyi Akşamlar sevgili okurlar,

Geçen gün ki makalemizde bir css dersi işlemiştik, Bugün de siz değerli takipçilerimize CSS’in önemli kısaltmalarının hangileri olduğunu anlatacağım. CSS’yi 7den 77’e olmasada neredeyse çoğunluk bilir. CSS’de kodlama yaparken bazı kısaltmalar kullanırız. Bunun sayesinde büyük kod yığınlarından kurtuluruz.

Peki nelerdir bu kısaltmalar?

1.Font

Normalde 1 font tanımlarken tam 4 adet CSS kodu kullanılır. Bu kodlar:

1 font-weight: bold;
2 font-family: verdana, sans-serif;
3 font-size: 11px;
4 line-height: 15px;

Bu kodların kısaltması ise:

1 font: bold 11px/15px verdana, sans-serif;

—————————————————————-

2.Arkaplan [Backgrounds]

Arkaplan tanımlarken tam 5 tane atama yapmamız gerekir. Bunu yaparken kısaltma kullanarak tek tanıma indirebiliriz.
Ne güzel değil mi?

1 background-color: #000;
2 background-image: url(ard.jpg);
3 background-repeat: no-repeat;
4 background-attachment: fixed;
5 background-position: 50px 50px;

Bu kodu kısaltırsak:

1 background: { #000 url(ard.jpg) no-repeat fixed 50px 50px; }

—————————————————————-

3.Renkler [Hex-Decimal]

CSS kodlamalarında renkler genellikle Hex-Decimal renk kodu olarak adlandırılır.
Örneğin:

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

1 color:#f00;Kırmızı

Buradaki her karakter hex-decimal koddaki iki karaktere karşılık gelmektedir.
Mesela, beyaz renk kullanacağınız da:

1 color:white;

veya

1 color: #ffffff;

kulanımı önermeyiz. Kısaltılmış olanı:

1 color:#fff;

kullanmanız önerilir.

—————————————————————-

4. Border

Kenarlı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 her kenara uygulamak 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ısaltırsak:

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;) üst, sağ, alt ve sol

—————————————————————-

6. Listeler

Liste tanılmaları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.
Örneğin: 3px, 0.2em vs.) Ancak sıfır “0” için bu zorunlu değildir.