Div Nedir? Div Kullanımı ve Div Stili

Div, HTML dilinde web sayfasını bölümlere ayırmak ve bu bölümlere CSS ile stil değerleri vermemizi sağlayan bir HTML etiketidir. Modern tasarımlarda web sayfalarının en ayrılmaz etiketlerinden olan ve HTML5 ile de kullanılmaya devam edilen Div etiketi yardımıyla sayfanın tümünde değişiklik yapmak yerine sayfayı bölümlere ayırabilir ve bu bölümlere özel stil değerleri tanımlayabiliriz. Bu sayede tam olarak istediğimiz gibi hizalı ve stil ögelerini içerisinde barındıran HTML sayfaları tasarlayabiliriz. Div etiketi günümüzde kullandığımız tüm internet tarayıcıları tarafından desteklenmektedir.



Div Kullanımı
Div etiketini yalnızca kendi başına kullanmamız HTML sayfalarında bize herhangi bir avantaj sunmaz. Örneğin bir HTML sayfa oluştururken yalnızca <div>içerik</div> şeklinde kullanılması modern bir sayfa oluştururken işimize yaramayacaktır. Bunun yerine Div'e ekleyeceğimiz diğer HTML etiketleriyle, Div'i şekillendirebilir ve tam olarak istediğimiz şekillendirmeleri sağlayabiliriz.

Yukarıdaki örnekte içeriği <div> etiketiyle ayırdık ancak div etiketine herhangi CSS stil ögesi eklemediğimiz ve div'e ekstradan HTML etiketleri eklemediğimiz için div çok daha kullanışsız bir hal aldı. Bunun yerine farklı bir örnek daha verelim ve Div'e ekstradan bir HTML değeri daha tanımlayalım;

<div class="dis-div">
Bu bir div etiketidir
<div class="ic-div">
Bu ise div etiketinin içindeki bir div etiketidir.
</div>
</div>

Genişletmek için tıkla ...

Yukarıdaki gibi kullanımda ise Div'e daha çok şekil verebilir ve pratik olarak web sayfaları istediğimiz biçime getirebiliriz. Div'in en yaygın kullanım alanlarından biri de div style'dır. Div style için bir sonraki başlığa bakın.

Div Style
Div Style, oluşturulan Div'e bir still öğesi tanımlayabildiğimiz div şeklidir. Örneğin bir web siteninin içerisindeki içeriğin belli bir kısmını mavi yapmak istiyoruz. Fakat bu içerik içerisinde farklı HTML kodları da kullanılıyor. Bu durumda Div Style'ı kullanarak kolayca ayırdığımız parçanın tümünde etkili olacak HTML kuralları koyabiliriz;

<div style="color:#0000FF">
<h3>Bu Bir Başlıktır</h3>
<p>Bu bir paragraftır.</p>
</div>

Genişletmek için tıkla ...

Div'e bu sefer bir stil özelliği olarak renk atadık ve böylece Div içerisinde yer alan HTML kurallarıyla birlikte tümünde etkili olacak bir kural daha atamış olduk. Div style'ı yalnızca renk kodlarıyla değil, diğer genel HTML kurallarıyla birlikte de kullanabilirsiniz.

''Alıntıdır''