CSS Bağlantı

CSS ile bağlantı stillerini farklı yollarla ayarlayabilirsiniz.

Metin Bağlantısı Metin Bağlantısı Bağlantı Düğmesi Bağlantı Düğmesi

Bağlantı Stili Ayarlama

Bağlantı, herhangi bir CSS özelliğini (örneğin color,font-family,background ve benzerleriyle stil ayarlayabilirsiniz.

örnek

a {
  color: hotpink;
}

Kendiniz Deneyin

Ayrıca, bağlantının ne durumda olduğunu göz önünde bulundurarak farklı stiller ayarlayabilirsiniz.

Dört bağlantı durumu şunlardır:

  • a:link - Normal, ziyaret edilmemiş bağlantı
  • a:visited - Kullanıcı ziyaret etmiş olan bağlantı
  • a:hover - Kullanıcı fareni bağlantı üzerinde tutarken
  • a:active - Bağlantı tıklanırken

örnek

/* Ziyaret edilmemiş bağlantı */
a:link {
  color: red;
}
/* Ziyaret edilmiş bağlantı */
a:visited {
  color: green;
}
/* Farenin bağlantı üzerindeyken */
a:hover {
  color: hotpink;
}
/* Seçili bağlantı */
a:active {
  color: blue;
}

Kendiniz Deneyin

Birden fazla bağlantı durumuna stil uygulamak için aşağıdaki sıra kurallarını izleyin:

  • a:hover, a:link ve a:visited'nin ardından olmalıdır
  • a:active, a:hover'nin ardından olmalıdır

Metin Dekorasyonu

text-decoration Bağlantıdan alt çizgiyi kaldırmak için kullanılan özellik:

örnek

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Kendiniz Deneyin

Arka Plan Rengi

background-color Bağlantının arka plan rengini belirlemek için kullanılan özellik:

örnek

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Kendiniz Deneyin

Bağlantı Düğmesi

Bu örnekte, birden fazla CSS özelliğini bir araya getirerek bağlantıları kutu/düğme olarak gösterdiğimiz daha ileri bir örneği gösterdik:

örnek

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Kendiniz Deneyin

Daha Fazla Örnek

Hyperlinklere Farklı Stillere Eklenmesi
Bu örnek, nasıl hyperlinklere diğer stiller eklenacağının gösterilmesi.
Gelişmiş - Kenarlı Bağlantı Butonları Oluşturma
Bağlantı kutusu/butonu oluşturma nasıl yapılırinin bir başka örneği.
Farenin Değiştirilmesi
cursor özelliği, gösterilecek farenin türünü belirtir. Bu örnek, farklı türdeki farenin nasıl görüneceğini gösterir (bağlantılara yararlıdır).