Top

decoration Tag

  • All
  • Dijital pazarlama
  • Dijital, İyi Şeyler Podcast
  • E-Ticaret
  • Eğitim
  • Growth hacking
  • İnceleme
  • Kişisel
  • Rehber
  • Reklam
  • Sosyoloji
  • Teknoloji
  • Wordpress

Linkleri Biçimlendirme(Styling Links)

Linkler herhangi bir CSS özelliği ile biçimlendirilebilir, color, font-family, background gibi.

Linklerin özelliği, bulundukları duruma göre stillendirilebilmeleri. Yani; bir link normal durumda(ilk durum), ziyaret edilmiş durum, linkin üzerine gelindiği durum, linkin aktif olduğu yani o anlık tıklanma durumu diye dört halde bulunur. Ve her bir durum ayrı ayrı stillendirilir.

a:link {color:#FF0000;}      /* ziyaret edilmemiş link */
 a:visited {color:#00FF00;}  /* ziyaret edilmiş link */
 a:hover {color:#FF00FF;}  /* fare üzerinde link */
 a:active {color:#0000FF;}  /* seçilen link */

Deneme adresiniz için tıklayabilirsiniz!

Fakat farklı durumları stillendirmede birtakım kurallar mevcut;

  • a:hover, a:link ve a:visited’tan sonra gelmelidir.
  • a:active, a:hover’dan sonra gelmelidir.

Genel Link Stilleri

Yukarıdaki örnekte link, durumuna göre renk değiştirmekte.

Linkleri stillendirmenin diğer yolları da aşağıda:

Text Decoration

text-decoration özelliği linklerin altındaki çizgileri kaldırmak için kullanılır çoğunlukla. Örnek;

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

Deneme adresiniz için tıklayabilirsiniz!

Background Color

background-color özelliği linkler için arkaplan atar: Örnek;

Text Color (Yazı rengi)

Renk özelliği yazının rengini değiştirebilmek için kullanılır.

CSS ile bir renk;

  • Bir hex değeri “#ff0000”
  • Bir rgb değeri “rgb(255,0,0)”
  • Bir renk ismi “red” ile tanımlanır.

CSS renk değerlerine ait referans Css derslerinin bitiminde verilecektir.

Sayfanın varsayılan rengi body seçicisinde tanımlanır. Misal;

body {color:blue;}
 h1 {color:#00ff00;}
 h2 {color:rgb(255,0,0);}

W3C’nin css bildirisine göre; Color özelliğini verdiyseniz, background-color özelliğini de vermek zorundasınız.

Text Alignment (Yazı hizalama)

text-align özelliği yazının yatay hizalamasının ayarını tanımlar.

Yazı merkeze alınabilir veya sağa/sola hizalanabilir ve yahut iki tarafa hizalanabilir.

text-align, justify olarak belirlendiğinde ,her satır genişler iki yana yaslanmak için satır genişliğince ve sol ve sağ margin düz olur dergilerdeki ve gazetelerdeki gibi.

Text Decoration

text-decoration özelliği ile yazı süslemelerinin ekleyebilir ya da kaldırabilirsiniz.