CSS İpuçları - 2

Bu derste CSS ile ilgili bazı tasarım ipuçlarını bulacaksınız. İşinize yarayacağından eminim.

Bu derste CSS ile ilgili bazı tasarım ipuçlarını bulacaksınız. İşinize yarayacağından eminim.

Öncelikle bu dersin orta düzey ve biraz temeli olanlar için olduğunu belirtmek isterim. İlk ders için buraya bakabilirsiniz.

Bir yazıyı seçtiğimizde yazının rengini değiştirmek:


::-moz-selection {

background: #336699;

color: #FFFFFF;

}

::selection {

background: #336699;

color: #FFF;

}



Bu Link Seçildiğindeki Rengi Değiştiren Kod


a::-moz-selection {

background: #333;

color: #FFFFFF;

}

a::selection {

background: #333;

color: #FFFFFF;

}



Örnek: Tıklayın.

Input'un üzerine tıklayınca renk değişmesi: (Dikkat, hover değildir, karıştırmayın.)


input:focus {

    background-color: #666666;

color: #FFFFFF;

    border-right-width: medium;

    border-right-style: solid;

    border-right-color: #333333;

}



Menü Tasarlamak: a href Kodunu Renklendirmek


a:link {

    color: #000000;

    text-decoration: none;

    background-color: #666666;

}



a href Koduna Tıklandıktan Sonraki Link Renk Değişimi (Menü yapacaksanız üstteki kodla aynı kalmasını tavsiye ederim).


a:visited {

    color: #000000;

    text-decoration: none;

    background-color: #666666;

}


A href 'in Üzeirne Gelince Değişecek Kod Yapısı

a:hover {

    color: #FFFFFF;

    text-decoration: none;

    background-color: #333333;

}



Bunlara class tanımlayarak tüm linkler değil de, bazılarının bu özelliklere uymasını sağlıyabilirsiniz. Örneğin:


<a href="#" class="menu">anasayfa</a>



CSS kodu:


a.menu:link



gibi bu şekilde sadece bazı linklere özellik tanımlayabilirsiniz.

Kolay gelsin.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git