Ana sayfa » Teknoloji » CSS Dersleri » CSS Dersleri Bölüm 6 – Bağlantı(Link) Stillendirme

CSS Dersleri Bölüm 6 – Bağlantı(Link) Stillendirme

tarafından Hasan Yasin Türkyılmaz
0 yorum 1 gösterim

Linkleri Biçimlendirme(Styling Links)

Linkler herhangi bir CSS özelliği ile biçimlendirilebilir, color, font-family, background gibi.

Linklerin özelliği, bulundukları duruma göre stillendirilebilmeleri. Yani; bir link normal durumda(ilk durum), ziyaret edilmiş durum, linkin üzerine gelindiği durum, linkin aktif olduğu yani o anlık tıklanma durumu diye dört halde bulunur. Ve her bir durum ayrı ayrı stillendirilir.

a:link {color:#FF0000;}      /* ziyaret edilmemiş link */
 a:visited {color:#00FF00;}  /* ziyaret edilmiş link */
 a:hover {color:#FF00FF;}  /* fare üzerinde link */
 a:active {color:#0000FF;}  /* seçilen link */

Deneme adresiniz için tıklayabilirsiniz!

Fakat farklı durumları stillendirmede birtakım kurallar mevcut;

  • a:hover, a:link ve a:visited’tan sonra gelmelidir.
  • a:active, a:hover’dan sonra gelmelidir.

Genel Link Stilleri

Yukarıdaki örnekte link, durumuna göre renk değiştirmekte.

Linkleri stillendirmenin diğer yolları da aşağıda:

Text Decoration

text-decoration özelliği linklerin altındaki çizgileri kaldırmak için kullanılır çoğunlukla. Örnek;

a:link {text-decoration:none;}
 a:visited {text-decoration:none;}
 a:hover {text-decoration:underline;}
 a:active {text-decoration:underline;}

Deneme adresiniz için tıklayabilirsiniz!

Background Color

background-color özelliği linkler için arkaplan atar: Örnek;

a:link {background-color:#B2FF99;}
 a:visited {background-color:#FFFF85;}
 a:hover {background-color:#FF704D;}
 a:active {background-color:#FF704D;}

Deneme adresiniz için tıklayabilirsiniz!

Ve 2 uygulama daha…

Bağlantılar için farklı stiller
Hiperlinklere farklı stillerin nasıl atanacağının uygulaması.

Gelişmiş – Link kutuları oluşturma
Gelişmiş bir uygulama, linklerin css kullanılarak kutu olarak gösterilmesi.

Alakalı yazılarım

Bu site çerezleri kullanarak deneyiminizi artırmakta. Bilgilerinizi satmamakta, spam amacıyla yapılan reklamlarda da kullanmamakta. Sizlere faydalı içerikler sunarak öğrenmeniz için çabalamakta. Kabul et Devamını oku

%d blogcu bunu beğendi: