Css Bağlantılar

**Ada** · 09 Mayıs 2024, 15:23

Css Bağlantılar

ss dili ile html dersleri'mizde anlatmış olduğumuz bağlantıları daha göze hitap eder şekilde olmasını yani üstüne gelindiğinde renginin değişmesini, ilk olarak mavi gelen bağlantının farklı bir renkte altı çizgisiz gelmesini, tıklandığında farklı bir renk almasını veya ziyaret edilmiş bağlantıların farklı bir renkte veya biçimde olmasını isteyebiliriz bu özellikleri ise css dili ile yapabiliriz.

Css Bağlantı Özellikleri
Css dilinde bağlantıları şekillendirmek için 4 özellik bulunmaktadır. Bunlar:

a:link : Ziyaret edilmemiş yani tıklanmamış bağlantının alacağı tasarımı ayarlamak için kullanılmaktadır.

a:visited : Ziyaret edilmiş yani tıklanmış bağlantının alacağı tasarımı ayarlamak için kullanılmaktadır.

a:hover : Bağlantının üzerine gelindiğinde alacağı tasarımı ayarlamak için kullanılmaktadır.

a:active : Bağlantıya tıklandığı andaki alacağı tasarımı ayarlamak için kullanılmaktadır.

Bilgi: a:hover özelliği a:link ve a:visited özelliklerinden sonra gelmelidir. a:active özelliği ise a:hover özelliğinden sonra gelmek zorundadır.

Örnek 1:
En basit bir link özelliği kullanarak rengini değiştirme işlemleri yapalım. Link ilk olarak siyah olarak gelecek, ziyaret edildiğinde kırmızı rengi, üstüne gelindiğinde mavi ve tıklandığı anda mor rengini alacaktır.

<style type="text/css">

a:link {
color: black;
}

a:visited {
color: red;
}

a:hover {
color: blue;
}

a:active {
color: purple;
}
</style>

Kodu Çalıştır

Örnek 2:
İlk olarak altı çizgileri kaldıralım css metin özellikleri dersinde anlattığımız text-decoration özelliği ile üstüne gelindiğinde ve tıklandığında altı çizgili yapma işlemini gerçekleştirelim.

<style type="text/css">

a:link {
text-decoration:none;
}

a:visited {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

a:active {
text-decoration:underline;
}
</style>
Kodu Çalıştır

Örnek 3:
Bağlantıların arkaplan rengini değiştirelim.

<style type="text/css">

a:link {
background-color:orange;
}

a:visited {
background-color:red;
}

a:hover {
background-color:purple;
}

a:active {
background-color:blue;
}
</style>
Kodu Çalıştır

Örnek 4:
<style type="text/css">

a:link {
background-color:orange;
text-decoration:none;
color:white;
padding:10px;
}

a:visited {
background-color:red;
text-decoration:none;
color:white;
padding:10px;
}

a:hover {
background-color:purple;
text-decoration:none;
color:white;
padding:10px;
}

a:active {
background-color:blue;
text-decoration:none;
color:white;
padding:10px;
}
</style>
Kodu Çalıştır

www.forumbizim.com

Forum	Bilgilendirme
Powered by vBulletinÂ® Version 3.8.6 Copyright Â©2000 - 2023, Jelsoft Enterprises Ltd. ForumBizim.Com Forum Sahibi: ForumBizim	5846 sayılı Fikir ve Sanat Eserleri Kanunu geregince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)