Öneri ve Hata Raporu



Günün Sözü Her an seni düşünür

kategori CSS
oylama 3.1/5 yorum 4 yorum yazar Hakan Taşan tarih 21 Eylül 2013

Bu makalede CSS ile linkleri biçimlendirmeyi öğreneceğiz.

Eğer hiçbir ayar yapmadıysanız sayfanızdaki linkler "altı çizili ve mavi renkte" olacaktır.

Eğer linke tıklayıp geçerli bir siteye girmişseniz bu kez linkler "altı çizili ve mor renkte" olacaktır.

Bu varsayılan biçimleri değiştirmek için CSS kodlarından yararlanacağız.

1) Linklerin Rengini Değiştirmek

Linkleri renklendirmek için "color:#hexadecimal_renk_kodu;" kodunu kullanacağız. Yalnız tek başına bu kod işe yaramaz, o yüzden "a" etiketi ile birlikte kullanacağız. Toplamda 5 kodumuz var;

I. a

Sadece "a" kullanırsak sitemizde bulunan bütün linklerin rengini değiştirmiş oluruz. Yani linke daha önce tıklanmış olsa da (mor renkte olması gerekirdi), mouse'u linkin üzerine getirsek de ayarladığımız renkte görünür.

Örnek Kod

a{color:#FF0000;}

 

II. a:link 

Kullanıcı tarafından tıklanmamış linklerin rengini belirlemek için kullanılır. Yani tıklandıktan sonra yine varsayılan renk olan mor renge döner.

Örnek Kod

a:link{color:#FF0000;}

 

III. a:visited

Kullanıcı tarafından daha önce tıklanmış linklerin rengini belirlemek için kullanılır.

Örnek Kod

a:visited{color:#FF0000;}

 

IV. a:hover

Kullanıcı mouse'u linkin üzerine gelince bu kod aktif olur ve linkin rengi değişir.

Örnek Kod

a:hover{color:#FF0000;}

 

 

V. a:active

Kullanıcının linke tıkladığı andaki linkin rengini ayarlar. Örneğin, linkin rengi mavi olsun ve bu kodu kullanarak rengi kırmızı yapalım. Mouse'u linkin üzerinde basılı tutarsak rengin değiştiğini görebiliriz.

Örnek Kod

a:active{color:#FF0000;}

 


2) Linklerin Altındaki Çizgiyi Kaldırmak

Linklerin altında bulunan çizgiyi kaldırmak için "text-decoration: none;" kodunu kullanacağız. Link renklendirmede olduğu gibi yine "a" etiketi ile birlikte kullanacağız ve üstteki maddelerin aynısı geçerlidir. Hemen bir örnek verelim;

Örnek Kod

a:link{text-decoration:none;}

 

Şimdi de üstü çizili bir link oluşturalım;

Örnek Kod

a:link{text-decoration:overline;}

 

Şimdi de ortası çizili bir link oluşturalım;

Örnek Kod

a:link{text-decoration:line-through;}

 

3) Link Arka plan Rengini Değiştirmek

Linklerin arka plan rengini değiştirmek için "background-color:#hexadecimal_renk_kodu;" kodunu kullanacağız. Yine "a" etiketinin bütün özellikleri geçerlidir. Örneklere başlayalım;

Örnek Kod

a:link{background-color:#FF0000;}

 

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

4 Yorum


yorum

onur erginer

22 Eylül 2013 04:58


çok güzel

yorum

a

16 Ağustos 2015 11:02


Emeğine sağlık, Allah razı olsun.

yorum

Burak Sarıkafa

28 Aralık 2016 14:10


Hocam bunları HTML'de nasıl yapabiliriz onu da söyler misin lütfen?

yorum

Admin

28 Aralık 2016 15:54


hocam HTML'de yapmak derken eğer a (link) etiketi içerisinde style ile kullanmayı kastediyorsanız, bildiğim kadarıyla bunun mümkün olmadığını söyleyebilirim. eğer böyle bir yöntem varsa da kullanmanızı tavsiye etmem. diğer türlü html dosyanıza css dosyanızı yükleyerek kullanabilirsiniz.