Web Programlama

CSS Linkler

Lisans: Creative Commons 11.12.2020 tarihinde güncellendi

Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

#css-link #a-link #a-visited #a-hover #a-active #metin-dekorasyonu #background-property #text-decoratioin #underline #web-programlama

Web bağlantılarına (link) herhangi bir CSS özelliği kullanılarak (color, font-familiy, background vb) stil verilebilir. Bunun dışında linkler, hangi durumda (state) bulunduklarına göre de şekillendirilebilirler. Dört bağlantı durumu aşağıdaki gibidir:

a:link – Normal ziyaret edilmemiş bağlantı.
a:visited – Kullanıcının ziyaret ettiği bir bağlantı.
a:hover – Kullanıcının faresinin üzerinde gezindiği bağlantı.
a:active – Tıklanmış olan bağlantı.

/* ziyaret edilmemiş bağlantı */
a:link {
    color: #FF0000;
}

/* ziyaret edilmiş bağlantı */
a:visited {
    color: #00FF00;
}

/* fare gezdirilen bağlantı */
a:hover {
    color: #FF00FF;
}

/* seçilmiş link */
a:active {
    color: #0000FF;
}

<!DOCTYPE html>
<html>
    <head>
        <style>
            /* ziyaret edilmeyen bağlantı */
            a:link {
                color: #FF0000;
            }
       
        /* ziyaret edilen bağlantı */
        a:visited {
            color: #00FF00;
        }

        /* fare gezinen bağlantı */
        a:hover {
            color: #FF00FF;
        }
       
        /* seçilmiş bağlantı */
        a:active {
            color: #0000FF;
        }
        </style>
    </head>

    <body>
        <p><b><a href="sec.html" target="_blank">DOGUS UNIVERSITESI</a></b></p>
    </body>
</html>

Çeşitli bağlantı (link) durumları için stil tanımı yaptığınızda, bazı sıra kuralları mevcuttur:

a:hover, a:link ve a:visited'ten sonra gelir.
a:active, a:hover'dan sonra gelir.

Yaygın bağlantı stilleri

Yukardaki örnekte, duruma göre bağlantının renk değiştirdiğini gördük. Bağlantılara stil vermek için kullanılan diğer yaygın yöntemleri de aşağıda vereceğiz:

Metin dekorasyonu

Text-decoration özelliği, yaygın olarak linklerden alt çizgi karakterini uzaklaştırmak için kullanılır.

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

a:active {
   text-decoration: underline;
}

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:link {
                text-decoration: none;
            }

       
        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        a:active {
            text-decoration: underline;
        }
        </style>
    </head>

    <body>
        <p><b><a href="sec.html" target="_blank">This is a link</a></b></p>
        <p><b>Not</b> a:hover, a:link ve a:visited tan sonra gelmeli</p>
        <p><b>Not</b> a:active, a:hover'dan sonra gelmeli</p>
    </body>
</html>

Zemin rengi

Background-property özelliği, bağlantılar (link) için zemin rengini belirler.

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

a:visited {
    background-color: #FFFF89;
}

a:hover {
    background-color: #FA704D;
}

a:active {
    background-color: #FF704D;
}

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:link {
                background-color: #B2FF99;
            }
      
        a:visited {
            background-color: #FFFF85;
        }

        a:hover {
            background-color: #FF704D;
        }

        a:active {
            background-color: #FF704D;
        }

        </style>

    </head>

    <body>
        <p><b><a href="sec.html" target="_blank">FRANSIZ KUTUPHANESI LINKI</a></b></p>
        <p><b>Not</b> a:hover, a:link ve a:visited tan sonra gelmeli</p>
        <p><b>Not</b> a:active, a:hover dan sonra gelmeli</p>   
    </body>

</html>

Sınava Gir