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.