CSS ile bağlantılar birçok farklı şekilde şekillendirilebilir.
Bağlantı Şekillendirme
Bağlantılar herhangi bir CSS özelliğiyle (ör. color, font-family, background vb.) şekillendirilebilir.
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="index.html" target="_blank">Gitmek için tıklayın</a></b></p>
</body>
</html>
Ayrıca bağlantılar, içinde bulundukları duruma bağlı olarak farklı şekilde şekillendirilebilir.
Dört bağlantı durumu şunlardır:
a:link– normal, ziyaret edilmemiş bağlantıa:visited– kullanıcının ziyaret ettiği bağlantıa:hover– kullanıcı fareyi üzerine getirdiğinde oluşan bağlantıa:active– tıklanan aktif bağlantı
<!DOCTYPE html>
<html>
<head>
<style>
/* Normal Link */
a:link {
color: red;
}
/* Ziyaret edilmiş link */
a:visited {
color: green;
}
/* Mouse üzerine gelince link */
a:hover {
color: hotpink;
}
/* Aktif link */
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="index.html" target="_blank">Link Burada</a></b></p>
<p><b>Not:</b> a:hover'ın etkili olabilmesi için CSS tanımında a:link ve a:visited'dan sonra gelmesi ZORUNLUDUR.</p>
<p><b>Not:</b> a:active'in etkili olabilmesi için CSS tanımında a:hover'dan sonra gelmesi ZORUNLUDUR.</p>
</body>
</html>
Yukarıdaki örneği mutlaka deneyip sonucu görün. Denemeniz için ekran görüntüsünü paylaşmıyorum.
Birkaç bağlantı durumu için stil ayarlarken bazı sıralama kuralları vardır:
a:hover a:link ve a:visited’den sonra gelmelidir
a:active a:hover’dan sonra gelmelidir
Text Decoration
text-decoration özelliği çoğunlukla bağlantılardaki alt çizgileri kaldırmak için kullanılır:
<!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="index.html" target="_blank">Link Burada</a></b></p>
<p><b>Not:</b> a:hover'ın etkili olabilmesi için CSS tanımında a:link ve a:visited'dan sonra gelmesi ZORUNLUDUR.</p>
<p><b>Not:</b> a:active'in etkili olabilmesi için CSS tanımında a:hover'dan sonra gelmesi ZORUNLUDUR.</p>
</body>
</html>
Background Color
background-color özelliği, bağlantıların arka plan rengini belirtmek için kullanılabilir:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="index.html" target="_blank">Link Burada</a></b></p>
<p><b>Not:</b> a:hover'ın etkili olabilmesi için CSS tanımında a:link ve a:visited'dan sonra gelmesi ZORUNLUDUR.</p>
<p><b>Not:</b> a:active'in etkili olabilmesi için CSS tanımında a:hover'dan sonra gelmesi ZORUNLUDUR.</p>
</body>
</html>
Buton Linkler
Bu örnek, bağlantıları kutu/düğme olarak görüntülemek için çeşitli CSS özelliklerini birleştirdiğimiz daha gelişmiş bir örneği göstermektedir:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
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="index.html" target="_blank">Link Burada</a></b></p>
</body>
</html>
Daha Fazla Örnek
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p><b><a class="one" href="index.html" target="_blank">Rengi değişen link</a></b></p>
<p><b><a class="two" href="index.html" target="_blank">Yazı boyutu değişen link</a></b></p>
<p><b><a class="three" href="index.html" target="_blank">Arka rengi değişen link</a></b></p>
<p><b><a class="four" href="index.html" target="_blank">Yazı tipi değişen link</a></b></p>
<p><b><a class="five" href="index.html" target="_blank">Altı çizgili vs değişen link</a></b></p>
</body>
</html>
Yukarıdaki örneğin nasıl çalıştığını görmeniz için mutlaka denemeniz gerekmektedir.
