Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları

  • Onur YURT
  • iletisim@hazirsitekodlari.com
  • 57

    Makale

  • 3

    Yorum

  • 8

    Kategori

Webmaster adına tüm bilgi ve paylaşım platformudur.

Senin Kodun

Ana Sayfa / Css / CSS Link (URL) Özellikleri Ders#7

Css | 16 Mayıs 2020 | 0 | 313
CSS Link (URL) Özellikleri Ders#7

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>

BENZER KONULAR

Css | Kategorisine Ait Yazıların Daha Fazlası...

KONU HAKKINDA (Yorum Yapılmamış) | SENDE YORUM YAP DESTEK OL!

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

BEN KİMİM?

Onur YURT

Web Developer And Coder

Merhaba arkadaşlar Adım Onur YÜRT Bursada doğdum ve yaşıyorum 2009 yılından itibaren web hayatına adım attım ve şuanda bulunduğum sayfayı açtım amaçım sizlere birşeyler öğretmek ve kazandırmak Web tasarım konusunda kendimi yeterince geliştirdiğime inanıyorum bu bilgileri zamanla siz değerli takipçilerime sunmak yeterince bildiğim kodlama diller Css3, Html5, Javascript ve Php dir.

POPULER KONULAR

Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları...