HTML ile web sitelerimizi yazarken metinlere bazen site içi, bazen de site dışı link veriyoruz. Link verilmiş metinler varsayılan olarak mavi ve altı çizili halde gözükürler. Çoğu durumda bu kötü bir görüntü oluşturur. Bu yazımızda CSS ile bağlantılar yani linkleri nasıl düzenleriz sorusunu yanıtlayacağız.
CSS Link Durumları
Linklerin dört farklı durumu vardır. Bunlar normal, ziyaret edilmiş, linkin üzerine mouse ile gelinmiş ve tıklandığı an‘dır. Şimdi bunları CSS’te düzenleyeceğimiz şekilde görelim.
- a:link : normal, ziyaret edilmemiş bir bağlantı
- a:visited : kullanıcının ziyaret ettiği bir bağlantı
- a:hover : kullanıcı mouse imlecini üzerine getirdiğinde oluşan bağlantı
- a:active : tıklandığı anda oluşan bağlantı
Örnek kullanım :
a:link { /* ziyaret edilmemiş */
color: red;
}
a:visited { /* ziyaret edilmiş */
color: green;
}
a:hover { /* mouse üzerinde */
color: yellow;
}
a:active { /* seçilmiş link */
color: blue;
}CSS Link Altındaki Çizgiyi Kaldırma (text-decoration)
Yukarıda da bahsettiğimiz gibi linkler mavi ve altı çizili olarak gelirler. Şimdi de altçizgiyi nasıl kaldırabileceğimizi görelim.
HTML sayfalarımızdaki linklerin altındaki çizgiyi kaldırmak için text-decoration özelliğini kullanırız. Hemen nasıl yaptığımızı görelim.
<a href="evrenselkod.com">Evrensel Kod</a>a{
text-decoration: none;
}Bu yazımızda CSS bağlantılar, bu bağlantıları düzenleme ve link altındaki çizgiyi kaldırma gibi konuları işledik. Diğer CSS dersleri yazılarımızı da okumak isterseniz buradan tümüne ulaşabilirsiniz.