CSS Bağlantılar (Links)

CSS Bağlantılar (Links)

CSS ile bağlantılar (linkler) birçok farklı şekilde biçimlendirilebilir.

Stil Bağlantıları (Styling Links)

Bağlantılar, herhangi bir CSS özelliğiyle (ör. renk, yazı tipi ailesi, arka plan vb.) biçimlendirilebilir.

Örnek:

a {
  color: hotpink;
}

Ek olarak, bağlantıların hangi durumda olduklarına bağlı olarak farklı şekilde biçimlendirilebilirsiniz.

• a:link - normal, ziyaret edilmemiş bir bağlantı.
• a:visited - kullanıcının ziyaret ettiği bir bağlantı.
• a:hover - kullanıcı fareyi üzerine getirdiğinde bir bağlantı.
• a:active - tıklandığı anda bir bağlantı.

Örnek:

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

/* <iyaret edilmiş bağlantı  */
a:visited {
  color: green;
}

/* fareyi üzerine getirilen bağlantı */
a:hover {
  color: hotpink;
}

/* tıklanan bağlantı  */
a:active {
  color: blue;

Birkaç bağlantı durumu için stili ayarlarken bazı sıralama kuralları vardır bu sıralama şu şekildedir:

• a:hover, a:link ve a:visited'den sonra gelmelidir.
• a:active, a:hover'dan sonra gelmelidir.

Metin Dekorasyonu (Text Decoration)

text-decoration özelliği çoğunlukla bağlantılardan alt çizgileri kaldırmak için kullanılır.

Örnek:

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Arka Plan Rengi (Background Color)

background-color özelliği, bağlantılar için bir arka plan rengi belirtmek için kullanılabilir.

Örnek:

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 

Bağlantı Butonları (Link Buttons)

Bu örnek bağlantıları, kutu ve buton olarak görüntülemek için birkaç CSS özelliğini birleştirdiğimiz daha gelişmiş bir örneği göstermektedir.

Ö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;
}

Daha Fazla Örnek

Örnek 1:

Bu örnek, bağlantılara başka stillerin nasıl ekleneceğini göstermektedir.

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Örnek 2:

Bu örnek, farklı imleç türlerini göstermektedir.

<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>