CSS'de Linkler

Derecelendir

4 Oylar - 2.25 Yüzde
1
2
3
4
5

Konu Görünümü | Doğrusal Görünüm

CSS'de Linkler

08-28-2007, 10:41 AM

Mesaj: #1

MyPoweR Çevrimdışı

www.MyBBTema.net

Mesajlar: 2,609
Katılma Tarihi: Apr 2007
Rep Puanı: 112

CSS'de Linkler
Yazıya Link Verme Özellikleri

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

PHP Kod:

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

Bunlar Nedir?

PHP 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:

PHP 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.

PHP 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:

PHP 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;}

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.

PHP 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;}

Sevgilerle

İzzet

« Önceki | Sonraki »