bugün size sublime text programını tanıtacağım ve biraz da div tagından bahsedeceğim.
sublime text paralı bir program olmasına rağmen ücretsiz sürümü işinizi görebilen bir programdır.
kod yazarken otomatik doldurma seçenekleri gösterir, hatalı kısımlarda uyarı niteliğinde renkler görürsünüz. bu açılardan faydalıdır.
div tagı html dilinde kutuyu temsil eder.
<div></div> yazdığınız yerde içi boş, yüksekliği sıfır, genişliği sayfa genişliğinde olan bir kutu. bu kutuyu css dili ile biz şekillendririz.
ama önce kutumuza bir isim verelim:
<div id="kutu"></div>
şimdi şablonumuza dönelim. en üst kısımda <style></style> tagları bizim şekilleri yazdığımz kısımdır.
bu kısma
#kutu {} yazalım. #kutu'nun anlamı id="kutu" olan div demektir. buraya yazdığımız herşey id="kutu" yu etkiler. öncelikle kutumuza yükseklik ve genişlik değerleri verelim.
#kutu {
width:100px;
height:100px;
}
px piksel demektir. bunun yerine cm, mm, %, em, vw ,vh kullanabilirsiniz. hepsi uzunluk ölçüsüdür. kutumuz şimdi 100px * 100px boyutunda. fakat görünmüyor. bunun için kenar eklemeliyiz:
#kutu {
width:100px;
height:100px;
border:2px solid black;
}
gördüğünüz gibi ifadeler hep ingilizce. border, kenar demek. 2px, kalınlığı;
solid, çizginin şeklini; black, rengini ifade eder. istediğiniz gibi değiştirebilirsiniz.
eğer herşeyi doğru yazdıysanız kutuyu görebilirsiniz artık.
kutumuzu renklendirelim:
#kutu {
width:100px;
height:100px;
border:2px solid black;
background-color:pink;
}
bu şekilde kutunuza istedğiniz şekli verebilirsiniz. başka neleri belrleyebileceğinizi google'a "css referance" yazıp bulabilirsiniz.
