CSS’de Hyperlink Bağlantı Stilleri
Hyperlinklerin bilindiği üzere varsayılan stil atamaları mevcuttur. Normal hiç ziyaret edilmemiş bir link mavi renkte, ziyaret edilen link mor renkli olur. Ayrıca her hyperlink yaratıldığında altı çizili bir görünüm alır. Üzerine basılı tutulduğunda aktif halde kırmızı rengi alacaktır. İşte bu stilleri biz kendimize göre tasarlayabiliriz. Bahsettiğim üzere bir hyperlink’in 4 çeşit durumu var.
- Normal/Ziyaret edilmemiş, (unvisited (:link))
- Ziyaret edilmiş link (:visited)
- Cursor (mouse imleçi) Üzerinde Olma Durumu (:hover)
- Üzerine tıklanma durumu (:active)
Bir seçicinin pseudo-class (pseudo sınıfları) özellikleri olabilir. Pseudo sınıfları ayrıca bir ders konusu olarak anlatılacaktır. Şuan için bilmemiz gereken bu konu için 4 pseudo sınıfı olan :link, :visited, :hover, :active.
<!DOCTYPE html> <html> <head> <title>Hyperlinkler ve Bağlantılar</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- Normal Hyperlink --> <h3>Normal Hyperlink</h3> <a class="normal" href="index.html">Tıkla</a> <hr> <!-- Ziyaret Edilmiş Hyperlink --> <h3>Ziyaret Edilmiş Hyperlink</h3> <a class="visited" href="index.html">Tıkla</a> <hr> <!-- Cursor (Mouse imleci) Üstünde olan Hyperlink --> <h3>Hover Olan Hyperlink</h3> <a class="hover" href="index.html">Tıkla</a> <hr> <!-- Üzerine Basılı Tutulan Aktif Hyperlink --> <h3>Active (üzerine basılı tutulan) Hyperlink</h3> <a class="active" href="index.html">Tıkla</a> <hr> </body> </html>
Yukarıdaki örnek bir link ile style.css dosyasına external olarak bağlanmış, her bir pseudo sınıfı özellikler için “Tıkla” olarak 4 adet hyperlink oluşturulmuştur. Oluşturulan bu hyperlinklere anlaşılır olması sebebiyle kullanılacak olan pseudo sınıfının isimleri verilmiştir. Aşağıda verilen style.css dosyasında olacakları inceleyelim.
a{
font-size: 36px;
font-family: tahoma, serif;
background-color: pink;
text-decoration: none;
display: inline-block;
margin-top: 20px;
padding: 10px;
border-radius: 5px;
}
.normal{
text-decoration: underline;
}
.visited:visited{
color: gray;
}
.hover:hover{
color: white;
background-color: red;
}
.active:active{
background-color: gray;
color: pink;
}
Hyperlink Örnek Açıklaması
Öncelikle hyperlink (“a”) seçicisine, yani örnekte kullanılan 4 özelliğin ana elementi olan “a” için stil ataması yapıldı. Bu atama ile 4 örnekteki hyperlinklerin hepsi aynı görünüme kavuşacak, farklılık pseudo sınıfları eklendiğinde ortaya çıkacaktır. Tüm hyperlinklere 36px lik bir boyut, font yazı tipi olarak tahoma, arka plan rengini pembe olarak belirledik. Normal tasarımlarda bir text’in arkaplan rengi olması pek olası değildir. Genelde linkler buton görünümünde çok kullanılması ve örneğin daha iyi anlaşılması için arkaplan rengi pembe olarak atandı. Devam ettiğimizde tüm hyperlink’lerin alt çizgisi text-decoration özelliğinin none değeri almasıyla yok edildi. Daha önceden görmediğimiz ve daha sonraki derslerde anlatacağımız bir özellik ile satır içindeki bir etikete veya elemente satır içinde block (display: inline-block) seviyesinde bir element gibi davranması bildirildi. Butona benzer bir görünüm kazandırmak için margin ve padding değerleri uygulanarak butonun yumuşak bir görüntüsü için köşeler 5px değerinde radius değeri eklendi.
Class ismi normal olan ilk örneğimizde bir önceki deklarasyonda (tüm a etiketlerine uygulanan stil) tüm <a> etiketlerinin varsayılan gelen alt çizgisi kaldırılmıştı, bu örnek normal bir linki göstermek olduğu için geri getirerek hyperlinke altçizgi eklemiş olduk.
Bu 4 örnekten herhangibirine tıklanması sonucunda tüm href değerleri aynı olması sebebiyle örneklerimizin hepsi ilk tıklamadan sonra ziyaret edilmiş şeklinde gözükecektir. Bu özelliğin görülmesi için sadece 2nci örnekte font rengi gri olarak belirtildi.
Hover sınıfında ise yazı rengi beyaz ve arkaplan rengi kırmızı olarak tanımlandı. Mouse cursoru üzerine gelmeden önce pembe arka plan rengine sahip mavi renkte gözüken (eğer ziyaret edilmemişse) linkimiz cursor (imlecin) üstüne gelmesiyle kırmızı bir arkaplana kavuşup yazı renginin beyaz olduğunu görebilirsiniz.
Active sınıfında ise görünüm; cursorun üzerine gidip basık tutulmasıyla gözükecektir. Bunu normal olan ilk örnekte denerseniz yazı renginin kırmızı (varsayılan) olduğunu görürsünüz. Bizim stil atamamız ile 4ncü örnekte bunu arka planı gri ve yazı rengi pembe olarak göreceksiniz.
Bir önceki “Fontlar ve Özellikleri” isimli yazıma ulaşmak için tıklayınız..
Temel HTML Derslerine https://www.esencan.net/category/html-dersleri/ adresinden ulaşabilirsiniz.
Son Yorumlar