[CSS]Linklere Özellik Verme

Konu 'Bilişim Teknolojileri' bölümünde Moderatör Muhammet tarafından paylaşıldı.

  1. Moderatör Muhammet

    Moderatör Muhammet Muhammet Dilmaç Yönetici Moderatör

    Katılım:
    22 Şubat 2010
    Mesajlar:
    828
    Beğenileri:
    565
    Ödül Puanları:
    93
    Yer:
    Karabük

    Son zamanlarda web tasarımcıları artık eskisi gibi javascript, animasyon gibi unsurları birebir kullanmak yerine CSS'in gücünden faydalanıyorlar. Çünkü CSS kullanmak hem sayfaya hız katıyor, hem de tüm operasyonlar ağrısız acısız işkencesiz gerçekleşiyor.


    Yazıya Link Verme Özellikleri

    CSS şu dört selektörü destekler:

    Kod:
    A:link A:visited A:active  A:hover

    Kod:
    A:Link - Bu sayfadaki bütün normal linkler için bir stil oluşturur. 
    A:visited - Bu sayfadaki ziyaret edilen linkler için bir stil belirler. 
    A:active - Bu sayfa üzerindeki aktif linkler için bir stil belirler. Bir linkin aktif olması demek, onun tıklanabilir olması demektir. 
    A:hover - Bu mouse üzerine geldiğinde olabilecek değişmeleri belirleyen bir stildir. 

    Kullanabileceğiniz CSS Özellikleri:

    Kod:
    color (renk)
    text-decoration (yazıya süs)
    font-weight (yazı kalınlık inceliği)
    font-style (yazı stili)
    font-family (yazı gurubu)
    font-size (yazı boyutu)
    background-color (arkaplan rengi)

    LİNK ÖRNEKLERİ:

    Altıçizili ve Renkli Linkler


    Haydi birkaç link efekti hazırlayalım. Bir linkin mouse üzerinde geldiğinde renginin değişmesi ve altının çizili olmasını istiyoruz. Bunun için aşağıdaki kodu kullanabilirsiniz.

    Kod:
    A:link {text-decoration: bold; color: red;}
    A:visited {text-decoration: none}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: black;}

    Arkaplanı Renkli Linkler

    Bazı web sitelerinde mouse'u üzerine getirince bir linkin arkaplan resminin değiştiğini görmüşsünüzdür. Bunun nasıl yapıldığını görelim:

    Kod:
    A:link {background: #FFCCCC; text-decoration: none}
    A:visited {background: #FFCCCC; text-decoration: none}
    A:active {background: #FFCCCC; text-decoration: none}
    A:hover {background: #FFFFFF; font-weight:bold; color: black;}

    NOT: Netscape ve Firefox tarayıcılarının eski sürümlerinde çalışmayacaktır.

    Linklerin boyutunu değiştirmek

    Bir diğer efekt de, mouse üzerine geldiği zaman yazının boyutunun değişmesidir. Bunu yapmak için aşağıda yer alan kodu kullanabilirsiniz.

    Kod:
    A:link {text-decoration: none}
    A:visited {text-decoration: none}
    A:active {text-decoration: none}
    A:hover {font-size:20; font-weight:bold; color: red;}

    NOT: Netscape ve Firefox tarayıcılarının eski sürümlerinde çalışmayacaktır.

    Kaynak:

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...


    © OdaBlog.Net

Sayfayı Paylaş