mobile-logo
Top

none Tag

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

CSS Border Özelliği

CSS border özelliği bir elementin dış hatlarının rengini ve stilini belirlemeye olanak sağlar.

Border Style

border-style özelliği nasıl bir kenarlığın gösterileceğini tanımlamamızı sağlar.

Not;  border-style özelliğini belirtmediğiniz sürece hiçbir border tanımlaması işe yaramaz!

border-style değerleri:

none: Çerçevesiz hal

dotted: Noktalı bir çerçeve

dashed: Tirelenmiş kenarlık

solid: Sade, tek renk ve tek çizgi halinde olan kenarlık

double: Çift kenarlık. border-width değerindeki genişlik değeri ile aynı değere sahip iki çerçeve de.

groove: 3 boyutlu oluklu kenarlık. Efektler border-color değerine bağlıdır.

ridge:3D kabarık çizgi. border-color değerine bağlı.

inset: 3d ilave kenar. border-color değerine bağlı.

outset: 3d ilave kenar. border-color değerine bağlı.

Kendiniz deneyin: Kenarın değerini ayarlama

Kenar genişliği

border-width kenarların genişliğini ayarlamak için kullanılır.

Genişlik piksel olarak veya thin, medium ve thick olarak 3 tanımlı kenar genişliğini kullanabilirsiniz.

Not: The “border-width”tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.

Örnek

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Kendiniz deneyin »

 

Kenar rengi

border-color kenarlara renk vermek için kullanılır. Renkler de:

  • name -belirli bir renk adı ile,mesela “red”
  • RGB – belirli bir rgb değeri ile, mesela “rgb(255,0,0)”
  • Hex – belirli bir hex değeri ile,mesela “#ff0000”

Kenar renklerini transparan/”transparent” da yapabilirsiniz.

Continue reading
by

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;

Continue reading
by