Css Basit Taglar ve Özellikler -1

css-logo

LİNK

CSS ile bağlantılar farklı şekillerde şekillendirilebilir.
Bu farklılıklar: Buton Bağlantısı ve Metin Bağlantısı gibi bağlantılardır.

Stil Bağlantıları

Bağlantılar herhangi bir CSS özelliği (örnek olarak bu tarzkarda olabilirler: colorfont-familybackgroundvb.) Aşağıdaki örnekte olduğu gibi bağlantılara renk verebiliriz.

a {
  color: hotpink;
}

Buna ek olarak, bağlantılar hangi durumda olduklarına bağlı olarak farklı şekillerde şekillendirilebilir.

Dört bağlantı durumu:

Reklamlar


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

Bu dört bağlantı durumlarınıda aşağıdaki gibi bir örnek verebilriiz.

/* ziyaret edilmemiş link */
a:link {
  color: red;
}

/* ziyaret link */
a:visited {
  color: green;
}

/* fare üzerinde link */
a:hover {
  color: hotpink;
}

/* seçilmiş link */
a:active {
  color: blue;
}

Birkaç bağlantı durumu için stili ayarlarken, bazı kurallar vardır:
a:hover, a:link ve a:visited ardından gelmelidir
a:active ise a:hover ardından gelmelidir.

Metin Süsleme

Genellike bağlantılardaki alt çizgiyi kaldırmak için text-decoration kullanılır. Aşağıda verilen örneği incelebiliriz.

Reklamlar
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Gelişmiş – Bağlantı Düğmeleri

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

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

İmleci değiştirme

İmleç özelliği, görüntülenecek imleç türünü belirtir. Bu örnek, farklı imleç türlerini gösterir (bağlantılar için yararlı olabilir).

<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><br>

Yukarıda örneği incelemek için bu linkten faydanabilirsiniz.


Bağlantılara farklı stiller ekleme

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

Yukarıda örneği incelemek için bu linkten faydanabilirsiniz.

5 Thoughts to “Css Basit Taglar ve Özellikler -1”

  1. Ceren

    Emeğine sağlık kardeşim harika olmuş çok beğendim çook ❣

    1. emrebalasar

      Çok teşekkür ederim 🙂

  2. Beratmibilmemneoliyor

    Kardeşim beri bak beri pagein başta adaga tam 6 adet adversitment var reklamı çekte içeriği görek yav

    1. emrebalasar

      Düzelttim aga

Leave a Comment