3.1/5 5 yorum Hakan Taşan 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;
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.
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.
Kullanıcı tarafından daha önce tıklanmış linklerin rengini belirlemek için kullanılır.
Kullanıcı mouse'u linkin üzerine gelince bu kod aktif olur ve linkin rengi değişir.
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.
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;
Şimdi de üstü çizili bir link oluşturalım;
Şimdi de ortası çizili bir link oluşturalım;
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;
css css link rengi değiştirme link arka plan rengi ekleme css link biçimlendirme css link alt çizgisi kaldırma
22 Eylül 2013 04:58
16 Ağustos 2015 11:02
Emeğine sağlık, Allah razı olsun.
Hocam bunları HTML'de nasıl yapabiliriz onu da söyler misin lütfen?
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.
04 Ağustos 2017 17:04
Burak Sarıkafa .
Sanırım Html yani index.html sayfasında bu kodları yazmak istiyorsun . <head> tagları altına <style> tagı açıp kodlamaları oraya yazabilirsin ancak bunu tavsiye etmem. Seo Yönünden kötü bi iznenim olur .