CSS Hakkında [İp Uçları]
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;}
|