Stil Sayfaları (CSS) 7 - Kutu Modeli Özellikleri ve Çalışma Prensipleri
4.2. Kutu Modeli Özellikleri ve Çalışma Prensipleri
HTML’de <body> etiketi içerisine eklenen her eleman, bir kutu şeklinde sayfaya yerleşmektedir. Kutuların her birinin margin (dış boşluk), border (kenarlık), padding (iç boşluk), content (içerik) bölümleri bulunur (Görsel 4.17). Bir sayfadaki en büyük kapsayıcı kutu <body> elemanıdır. Genelde kutu denilince akla <div> ve <span> etiketleri gelmektedir. Fakat <a>, <b>, <i>, <li>, <img> ve diğer tüm elemanlar da kutu şeklinde sayfaya yerleşmektedir.
 |
| Görsel 4.17: Kutu modeli |
4.2.1. CSS Ölçü Birimleri
Boyutlandırma işlemleri yaparken px, em, % ölçü birimleri kullanılabilir.
• px (Piksel): Sabit ölçü birimidir. Piksel cinsinde ölçü vermek için kullanılır.
• % (Yüzde): Göreceli ölçü birimidir. Elemanların kendisini kapsayan elemana göre ölçü biriminin değeri değişmektedir. Örneğin; <div> elemanı tarafından kapsanan <p> elemanı için
font-size:33%
şeklinde yüzde ölçü birimi ile stil ayarları yapıldığında <div> elemanın genişlik değerinin yüzde 50’si ve font boyutu değerinin yüzde 33’ü <p> elemanın yeni değerleri olacaktır.
p{ width:50%; font-size:33% }
Yukarıdaki örnek koda göre <p> elemanın genişlik değeri 150 piksel, font boyutu 10 piksel olacaktır.
• em: Göreceli ölçü birimidir. % (yüzde) ölçü birimiyle arasındaki fark, elemanların kendisini kapsayan elemanın yazı tipi boyutuna göre ölçü biriminin değişmesidir.
Örneğin; <body> elemanının varsayılan yazı boyutu 16px’tir, elemanın kapsadığı diğer elemanlar için 0.5em=8px, 1em=16px, 2em=32px vb. şekilde olacaktır. <body> elemanının yazı boyutu değiştirildiğinde em değerleri de değişecektir.
p{ width:5em; font-size:0.25em;}
Yukarıdaki örnek koda göre <p> elemanın genişlik değeri 160 piksel, yazı boyutu 8 piksel olacaktır.
• vw (Ekran Genişliği), vh (Ekran Yüksekliği): Göreceli ölçü birimidir. Web sayfasının yansıtıldığı ekranın genişlik ve yükseklik değerlerine göre ölçü birimi değişmektedir.
Örneğin, web sayfası tam ekran görüntüleniyorsa sayfa içerisinde bir <div> elemana width:10vw; height:20vh; kodu eklenmişse <div> elemanın genişliği sayfanın o anki genişliğinin onda biri ise o anki yüksekliğinin beşte biri kadar olacaktır. Sayfa görünümü küçültülüp büyütüldüğünde vw, vh değerleri de değişecektir.
|
HTML |
CSS |
|
<body> <b>Kutu
1</b> <i>Kutu
2</i> <u>Kutu
3</u> <div>Kutu
4</div> </body> |
body{ background-color:royalblue; } b,i,u,div{ border:solid red
2px; } |
 |
