CSS ile bir çok şeyi değiştirebileceğimizi biliyoruz. Bunlara linkler de dahil… Bilindiği üzere hiç bir stil uygulanmayan linkler varsayılan olarak mavi ve altı çizgilidirler ancak istersek biz bunu değiştirebiliriz. İlk önce yazının altındaki çizgiyi kaldırmak için bir önceki CSS’de Yazı ve Fontlarla Çalışmak başlıklı yazımızda bahsettiğimiz text-decoration komutundan yararlanıyoruz.
Aslında burada böyle afaki konuşmaktansa önce örnek bir kod uygulaması görerek onun üzerinden gitmekte fayda var.
<style type="text/css">
a.ornek-link {
font-weight: bold;
color: black;
font-style: oblique;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: baseline;
}
a.ornek-link:hover {
font-weight: bold;
color: maroon;
font-style: oblique;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: baseline;
}
</style>
<p><a href="https://www.hayaletinyeri.com">Bu hiç stili olmayan normal bir linktir.</a></p>
<p><a href="https://www.hayaletinyeri.com" class="ornek-link"> Bu da stil ile oluşturulmuş bir linktir. Altında çizgi yok ve üzerine gelince rengi değişiyor.</a></p>
Buradaki kodu tarayıcımızda çalıştırdığımızda iki tane link ile karşılaşacağız. Bunlardan ilki stil uygulanmamış varsayılan bir bağlanyı iken ikincisi uyguladığımız stile göre çalışacaktır.
Önce a.ornek-link diye linkimize uygun bir stil hazırladık. Burada text-decoration ile alt çizginin olmamasını sağladık. Sonra a1ornek-link:hover ile fare ile üzerine gelindiği takdirde linkimizin alacağı durumu belirledik. Yine alt çizgiye izin vermedik. İsteseydik text-decoration öğesine underline ya da overline gibi parametreler de verebilirdik.
Burada kullandığımız hover ile üzerine gelince oluşacak durumu kastediyoruz. Aslında hover pek çok programlama dilinde kullanılan standartlaşmış bir tanımdır.
Kodumuzu çalıştırınca ortaya çıkacak sonuca bakarak daha iyi anlayacaksınız.
Fikret
23 Nisan 2009Çok teşekkürler süpersiniz! 🙂 🙂
HayalEt
24 Nisan 2009Yorumunuz için ben teşekkür ederim elimden geldiğince birşeyler anlatmaya çalışıyorum
Ayhan
12 Şubat 2010İşime yaramadı ama sağolun .
HayalEt
12 Şubat 2010neden yaramadığına buradan bir cevap veremem ama CSS kodu düzgün yazıldığında ve çağırıldığında kesinlikle çalışması lazım çünkü hemen hemen herkes böyle kullanır.
mbd
06 Ekim 2012teşekkürler işime yaradı çok basitmiş 😉
HayalEt
08 Ekim 2012Ben teşekkür ederim
mert
03 Nisan 2019Çok teşekkürler
HayalEt
17 Nisan 2019rica ederim
Mersan Reklam
02 Ekim 2019tekelür ederim
HayalEt
07 Ekim 2019önemli değil