Bağlantı linklerini Özelleştirmek (CSS text-decoration)

Web sitelerinde yada bloglarda verilen bağlantıları daha belirgin yada anlaşılır yapmak için yazı dekorasyonu (text-decoration) tekniğini uygularız.






HTML (CSS) de tüm linklerin özelleştirme kodu :

overline  : Metin üstü çizgi
through : Üzeri çizili metin 
underline : Altı çizili metin 
none : Metin çizgisi yok
blink : Yanıp sönen metin

a:link : Normal, ziyaret edilmemiş bağlantı
a:visited : Bir bağlantı ziyaret edilmesi durumu
a:hover : Bir bağlantının üzerine fare getirildiğinde
a:active : Bir bağlantı  tıklandığı anda
Şimdi sitemizdeki tüm bağlantı linklerinin üzerine mause ile gelindiğinde altını çizelim

<style type="text/css">
a:hover{text-decoration:underline;}
</style>

Yada tüm bağlantı linklerinin altındaki çizgiyi kaldıralım

<style type="text/css">
a:hover{text-decoration:none; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
</style>

Bunun dışında metin yada bağlantı linklerine diğer css özellikleri atayabiliriz örneğin arka fon rengi yazı karakteri gibi


<style>
a:link {
background-color: #B2FF99;
}
a:visited {
background-color: #FFFF85;
}
a:hover {
background-color: #FF704D;
}
a:active {
background-color: #FF704D;
}
a:link{
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
}
</style>

gibi

Bu Kodlar <head> ile </head> tagları arasına eklenerek HTML yapısında çalışacaktır. Yani blogger için <head> den hemen sonra eklerseniz çalışacaktır.



0 yorum: