Embedded Files
CSS ve HTML Dersleri | Dreamweaver Kurulumu | CSS Programlama Dersleri
Geçen dersimizde "<div>" etiketinin bazı özelliklerini öğrenmiştik. Şimdi ise "margin", "padding"ve "position" özelliklerini öğreneceğiz.
style="margin: 50px" etiketinde "margin" özelliği kutucuğun konumlandırılması için kullanılır ve tek bir değer girildiği için her tarafına bu değer uygulanır..
"margin" özelliğinde style="margin: 50px 10px 40px 20px" özelliğinde kutucuğun en üst tarafından saat yönünde değerler sırasıyla girilir.
"padding" özelliği kutucuğun içindeki cisimlerin konumlandırılması için kullanılır ve bu özellik kullanıldığında kutucuğun boyut ayarlamasında değişiklik yapamanız gerekir.
"position" özelliği kutucuğun ekranda konumlandırma yapmasında yardımcı olur. "position:fixed" yaparsak ekranda her türlü aynı yerde kalır, sayfada gezinilirken.
"position:static" özelliği ise normal kutucuk özelliğidir. "relative" özelliğini ise aşağıda inceleyebilirsiniz. Bu özellikle başka bir kutucuğa göre konumlandırmada kullanılır.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:300px; height:170px; background: #660099; border:5px dashed #000000; color: #FFFFFF; font:bold 20px verdana; text-align:center; padding:130px 0 0 0; position:fixed; " > kutu4</div>
<div style=" width:300px ; height:170px ; background:#FF3300; border:5px dashed #000000 ; color: #FFFFFF ; font:bold 20px verdana; text-align:center; margin: 50px auto ; padding:130px 0 0 0; position:static " > kutu1</div>
<div style=" width:300px ; height:170px ; background:#FF3300; border:5px dashed #000000 ; color: #FFFFFF ; font:bold 20px verdana; text-align:center; margin:50px ; padding:130px 0 0 0; position:relative " > kutu2</div>
<div style=" width:300px ; height:170px ; background:#FF3300; border:5px dashed #000000 ; color: #FFFFFF ; font:bold 20px verdana; text-align:center; margin:50px ; padding:130px 0 0 0; position:absolute " > kutu3</div>
<div style=" width:300px ; height:170px ; background:#FF3300; border:5px dashed #000000 ; color: #FFFFFF ; font:bold 20px verdana; text-align:center; margin:50px ; padding:130px 0 0 0; position:static " > kutu5</div>
<div style=" width:300px ; height:170px ; background:#FF3300; border:5px dashed #000000 ; color: #FFFFFF ; font:bold 20px verdana; text-align:center; margin:50px ; padding:130px 0 0 0; position:static " > kutu6</div>
</body>
</html>
Page updated
Google Sites
Report abuse