Arayüz kodlayıcılarının bilmesi gereken en faydalı 6 CSS kısaltması

3

Arayüz kodlayıcılarının bilmesi gereken en faydalı 6 CSS kısaltması. Günlük çalışmalarınızda performansınızı artıracak size kolaylık sağlayacak çok faydalı 6 CSS kısa yazım kuralı.

ergin ergin (2515)
7 yıl önce sordu

    Toplam 1 Cevap


    4

    CSS ile kodlama yaparken bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtuluruz, hem de sayfa boyutlarını en aza indirerek performans artışı sağlamış oluruz.

    1. Font

    font-weight: bold;
    font-family: arial, sans-serif;
    font-size: 14px;
    line-height: 17px;

    Kısaltma olarak kullanılan kod ise tek satır:

    font: bold 14px/15px arial, sans-serif;

     

    2. Margin ve Padding'ler

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

    margin-top: 15px; 
    margin-right: 10px; 
    margin-bottom: 5px; 
    margin-left: 25px;

    kısaltılmış hali:

    margin: 15px 10px 5px 25px;

    Burada öznitelikler sağdan başlayarak saat yönünde devam eder. Örneğin;

    4 Değer: (margin: 15px 10px 5px 25px;) birinci - üst, ikinci - sağ, üçüncü - alt, dördüncü - sol.

    3 Değer: (margin: 15px 10px 5px;) birinci - üst, ikinci - sol ve sağ, üçüncü - alt.

    2 Değer:(margin: 15px 10px;) birinci - üst ve alt, ikinci - sol ve sağ.

    1 Değer: (margin: 15px;) birinci - üst, sağ, alt ve sol

     

    3. Renkler(Hex-decimal)

    CSS stillerinde renkler genelde hex-decimal renk kodu ile tanımlanır örneğin color: #ffffff; beyaz. Renkler 6 karakterle gösterilse de bir çok renk (web tabanlı) 3 karakterin tekrarlanması ile oluşturulur. Örneğin, siyah'ın hex-decimal kodunu kısaltırsak color: #000;

    Örneğin, siyah renk kullanacağınızda, color: black; veya color: #000000; kullanımı önermeyiz. Kısaltılmış olanı color: #000; kullanmanız daha avantajlıdır.

     

    4. Background

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

    background-color: #ddd; 
    background-image: url(ornek.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    background-position: 0px 0px;

    Kısaltırsak:

    background: { 
        #ddd url(ornek.jpg) no-repeat scroll 0px 0px; 
    }

     

    5. Listeler

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

    ul { 
        list-style-type:disc; 
        list-style-position:outside;
        list-style-image:url(ornek.png); 
    }

    Kısaltırsak;

    ul li { 
        list-style:disc outside url(ornek.png); 
    } 

     

    6. Border

    Kenarlık tanımlamalarında her özellik için bir tanımlama yapılır. Örnek olarak bir elementin alt kenarına atama yapmak için:

    border-top-width: 1px; 
    border-top-style: solid;
    border-top-color: #000;

    Kısaltırsak:

    border-top: 1px solid #000;

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

    border: 1px solid #000;

     

    ergin ergin (2515)
    7 yıl önce cevaplandı

    • çok güzel açıklamışsınız. emeğinize sağlık EceKoc 7 yıl önce
    üyelik gerektirir

    Cevap yazabilmek için üye girişi yapmalısınız.

    Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
    uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol