CSS ile Linkleri Biçimlendirme

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;}