Css Ders 3 – Temel Özellikler (Properties)

Metin Biçimlendirme

color: Metnin rengini belirler. Değer olarak renk adları (red, blue), ondalık RGB değerleri (#FF0000), veya 16’lık hexadecimal kodlar (#f00) kullanılabilir.
font-size: Metin boyutunu belirler. Genellikle px, em, rem gibi birimlerle kullanılır. (Örneğin: 16px, 1.2em)
font-family: Kullanılacak yazı tipini belirtir. Birden fazla yazı tipi sıralaması verilebilir; ilk kullanılabilir yazı tipi kullanılır. Web güvenli yazı tipleri hakkında bilgi verin (Arial, Helvetica, Times New Roman gibi).
font-weight: Metnin kalınlığını belirler. normal, bold, lighter, veya 100-900 arası sayısal değerlerle kullanılabilir.
font-style: Metnin stilini belirler. normal, italic, oblique seçenekleri vardır.
text-align: Metnin hizalamasını belirler. left, right, center, justify seçenekleri vardır.
text-decoration: Metne dekorasyon ekler. none, underline, overline, line-through seçenekleri vardır.
line-height: Satır yüksekliğini belirler. Sayısal bir değer (örneğin: 1.5) veya piksel değeri kullanılabilir.
letter-spacing: Harfler arasındaki boşluğu ayarlar.
word-spacing: Kelimeler arasındaki boşluğu ayarlar.

Kutu Modeli (Box Model)

Her HTML öğesi bir kutu gibi davranır. Bu kutunun içeriği, padding, kenarlık ve marjin olmak üzere farklı katmanlardan oluşur.

width: Öğenin içeriğinin genişliğini belirler.
height: Öğenin içeriğinin yüksekliğini belirler.
padding: İçeriğin ve kenarlığın arasındaki boşluğu belirler. padding-top, padding-right, padding-bottom, padding-left gibi ayrı özelliklerle de kontrol edilebilir.
border: Öğenin etrafındaki kenarlığı belirler. border-width, border-style, border-color özellikleri ile ayrı ayrı kontrol edilebilir. solid, dashed, dotted vb. gibi farklı kenarlık stilleri bulunur.
margin: Öğenin dışındaki boşluğu belirler. margin-top, margin-right, margin-bottom, margin-left gibi ayrı özelliklerle de kontrol edilebilir.
box-sizing: border-box;: Varsayılan olarak, width ve height özellikleri sadece içeriği kapsar. border-box ile bu değerler padding ve kenarlığı da içerir, böylece boyutlandırma daha kolay hale gelir.

Arka Plan Özellikleri

background-color: Öğenin arka plan rengini belirler.
background-image: Öğenin arka planına bir resim ekler. url() fonksiyonu ile resmin yolunu belirtilir.
background-repeat: Arka plan resminin nasıl tekrarlanacağını belirler. repeat, no-repeat, repeat-x, repeat-y seçenekleri vardır.
background-position: Arka plan resminin konumunu belirler. top, bottom, left, right, veya piksel değerleriyle belirtilebilir.
background-size: Arka plan resminin boyutunu belirler. cover, contain, veya piksel/yüzde değerleriyle belirtilebilir.

Kenarlıklar (Borders)

border-width: Kenarlığın kalınlığını belirler.
border-style: Kenarlığın stilini belirler. none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset seçenekleri vardır.
border-color: Kenarlığın rengini belirler.

Yükseklik ve Genişlik