| Görsel 4.18: Kutular |
Yukarıdaki örnek kodlar çalıştırıldığında Görsel 4.18’de görüldüğü gibi elemanların kutu şeklindeki sınırları belli olmaktadır.
4.2.2. Dış Boşluk (Margin)
Dış boşluk (Margin), kutunun diğer kutularla veya sayfanın kenarlarıyla arasındaki boşluğu belirleyen CSS kodudur. Kutu dışı boşluk da denir. Beş farklı şekilde kullanılabilir (Tablo 4.8).
|
CSS Kodu |
Açıklama |
Kullanımı |
|
margin-top |
Üst taraftan kutu dışı
boşluk verir. |
margin-top: 10px; |
|
margin-right |
Sağ taraftan kutu
dışı boşluk verir. |
margin-right: 25px;
|
|
margin-bottom |
Alt taraftan kutu
dışı boşluk verir. |
margin-bottom:
15px; |
|
margin-left |
Sol taraftan kutu
dışı boşluk verir. |
margin-left: 5px; |
|
margin |
Tüm yönlerden kutu
dışı boşluk verir. |
margin: 10px; margin:10px 25px
15px 5px;
|
margin: 10px;
Not: Her yönden 10 piksel kutu dışı boşluk verir)
margin:10px 25px 15px 5px;
Not: Sırasıyla üst, sağ, alt, sol taraflardan kutu dışı boşluk verir.)
4.2.3. Kenarlık (Border)
Kenarlık (Border), kutu kenarlarının genişlik, renk, doku, köşe yuvarlaklığı özelliklerini belirleyen CSS kodudur. Kenarlık, kutunun dış boşluğu ile iç boşluğu arasındaki sınır çizgilerinin oluşturduğu bölümdür. Beş farklı şekilde kullanılabilir (Tablo 4.9).
|
CSS Kodu |
Açıklama |
Kullanımı |
|
border |
Kenarlığın
sırasıyla width, style, color özelliklerini tek kod ile belirler. |
border: 3px solid
blue; |
|
border-width |
Kenarlığın
kalınlığını belirler. |
border-width: 3px; border-top-width:
0px; border-right-width:3px border-bottom-width:
0px; border-left-width:
3px; |
|
border-style |
Kenarlığın doku
tipini belirler. solid: Düz çizgi dotted: Noktalı double: Çift çizgi dashed: Kesik çizgi |
border-style:
solid; border-top-style:
dotted; border-right-style:
double border-bottom-style:
dashed; border-left-style:
solid; |
|
border-color |
Kenarlığın rengini
belirler. |
border-color: blue;
border-top-color:
red; border-right-color:
orange border-bottom-color:
white; border-left-color:
black; |
|
border-radius |
Kenarlığın köşe
yuvarlaklığını belirler. Kenarlığın köşeleri üst-sol, üst-sağ, alt-sağ,
alt-sol şeklinde ifade edilebilir. |
border-radius: 2px;
border-top-left-radius:
3px; border-top-right-radius:
4px; border-bottom-right-radius:
5px; border-bottom-left-radius:
6px; border-radius: 3px 4px
5px 6px; |
4.2.4. İç Boşluk (Padding)
İç boşluk (Padding), kutunun içerik ve kenarlık bölümleri arasındaki boşluğu belirleyen CSS kodudur. Kutu içi boşlukta denir. Beş farklı şekilde kullanılabilir (Tablo 4.10).
|
CSS Kodu |
Açıklama |
Kullanımı |
|
padding-top |
Üst taraftan kutu
içi boşluk verir. |
padding-top: 10px; |
|
padding-right |
Sağ taraftan kutu
içi boşluk verir. |
padding-right:
25px; |
|
padding-bottom |
Alt taraftan kutu
içi boşluk verir. |
padding-bottom:
15px; |
|
padding-left |
Sol taraftan kutu
içi boşluk verir. |
padding-left: 5px; |
|
padding |
Tüm yönlerden kutu
içi boşluk verir. |
padding: 10px; padding:10px 25px
15px 5px;
|
padding: 10px;
Not: Her yönden 10 piksel kutu dışı boşluk verir.)
padding:10px 25px 15px 5px;
Not:
Sırasıyla üst, sağ, alt, sol taraflardan kutu dışı boşluk verir.
4.2.5. İçerik (Content)
İçerik (Content), kutuda metinsel ifadelerin, resimlerin, videoların vb. görsel öğelerin gösterildiği bölümdür.
<b>Burası b etiketinin içeriğidir</b>
<div>
<b>Burası hem div etiketinin hem b etiketinin içeriğidir</b>
<img src="icerik.jpg">
<h1>Burası hem div etiketinin hem h1 etiketinin içeriğidir.</h1>
</div>
Hiç yorum yok