CSS Link Kullanımı ve Link Özellikleri

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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="yazilimkodlama.com" target="_blank">CSS Örnekleri</a></b></p>

</body>
</html>


link1.png


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>

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="yazilimkodlama.com" target="_blank">CSS Örnekleri</a></b></p>

</body>
</html>


link2.gif


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="yazilimkodlama.com" target="_blank">CSS Örnekleri</a></b></p>

</body>
</html>


linkbutton.gif
 
Üst Alt