CSS'de Linkler

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.

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:


A:link



A:visited



A:active



A:hover




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:


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.


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:


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.


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.
  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

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

Kaliteli çalışmalar çıkarmak için kesinlikle kullanılmalı CSS bence de.. Güzel ve oldukça faydalı bir anlatım elinize emeğinize sağlık...
ben css e yeni başladığım için soruyorum bunları head bloğuna mı yazıcaz.link atarkende hangi kodu yazıcaz.
merhaba acaba imajlar içindemi aynı durum geçerli ve imajların oppacity değerini düşürünce kenarlarında siyah bir halka oluşuyor onu nasıl yok edebiliriz?
css'siz bir site düşünemiyorum...
teşekkürler üstat tam da bu biglilere ihtiyacım vardı not etmeli bir yerlere bunları.
<td width="106" bgcolor="#FDDDC6"><div align="center"><span class="stil1">BÖLÜMLERİMİZ</span></div></td> ben burada fare üzerine gelince arkaplan renginin değişmesini istiyorum nereye nasıl ekleyeceğim lütfen yardım
<td width="106" bgcolor="#FDDDC6"><div align="center"><span class="stil1">BÖLÜMLERİMİZ</span></div></td> ben burada fare üzerine gelince arkaplan renginin değişmesini istiyorum nereye nasıl ekleyeceğim lütfen yardım:agla:

Yukarı Git