Css Kodları ve Kısaltmalar

Css Kodları ve Kısaltmalar

1. Font

Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:

 


 

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

 

 

 

css kod

 

2. Background

Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebilriz.


 

Kısaltırsak:


 

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:


 

Kısaltırsak:

 

 

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


 

5. Margin ve Padding’ler

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


 

kıslatılmış hali:


 

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

css kodları

6. Listeler

Liste tanılmalrında da kısaltmalar mümkündür


 

Kısaltırsak;


 

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.


 

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

ZİYARETÇİ YORUMLARI

Henüz yorum yapılmamış. İlk yorumu aşağıdaki form aracılığıyla siz yapabilirsiniz.

BİR YORUM YAZ
bool(false)