HTML'de Bağlantı/Link Renkleri

by trustix


Eklenme Tarihi : 16 Aralık 2020 18:33 Views:     295



Harici bir siteye verilen bağlantı metni ya da site için köprü ve bağlantılar ziyaret edilmiş olmasına, ziyaret edilmemiş olmasına veya etkinlik - pasiflik durumuna bağlı olarak farklı renklerde görüntülenmektedir.

HTML Bağlantı Renkleri Nasıldır

Modern web tarayıcıları HTML sayfalarında

  • Ziyaret edilmemiş bağlantıları altı çizili biçimde ve mavi renkte
  • Ziyaret edilen bağlantıları altı çizili biçimde ve mor renkte
  • Etkin bir bağlantıyı ise altı çizili ve kırmızı renkte göstermektedir.

Ancak bu metin formatları ve renkler CSS aracılığı ile değiştirilebilir. Burada bu varsayılan formatların nasıl değiştirileceğine değineceğiz. Bunun için HTML'deki <a> etiketine CSS ile müdahale etmemiz gerekiyor. Bunun için dahili CSS kullanmayı burada tercih ediyoruz.

 

Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Bağlantı Renkleri  </title>

<style> 
/* Ziyaret edilmemiş bağlantı  */
    a:link {
        color: green;
        text-decoration:none;
    }


    /* Ziyaret edilen bağlantı */
    a:visited{
        color:darkmagenta;
        text-decoration:none;
    }

    /* Aktif bağlantı  */
    a:active{
        color:purple;
        text-decoration:none;
    }
</style>
</head>
<body>

    <a href="https://www.vikikod.com">Siteye Gitmek İçin Tıklayınız</a> <br>
    <a href="https://www.google.com">Siteye Gitmek İçin Tıklayınız</a> <br>
    <a href="https://www.twitter.com">Siteye Gitmek İçin Tıklayınız</a> <br>
</body>
</html>

 

Bağlantı renkleri dahili veya harici CSS dosyaları ile şekillendirilebilir. Ya da bağlantı metni bir butona dönüştürülerek aynı işlemler yapılabilir. Burada CSS tasarımını biz standarda yakın bir şekilde kullandık. Tasarımın nasıl olacağı ne kadar estetik ya da sade olacağı tamamen sizin tercihlerinize ve hayal gücünüze bağlıdır.

CSS ile HTML'deki bağlantıların varsayılan tasarımları nasıl değiştirilir sorusuna cevap aradık.

Herkes İyi Kodlamalar





0

Yorum Formu

vikikod.com    © 2019