11css height width

Css Ders 11 | Height/Width

CSS’de “height” ve “width” özellikleri, HTML’deki öğelerin boyutunu ayarlamak için kullanılır. Bu özelliklerin nasıl kullanıldığını ve örneklerini aşağıda görebilirsiniz:

Height Özelliği

“height” özelliği, bir HTML öğesinin yüksekliğini ayarlamak için kullanılır. Aşağıda bir örnek verilmiştir:

<div style="height: 200px; background-color: #ccc;">
  Bu bir örnek div öğesidir.
</div>

Yukarıdaki kod, “div” öğesinin yüksekliğini 200 piksel olarak ayarlar. Arka plan rengi “#ccc” olarak belirlenmiştir. Tarayıcıda bu kodu çalıştırdığınızda, “div” öğesi 200 piksel yüksekliğinde görünecektir.

Width Özelliği

“width” özelliği, bir HTML öğesinin genişliğini ayarlamak için kullanılır. Aşağıda bir örnek verilmiştir:

<img src="resim.jpg" alt="Örnek resim" style="width: 300px;">

Yukarıdaki kod, “img” öğesinin genişliğini 300 piksel olarak ayarlar. Tarayıcıda bu kodu çalıştırdığınızda, “img” öğesi 300 piksel genişliğinde görünecektir. Bu örnekte, “src” özelliği resim dosyasının yolunu belirtirken, “alt” özelliği resim yüklenemediğinde görüntülenecek metni belirtir.

Örneklerin Kullanımı

Aşağıdaki örnek kodlarda, “height” ve “width” özelliklerinin nasıl kullanılabileceğini görebilirsiniz:

<div style="height: 100px; width: 50%; background-color: #ff0000;">
  Bu bir örnek div öğesidir.
</div>

<img src="resim.jpg" alt="Örnek resim" style="height: 200px; width: 300px;">

Yukarıdaki kodda, “div” öğesinin yüksekliği 100 piksel, genişliği ise yüzde 50 olarak ayarlanmıştır. Arka plan rengi “#ff0000” olarak belirlenmiştir. “img” öğesinin yüksekliği 200 piksel, genişliği ise 300 piksel olarak ayarlanmıştır.

Özet

CSS’de “height” ve “width” özellikleri, HTML öğelerinin boyutunu belirlemek için kullanılır. “height” özelliği, öğenin yüksekliğini, “width” özelliği ise öğenin genişliğini belirler. Bu özellikler, “div” öğeleri, “img” öğeleri ve diğer birçok HTML öğesi için kullanılabilir.

İletişim: admin@herseymi.com
Yazı oluşturuldu 110

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön