Selamlar,

CSS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde CSS’de Yükseklik ve Genişlik Değerleri ni nasıl kullanacağımızı, html elemenlerimize nasıl yükseklik ve genişlik vereceğimizi öğreneceğiz. Daha önce ki css derslerime göz atarak eksikleriniz var ise tamamlayabilirsiniz.

[mks_icon icon=”fa-folder-open” color=”#1e73be” type=”fa”] Diğer CSS Dersleri:

CSS’de Yükseklik ve Genişlik Değerleri

CSS’de Yükseklik ve Genişlik Değerleri, iki tane parametre ile verilmektedir. Bunlar ingilizce kelimeler olan width (genişlik) ve height (yükseklik) dir. HTML elementlerinin yüksekliğini ve genişliğini bu iki css parametresini ya da bir başka değiş ile css özelliğini kullanarak html elementlerimize şekiller,biçimler verebiliriz.

HTML elementine vereceğimiz genişlik ve yükseklik değerlerini verirken css’sin uzunluk birimlerini kullanırız. Bunlar px (pixel) ya da % (yüzde) olmak üzere iki çeşidi vardır. Veya tarayıcının genişlik ve yükseklikleri otomatik olarak hesaplamasını istersek auto değerini kullanabiliriz.Auto özelliği gerçek projelerde genelde yükseklik için kullanılır. Genişlik için ise manuel olarak değerler atanır.

[alert style=”dark”][label style=”darkred”]Not:[/label] Width (genişlik) ve Height (yükseklik) özellikleri block düzeyindeki html elementlerine uygulanabilir.Satır düzeyindeki elementlere genişlik veya yükseklik değerleri alamazlar.[/alert]

[alert style=”dark”][label style=”darkred”]Not 2:[/label] Elementlere verilen genişlik ve yükseklik değerleri elementlerin padding (iç boşluk), margin (dış boşluk) ve border (kenarlıklar) değerlerini içermez. Yani daha önce css derslerimizde anlattığım Margin Kullanımı, Padding Kullanımı ve Borders (Kenarlıklar) derslerinde bununla ilgili detaylı bilgiler vermiştim, unutuysanız eğer tekrar ders yazılarımı okumanızda fayda var.[/alert]

[syntax type=”css”]

div {
width: 200px;
height: 200px;
border: 4px solid red;
}

[/syntax]

Yukarıda örnekte div elementinee genişlik değeri olarak 200px değeri verilmiştir fakat her div elementinin iki yanına 4px değerinde kenarlık geldiği için bu elementimizin sayfada kapladığı alan genişlik olarak 208px ölçüsünde olacaktır. Yani kenarlık değeri, genişlik değerini eklenmektedir. Yine aynı şekilde div elementine 100px değerinde yükseklik  verilmiş üst ve alt tarafında 4px değerinde kenarlık olduğu için sayfada kapladığı alan yükseklik olarak 108px olacaktır. Bundan dolayı genişlik ve yükseklik değerleri verdiğiniz elementlerde eğer margin, padding ve borders css özelikllerini kullanıyorsanız bu özellikleri verdiğiniz değer kadar yükseklik ve genişlik değerlerinizi düşürmeniz gerekiyor.

Anlamadıysanız eğer şöyle açıklayayım, bir html elementine siz 400px değerinde bir genişlik atadınız ve istediğiniz genişliği geldi, ekstra olarak bu elemente birde kenarlık vermek istiyorsunuz ve kenarlık değerinede 5px değerini atadınız. Toplamda elementin genişlik değeri 410px olacaktır. Ama siz 400px yerine 390px değerini girmiş olsaydınız hem kenarlık vermiş hemde istediğiniz genişlik olan 400px genişliğini elde etmiş olacaktınız. Umarım net anlaşılmıştır, daha da anlamadıysanız hiç başlamayın bu işe 🙂

Bu konu netleştiyse diğer özellikleri anlatmaya devam edeyim…

Max-width Özelliği

Bir html elementin alabileceği maksimum genişlik değerini ifade etmek için max-width özelliği kullanılır.

Max-Width Neden Kullanılır?

Eğer elementin genişliği tarayıcı penceresinden büyük ise ekranın altında scrollbar(kaydırma çubuğu) çıkar ve elementi tam görebilmek için o çubuğu kaydırmanız gerekir.Özellikle ekranının çok küçük, elementin genişliğinin çok büyük olduğu durumlarda bu kaydırma sıkıntı oluşturur.
Bu gibi durumlarda o elemente alabileceği en yüksek genişlik değeri verilerek ekran genişliğine göre ayarlanmasını sağlayabiliriz.

[syntax type=”css”]

div {
width: 2000px;
height: 100px;
max-width: 100%;
background: blue;
}

[/syntax]

Örnekte elementimizin genişliği 2000px, bu değer bir çok ekran için geniştir ve kaydırma çubuğu çıkarır.Ama biz max-width genişliğine 100% değeri verdiğimizde, bu element ekrana tam sığacaktır.

[alert style=”dark”][label style=”darkred”]Not 3:[/label] Max-height özelliği elementin alabileceği maksimum değeri vermek için kullanılır.Fakat max-height özelliğinin kullanılabilmesi için o elemente height (yükseklik) değeri verilmesi gerekir.[/alert]

[alert style=”dark”][label style=”darkred”]Ekstra Not:[/label] Min-width özelliği elementin alabileceği en küçük genişlik değerini vermek için kullanılır.Aynı şekilde min-height özelliği de alabileceği en küçük yükseklik değeri belirtmek için kullanılır.[/alert]

CSS de genişlik ve yükseklik kavramları hakkında içerik oluşturduğumuz bu dersim de CSS’in width ve height özelliklerinin ne işe yaradığı ve nasıl kullanıldığını anlattım.Ayrıca responsive (uyumlu ya da mobil uyumlu) tasarımlarda sıkça karşımıza çıkan max-width, min-width, max-height, min-height özelliklerinin de ne için ve nasıl kullanıldığını anlattım. Bir sonra ki css ders yazımda görüşmek dileği ile hoşcakalın.

Bir önceki yazım olan CSS Dersleri 7: Padding Kullanımı başlıklı yazımda CSS, CSS Padding ve CSS'de Padding Kullanımı hakkında bilgiler verilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir