Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

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.

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • Sık Kullanılan CSS Ölçü Birimleri

    Sık Kullanılan CSS Ölçü Birimleri

    Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS'de ki "px" değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren…
  • CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    Selamlar, Daha önce ki CSS ders yazımda CSS'in text özelliğini, yazı özelliğini anlatmıştım. Önceki dersimizde yazılara biçim vermiştik, işte üstü çizili,altı çizili gibi bir takım text özellikleri anlatmıştım. Bu yazımda ise CSS'de Font Özellikleri ve Kullanımı anlatacağım. Daha önce ki css derslerim için buraya tıklayınız. CSS, font özellikleri metinlerin yazı tipi,kalınlık,boyut gibi…
  • CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    Selamlar, Daha önce ki CSS yazımda sizlere width ve height değerlerinin kullanımını göstermiştim. Bu yazımda ise CSS'de Text (Metin) Özellikleri konusunu anlatacağım. Yazı olmadan bir website olmaz arkadaşlar, yazılar websitelerin yapı taşlarından bir tanesi ama önemli olan bir yapı taşıdır. Bu yüzden websitelerimizi hazırlerken dikkat etmemiz gereken husus text (metin)'lerdir.…
  • CSS Dersleri 7: Padding Kullanımı

    CSS Dersleri 7: Padding Kullanımı

    Selamlar, Daha önce ki CSS dersimde sizlere CSS'in Margin Özelliğini anlatmıştım, bu yazımda ise sizlere yine margin özelliğinin farklı bir şekli olan CSS'de Padding Kullanımı nı göstereceğim. Daha önce ki css ile ilgili ders yazılarıma aşağıda ki bağlantılar ile ulaşabilirsiniz. CSS Dersleri 1: CSS Nedir ? CSS Dersleri 2: Söz…
CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height) için Yorum'da Bulun

Bir Cevap Yaz

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

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.