height: yükseklik değerlerini ayarlamak için kullanılır.
width: genişlik değerlerini ayarlamak için kullanılır.
min-height: yükseklik için olabilecek minimum değerleri ayarlamak için kullanılır.
max-height: yükseklik için olabilecek maksimum değerleri ayarlamak için kullanılır
min-width: genişlik için olabilecek minimum değerleri ayarlamak için kullanılır
max-width: genişlik için olabilecek maksimum değerleri ayarlamak için kullanılır.
Bu özelliklerin ne olduğunu kısaca açıkladıktan sonra isterseniz örnek html dosyası üzerinden konuyu anlatmaya çalışalım. HTML dosyamız aşağıdaki gibidir. Değişikliklerimizi buradaki header-area id’ne sahip alanda yapacağız. Genişlik ve yükseklikle ilgili değişikliklerin görünebilmesi için header-area alanına bir kenarlık ekledim.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#header-area{
border:2px solid coral;
}
</style>
</head>
<body>
<div id="header-area">
<h1>
Information Universe Of Alizade ZADE
</h1>
</div>
</body>
</html>
Bu değişikliği uyguladıktan sonra çerçevenin aşağıya doğru büyüdüğünü göreceksiniz. Height özelliği yukarıdaki kısa açıklamada da anlatıldığı gibi hangi etikette, classda veya idye bağlanmışsa o değerin verilen ölçülerde olmasını sağlar. Yükseklik ayarlamaları için genelde ölçü değeri olarak piksel, yüzde ölçü birimleri kullanılır. Yüzde ölçü birimi sayfanın mevcut genişliğini baz alarak bir yükseklik değeri atadığı için bu değeri kullanırken çok dikkatli olmalısınız. Bizim örneğimizde sayfa yüksekliğim sadece h1 etiketi ile sınırlı olduğu için height:100% gibi veya daha küçük bir değer kullanımında sayfamızda eski haline göre bir değişiklik olmayacaktı. Yüzde kullanımı yükseklik ayarlarında genelde sayfayı birkaç parçaya böldüyseniz kullanışlı olabilir. Örneğin birkaç kolan varsa bu kolonları bir-birine eşitlemek için kullanabilirsiniz.
Height özelliğini açıkladıktan sonra isterseniz width özelliğine geçelim. Bu özellik bir etiketin, veya bir kod bloğunun, sayfanın belirli bir bölümün genişliğini ayarlamak için kullanılır. Örnek olması açısından bizim örneğimizde genişliği de 30% yapalım. Bunun için style etiketi altındaki #header-area alanının aşağıdaki gibi değiştirin.
#header-area{
border:2px solid coral;
height:300px;
width:30%;
}
Bu değişiklikleri test ederseniz genişliğin sayfanın yaklaşık üçte birine kadar azaldığını görecekseniz. Ayrıca kullandığınız tarayıcının da küçültüp büyütürseniz bununla birlikte header-area alanının da büyüyüp küçüldüğünü göreceksiniz. Bunun nedeni ise genişliği yüzde ile ayarlamamız. Yükseklik ayarlamalarında genelde piksel ölçü birimi kullanılsa da sayfanızı kullanacak olan kişilerin farklı ekran büyüklerine sahip olduğu hesaba katarak genişlik ayarlamalarının yüzde kullanarak yapmanızı öneririm. CSS konusunda ileriye gidib media-query’ler yazmaya başladığınızda bile özellikle genişlik ayarlamaları için mutlaka yüzde ölçü birimini kullanın. Popüler kütüphanelerden bootsrap ve foundation da var olan grid mantığında da bakarsanız burada da genişlik ayarlamaları için yüzde kullanıldığını görebilirsiniz. Bu kütüphanelerdeki genişlik ayarlamalarını başka bir makalede detaylı ele alacağım. Oradan konuyu detaylı öğrenebilirsiniz.
Yükseklik ve genişlik ayarlarından sonra çok kullanacağınız yöntemler bu özelliklerin maximum ve minimum ile birlikte kullanımlarıdır. Örnek olabilmesi açısından ve makaleyi çok büyütmeden kısaca açıklayabilmek için burada max-width özelliğini anlatacağım. Diğer özelliklerin kullanımı da bunlara çok benzer olduğu için gerektiği durumlarda buradaki örneklere göre kodlarınızı düzenleyebilirsiniz. Max-width özelliğini kullanabilmek için style etiketi altındaki #header area alanına aşağıdaki kod bloğunu ekleyin.
#header-area{
border:2px solid coral;
height:300px;
width:30%;
max-width:20%;
}
Örnek koda tarayıcınızda bakarsanız yukarıda verdiğiniz genişlik ayarını yok sayarak genişliği azalttığını göreceksiniz. 20% yerine 30% daha büyük bir değer verseydiniz bu sefer max-width özelliğini yoksayacaktı. Görüldüğü gibi max özelliğinin eklenmesi bu genişilik için olabilecek maximum değer anlamına geliyor. Bu arada şunu da söylemeliyim ki eğer min-width değer ekleyip bunu 20% daha fazla bir değer verirseniz tarayıcının min-width değerini dikkate alacaktır. Bunu test etmek için CSS kod kısmını aşağıdaki ile değiştirebilirsiniz.
#header-area{
border:2px solid coral;
height:300px;
min-width:30%;
max-width:20%;
}
Görüldüğü gibi CSS ile genişlik ve yükseklik ayarlamaları çok basit işlemler. Çok basit kullanım için bile height ve width özelliklerini kullanmak yeterlidir. Zamanla CSS konusunda daha da uzmanlaştıkça bu özelliklerin doğru kullanılmasının ne kadar önemli olduğunu anlayacaksınız. Bu anlatımın CSS’de yükseklik ve genişlik ayarlamalarının nasıl yapıldığı öğrenmeniz için yeterli olduğunu düşünüyorum
Sorularınız olursa lütfen sormaktan çekinmeyin. En kısa sürede yanıtlamaya çalışacağım.
Yorumlar
Yorum Gönder