Link <a> öğesi olarak HTML’de kullandığımız bir bağlantı elemanıdır. Başka bir web sayfasına veya başka bir yere köprü oluşturmak için kullanılır. Temel etiketlerden olan <a> öğesini CSS kullanarak çok farklı biçimlerde gösterebiliriz.
CSS ile bir link düzenlemek isteseniz yapmanız gereken CSS seçicisi ile <a> öğesini seçmektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> a { color: hotpink; } </style> </head> <body> <p><b><a href="yazilimbilisim.net" target="_blank">CSS Örnekleri</a></b></p> </body> </html> |
Linkler dört farklı duruma sahiptir. Bunlar;
- a:link – normal, ziyaret edilmemiş bir bağlantı görünümü
- a:visited – kullanıcının ziyaret ettiği bir bağlantı görünümü
- a:hover – kullanıcı mouse imlecini üzerine getirdiğinde oluşan bağlantı görünümü
- a:active – tıklandığı anda oluşan bağlantı görünümü
Bu dört farklı durumu <a> öğesi için ayrı ayrı biçimleyebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> /* ziyaret edilmemiş */ a:link { color: red; } /* ziyaret edilmiş */ a:visited { color: green; } /* mouse üzerinde */ a:hover { color: darkcyan; } /* seçilmiş link */ a:active { color: blue; } </style> </head> <body> <p><b><a href="yazilimbilisim.net" target="_blank">CSS Örnekleri</a></b></p> </body> </html> |
Not : <a> öğesinin farklı durumlarını biçimlerken mutlaka yukarıdaki sıralamaya uyulmalıdır.
Link Dekorasyonu
<a> Öğesini biçimlemeden kullanıldığında altı çizgili olduğu görülür. Bu onun bir link olduğunu ve diğer metinlerden ayrı görünmesinin gereği olarak sunulmuştur. Bu iyi bir görüş olsa da bu türden bir görünüm yerine daha farklı biçime elbette CSS ile getirmek mümkündür. Böyle bir durumda alt çizgisinden kurtulmak isteyebilirsiniz. text-deocoration Özelliğinin none değerini kullanılarak <a> etiketinin standart altı çizgisini yok edebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <style> a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } </style> </head> <body> <p><b><a href="yazilimbilisim.net" target="_blank">CSS Örnekleri</a></b></p> </body> </html> |
Link için Buton Görünümü
Daha fazla CSS ile linklere özel görünümler kazandırabilirsiniz.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: green; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style> </head> <body> <p><b><a href="yazilimbilisim.net" target="_blank">CSS Örnekleri</a></b></p> </body> </html> |
[…] CSS Link Düzenleme […]