Bir Önceki Dersimizde CSS Font Özelliklerini Anlatmıştım. Bugün İse Div Özelliklerini Anlatacağım. Bir Önceki Dersimize Buradan Ulaşabilirsiniz.
CSS Div Özellikleri
Tablosuz tasarımların gereklilik kazandığı günümüzde, bu iş için esas etiketimiz olan “<div>”
etiketi, kutu modeli (box model) oluştururken de esas etiket konumundadır.
Kutu modeli şu üç ana ögeden oluşur;
- margin (kenar dışı boşluğu)
- border (kenar kalınlığı)
- padding (kenar içi boşluğu)
Kenar Dışı(Margin) Boşluğu Özellikleri
Turuncu renk ile sınırları belli olan kutumuzun diğer ögelerle arasındaki mesafeyi
belirleyen "margin‟ ögesinin alt elemanları şunlardır;
- margin-top (üst kenar dışı boşluğu)
- margin-right (sağ kenar dışı boşluğu)
- margin-bottom (alt kenar dışı boşluğu)
- margin-left (sol kenar dışı boşluğu)
- margin (kenar dışı boşlukları) (Kısaltma amaçlı kullanılır.)
body {
margin-right: 50px
}
sayfamızın sağ kenar dışı boşluğunu 50 px
yapar.
Kenar Çizgisi(Border) Özellikleri
Kenar çizgisi özellikleri ile kenar çizgisinin biçemini, rengini ve kalınlığını
ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz. Bu
özellikler Ģunlardır;
border-style (kenar çizgisi biçemi)
- border-top-style (üst kenar çizgisi biçemi)
- border-right-style (sağ kenar çizgisi biçemi)
- border-bottom-style (alt kenar çizgisi biçemi)
- border-left-style (sol kenar çizgisi biçemi)
border-width (kenar çizgisi genişliği-kalınlığı)
- border-top-width (üst kenar çizgisi genişliği)
- border-right-width (sağ kenar çizgisi genişliği)
- border-bottom-width (alt kenar çizgisi genişliği)
- border-left-width (sol kenar çizgisi genişliği)
border-color (kenar çizgisi rengi)
- border-top-color (üst kenar çizgisi rengi)
- border-right-color (sağ kenar çizgisi rengi)
- border-bottom-color (alt kenar çizgisi rengi)
- border-left-color (sol kenar çizgisi rengi)
border (Kısaltma işlemleri için kullanılır.)
Kenar Çizgisi(Border) Biçimleri
Kenar İçi(Padding) Boşluğu Özellikleri
Kutu modeli resmimizden hatırlayacağınız gibi; kenar çizgileri turuncu
renk ile gösterilen kutumuzda, kenar çizgileri ile içerik arasındaki mesafeyi ayarlamaya
yarayan “padding” ögesinin alt elemanları şunlardır;
- padding-top (üst kenar içi boşluğu)
- padding-right (sağ kenar içi boşluğu)
- padding-bottom (alt kenar içi boşluğu)
- padding-left (sol kenar içi boşluğu)
- padding (kenar içi boşlukları) (Kısaltma amaçlı kullanılır.)
Devamını Oku