Beytullah Toprak
CSS Temel - CSS Linkler / Bağlantılar (Links)

CSS Temel - CSS Linkler / Bağlantılar (Links)


CSS ile Bağlantı Oluşturma

Bir bağlantı dört farklı durumu vardır - linkvisitedactiveve hover. Bir bağlantının veya köprünün bu dört durumu , hangi durumda olduklarına bağlı olarak çapa öğesinin CSS özellikleri aracılığıyla farklı şekilde stillenebilir .

İşte <a> bir köprünün farklı durumları için farklı stilleri tanımlamak için kullanabileceğiniz HTML etiketiyle ilişkili CSS sözde sınıfları.

  • a: link - Üzerinde fare imleci olmayan normal veya görünmeyen bağlantılar için stiller ayarlayın.
  • a: visited - Kullanıcının ziyaret ettiği, ancak üzerinde fare imleci bulunmayan bir bağlantı için stilleri ayarlayın.
  • a: hover - Kullanıcı fare işaretçisini üzerine getirdiğinde bir bağlantının stillerini ayarlayın.
  • a: active - Tıklanma sürecinde olan bir bağlantının stillerini ayarlayın.

Sen mesela istediğiniz herhangi bir CSS özelliği belirtebilirsiniz colorfont-familybackground bunların her birine, vb seçicileri normal metin ile yapmak atar gibi, bağlantıların tarzını yeniden tanımlamak için.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>Link Örneği</title>
  <style type="text/css">  
    a:link {
        color: #FF0000;
        text-decoration: none;
    }
    a:visited {
        color: #00FF00;
    }
    a:hover {
        color: #FF00FF;
        text-decoration: underline;
    }
    a:active {
        color: #0000FF;
    }
  </style>
</head>
<body>
  <p><a href="https://www.beytullahtoprak.com.tr" target="_top">Ziyaret Edin!</a></p>
</body>
</html>

Birkaç bağlantı durumu için stil belirlediğiniz sıra önemlidir, çünkü en son tanımları önceki CSS kodundan önceliklidir.


Standart Bağlantı Stilleri

Tüm büyük web tarayıcılarında, web sayfalarındaki bağlantılar, stilleri özel olarak ayarlamazsanız, tarayıcının varsayılan bağlantı renklerinin altını çizer ve kullanır.

Örneğin, Firefox gibi  web tarayıcılarındaki varsayılan bağlantı renkleri - ziyaret edilmeyenler için mavi , ziyaret edilenler için mor ve etkin bağlantı için kırmızıdır .

Bağlantıların Rengini Ayarlama

Bağlantı renginin nasıl ayarlanacağını gösteren örnek.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS Örneği</title>
  <style type="text/css">  
    a:link {
        color: #FF0000;
    }
    a:visited {
        color: #00FF00;
    }
    a:hover {
        color: #FF00FF;
    }
    a:active {
        color: #0000FF;
    } 
  </style>
</head>
<body>
  <p><a href="https://beytullahtoprak.com.tr/" target="_top">Ziyaret Edin!</a></p>
</body>
</html>

Varsayılan Alt Çizgiyi Bağlantılardan Kaldırma

text-decoration CSS özelliği genellikle bağlantılardan varsayılan alt çizgi kaldırmak için kullanılır. Aşağıdaki örnek text-decoration, bir köprünün farklı durumları için özelliğin nasıl kaldırılacağını veya ayarlanacağını gösterir.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS Örnekleri</title>
  <style type="text/css">  
    a:link {
        color: #FF0000;
        text-decoration: none;
    }
    a:visited {
        color: #00FF00;
        text-decoration: none;
    }
    a:hover {
        color: #FF00FF;
        text-decoration: underline;
    }
    a:active {
        color: #0000FF;
        text-decoration: underline;
    }
  </style>
</head>
<body>
  <p><a href="https://beytullahtoprak.com.tr/" target="_top">Siteyi Ziyaret Edin!c</a></p>
</body>
</html>

 


Yorum (0)

Hiç Bir Yorum Bulunamadı. İlk Yorumuz Siz Yapın :)

Yorum Yap