SMF style.css [anlatım]

Son güncelleme: 14.03.2011 11:21
  • ewt arkadaşlar herkezın basına dert olan style.css elimizden geldigi kadar anlatamaya çalısacagım.


    ilk once style.css dokumanını açıyoruz


    1 . Bölüm




    /* Normal, standard links. */
    a:link
    {
    color: #xxxxxx;
    text-decoration: none;
    }
    a:visited
    {
    color: #xxxxxx;
    text-decoration: none;
    }
    a:hover
    {
    text-decoration: underline;
    color: #xxxxxx;
    }





    bole bir kod ne işe yarar hemen solim forumumzda genel olarak link lerın ayarları diye biliriz.


    link= forumda yazılan lınklerin rengi ( kotagorinin bolumun isminin rengi vb.)

    visited= mause link'in ustundeyken rengi

    hover=link tıklandık tan sonrakı rengi

    bunlara renkgini degiştirmek için

    color: #xxxxxx ( degiştiriyoruz )

    text-decoration: nedir ? oda yazıların altını, üstünü, üzerini çizmek veya çizmemek için kullanılan özellik.

    - underline > Altı çizili yazı
    - overline > Üstü çizili yazı
    - line-through > Üzeri çizili yazı
    - none > herhangı degişiklik yapılmayan link (çizgili olmayan link)
    -blink > Linklerin üzerlerine gelince yanıp sönüyor



    2 . Bölüm


    /* Navigation links - for the link tree. */
    .nav, .nav:link, .nav:visited
    {
    color: #000000;
    text-decoration: none;
    }
    a.nav:hover
    {
    color: #cc3333;
    text-decoration: underline;
    }





    bu kod ise forumuzda link tree nın rengını degiştirir.Hemen ornekle gosterım


    .nav, .nav:link, .nav:visited
    {
    color: #000000;
    text-decoration: none;
    }


    bu kodda link trenın normal de halı ve ziyaret edilince [ fare inleci ustune geldıgı zamankı ] hali


    normalda color: #000000[ siyah renk kodu ] iken sıyah olan link tree color:#ff0000 [kırmızı renk kodu] kırmızı olur gosterımı alltakı resımde

    noimage
    noimage



    3. bölum



    /* By default (td, body..) use verdana in black. */
    body, td, th , tr
    {
    color: #000000;
    font-size: small;
    font-family: verdana, sans-serif;
    }

    /* The main body of the entire forum. */
    body
    {
    background-color: #E5E5E8;
    margin: 0px;
    padding: 12px 30px 4px 30px;
    }






    bu kodlar ise forumumuzun genel ayarlarınız arka plan yazı rengı,boyutu,tipi ,genişligi ,


    body, td, th , tr
    {
    color: #000000;
    font-size: small;
    font-family: verdana, sans-serif;
    }


    color: #000000;

    genel yazı rengı

    font-size: small;


    font boyutu bunun ayarlarını 8pt 10pt ve herhangı bır sayıya ayarlaya bılırsınız



    font-family: verdana, sans-serif;

    genel yazı tipi





    body
    {
    background-color: #E5E5E8;
    margin: 0px;
    padding: 12px 30px 4px 30px;
    }




    background-color: #E5E5E8;


    arkaplan rengı resımde ekleye bılırsınız

    resı eklemek için kod :


    background: url(images/arkaplan.gif) #E5E5E8 no-repeat;




    #E5E5E8 yine arka plan rengı

    repeat ;

    -no-repeat tekrar etmez

    -repeat-x yatay takrar eder

    -repeat-y dikey tekrar eder


    margin: 0px;

    padding: 12px 30px 4px 30px;

    bu kodlar kenar larda boşlukar yanı daraltma için kullanılır


    Burada mantık sağdan başlayarak saat yönünde yazılır. Aşağıda kısaltma yöntemleri verilmiştir.

    margin: 20px 15px 10px 5px; birinci - üst, ikinci - sağ, üçüncü - alt, dördüncü - sol.

    margin: 20px 15px 10px; birinci - üst, ikinci - sol ve sağ, üçüncü - alt.

    margin: 20px 15px; birinci - üst ve alt, ikinci - sol ve sağ.

    margin: 10px; birinci - üst, sağ, alt ve sol gibi





    4 . Bölüm


    /* Input boxes - just a bit smaller than normal so they align well. */
    input, textarea, button
    {
    color: #000000;
    font-family: verdana, sans-serif;
    }
    input, button
    {
    font-size: 90%;
    }

    textarea
    {
    font-size: 100%;
    color: #000000;
    font-family: verdana, sans-serif;
    }

    /* All input elements that are checkboxes or radio buttons. */
    input.check
    {
    }

    /* Selects are a bit smaller, because it makes them look even better 8). */
    select
    {
    font-size: 90%;
    font-weight: normal;
    color: #000000;
    font-family: verdana, sans-serif;
    }






    forumumuzda kullandıgımz input, textarea, button ların yazı tiplerini , renklerını, arka planlarını ,degiştirmemize yarar

    inputlar,butonlar ;

    noimage

    vb .
    textarea lar :

    noimage
    noimage




    Alıntıdır
#14.06.2008 22:02 0 0 0
mfp mfp foto
  • Teşekkürler
#20.08.2008 14:20 0 0 0
  • gerçekten çok güzel paylaşım olmuş sagol
#15.11.2008 12:57 0 0 0
  • satırların ve sutunların kını nasıl degıstırcez?
#14.03.2011 11:21 0 0 0