CSS Boyutlandırma ( width ve height Kullanımı )

Arkadaşlar bu yazımızda CSS de boyutlandırma işlemi nasıl yapılır ve hangi kodlar ile yapıldığını öğreneceğiz…

CSS de boyutlandırma yaparken iki ana parametremiz var diyebiliriz. Birincisi width ( genişlik ), ikincisi height ( yükseklik ).

CSS Boyutlandırma width ( Genişlik ) Özelliğinin Kullanımı


“width” HTML elementinin genişliğini belirlemede kullanırız. Bu özelliğin aldığı değerler ise auto, length, %, initial ve inherit tir.

Auto : Otomatik değer alır. Bir üstteki etiketin içini tamamen doldurur.
Length : Uzunluk değeri. Vermek istediğimiz değeri verebiliriz. örnek:800px gibi…
Yüzde(%): Yüzde değeri. Vermek istediğimiz değeri yüzde cinsinden veririz. Örnek %50 gibi…
initial: HTML elementi varsayılan biçimlendirme değerine döner.
inherit: HTML elementi üst elementinin biçimlendirme değerini alır.

Bunları şimdi örnekle anlatalım. Örnek Kod:

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
    div#ana{
		background-color:gray;
		width:1000px;
	}
	div#auto{
		background-color:yellow;
		width:auto;
	}
	div#length{
		background-color:red;
		width:800px;
	}
	div#yuzde{
		background-color:blue;
		width:50%;
	}

	div#initial{
		background-color:pink;
		width:initial;
	}
	div#inherit{
		background-color:green;
		width:inherit;
	}
</style>
</head>
<body>
   <div id="ana">	
	<div id="auto"> width:auto değerine örnek </div>
	<div id="length"> width:length değerine örnek </div>
	<div id="yuzde"> width:yuzde değerine örnek </div>
	<div id="initial"> width:initial değerine örnek </div>
	<div id="inherit"> width:inherit değerine örnek </div>
    </div>
</body>
</html>

Tarayıçıdaki Görünüşü:

css boyutlandırma width özelliğinin kullanımı

CSS Boyutlandırma max-width Özelliğinin Kullanımı

HTML elementinin maksimum genişliğini belirler. width ile max-width arasındaki fark ise width max-width e atadığımız değer maksimum genişlik değeri veririz.
Yani web sitemizin genişliğine maksimum bir değer atarız, web sitesi büyük cihazlarda açıldığında bile istenen genişlikte açılması sağlanmış olur. Küçük cihazlarda ise esnek yapı olduğu için cihazın genişliğine göre şekil alacaktır. Alacağı değerler none, length, %, initial ve inherit tir.

none : Değer yok. Yani bu değeri atadığımızda bir değer vermediğimiz için bir üstteki elementin genişliğini tam kaplar.
length : Atadığımız değer ne ise en yüksek o değerde tarayıcıda gözükür. Tarayıcı daraltıldığında o da daralır. Yani esnektir. Responsive yapılırda tercih edilir.
% (Yüzde) : Yüzde değeri.Atadığımız yüzde değeri ne ise en yüksek o değerde tarayıcıda gözükür. Tarayıcı daraltıldığında atadığımız yüzde değerini koruyarak daralır.
initial : HTML elementi varsayılan biçimlendirme değerine döner.
inherit : HTML elementi üst elementinin değerini alır. Yani miras alır.

Bunları şimdi örnekle anlatalım. Örnek Kod:

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
    div#ana{
		background-color:gray;
		max-width:1000px;
	}
	div#auto{
		background-color:yellow;
		max-width:none;
	}
	div#length{
		background-color:red;
		max-width:800px;
	}
	div#yuzde{
		background-color:blue;
		max-width:50%;
	}
	
	div#initial{
		background-color:pink;
		max-width:initial;
	}
	div#inherit{
		background-color:green;
		max-width:inherit;
	}
</style>
</head>
<body>
    <div id="ana">	
	<div id="auto"> max-width:none değerine örnek </div>
	<div id="length"> max-width:length değerine örnek </div>
	<div id="yuzde"> max-width:yuzde değerine örnek </div>
        <div id="initial"> max-width:initial değerine örnek </div>
	<div id="inherit"> max-width:inherit değerine örnek </div>
    </div>
</body>
</html>

Tarayıcıdaki Görünümü:

css boyutlandırma max-width özelliğinin kullanımı

CSS Boyutlandırma min-width Özelliğinin Kullanımı

HTML elementinin minimum genişliğini belirler. Bu özellikte amaçımız bir etikete minimum değer atamak için kullanılır. Tarayıcıyı daraltığımızda dahi atadığımız değer değişmez, scrollbar çıkar. Atadığımız değer minumum değerden daha küçülmemesi içindir. Değer atadığımız etiket bir üst etiketi tamamen kapsar. Daraltığımızda atadığımız değerin daha altına küçülmez, scrollbar çıkar.

Alacağı değerler none, length, %, initial ve inherit tir.
none : Değer yok. Yani bu değeri atadığımızda bir değer vermediğimiz için bir üstteki elementin genişliğini tam kaplar. min-width özelliğinde kullanılmayan özelliktir.
length : Tarayıcı ilk açıldığında bir üst elementi kapsar. Tarayıçı daraltığında atadığımız minumum değerden altına düşmez, scrollbar çıkar.
% : Yüzde değeri.Atadığımız yüzde değeri minumum sağlamak için olduğundan bir üst elemanı kapsayarak tarayıcıda açılır.
initial : HTML elementi varsayılan biçimlendirme değerine döner.
inherit : HTML elementi üst elementinin değerini alır. Yani miras alır.

Bunları şimdi örnekle anlatalım. Aşağıdaki kodları yazıp, tarayıcıyı daraltıp genişleterek daha anlaşılır olacaktır. Kalıcı bir öğrenme için örneklerin değerlerini değiştirerek kendinizin de denemesini tavsiye ederim. Örnek Kod:

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
    div#ana{
		background-color:gray;
		max-width:600px;
		min-width: 500px;
	}
	div#none{
		background-color:yellow;
		min-width:none;
	}

	div#yuzde{
		background-color:blue;
		min-width:50%;
	}
	
	div#initial{
		background-color:pink;
		min-width:initial;
	}
	div#inherit{
		background-color:green;
		min-width:inherit;
	}
	div#length{
		background-color:red;
		min-width:400px;
	}

  </style>
</head>
<body>
	<div id="ana">	
	<div id="none"> min-width:none değerine örnek </div>
	<div id="length"> min-width:length değerine örnek </div>
	<div id="yuzde"> min-width:yuzde değerine örnek </div>
	<div id="initial"> min-width:initial değerine örnek </div>
	<div id="inherit"> min-width:inherit değerine örnek </div>
  </div>
</body>
</html>

Tarayıcıdaki Görünümü:

css boyutlandırma min-width özelliğinin kullanımı

Görüldüğü gibi min-width e tarayıcının ilk açılışında bütün atadığımız değerlerde bir üst elementi kapsayarak açılış yaptı. Tarayıcıyı daraltıp genişleterek daha anlaşılır olacaktır. Değerleri de değiştirerek yeni örnekler türetmiş olursunuz.

CSS Boyutlandırma height Özelliğinin Kullanımı

Bu özellik istediğimiz elemanlara yükseklik ( height ) değeri atamak için kullanırız. Verebileceğimiz değerler auto, length, %(yüzde), initial ve inherit tir.

auto : Otomatik değer alır. Elemanın içerisinde metin veya bulunan ne ise onun yükseklik değerini alır.
length : Uzunluk değeri. Vermek istediğimiz değeri atarız. 200px gibi… Verdiğimiz değer üst elementin yükseklik değerinden fazla ise onun dışına taşar.
% : Yüzde değeri. Bu değeri atadığımızda da içerik kadar yükseklik ile tarayıcıda açılacaktır. %100 ile %50 dememiz arasında fark olmayacaktır. Bir üst eleman body olduğu için böyle olur. Eğer bir içine alıp o div e height değeri 100px verirsek içindeki elemanın yüzde değeri atadığımızda o değerin (100px in) yüzdesini alacaktır.
initial : HTML elementi varsayılan biçimlendirme değerine döner.
inherit : HTML elementi üst elementinin biçimlendirme değerini alır.

Bunları şimdi örnekle anlatalım. Örnek Kod:

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
	div{
		margin-bottom: 40px;
		width: 500px;
	}
    
	div#auto{
		background-color: aqua;
		height: auto;
	}
	div#length{
		background-color: burlywood;
		height: 50px;

	}
	div#yuzde{
		background-color:orange;
		height: 50%;
	}

	div#initial{
		background-color: pink;
		height: initial;
	}
	div#inherit{
		background-color: burlywood;
		height: inherit;
	}
	
</style>
</head>
<body>
 <div id="ana">	
   <div id="auto"> HTML <br>CSS <br>JS <br>ASP </div>
   <div id="length"> C# <br>JAVA <br> Python <br> Javascript </div>
   <div id="yuzde"> HTML <br>CSS <br>JS <br>ASP<br> Javascript </div>
   <div id="initial"> C# <br>JAVA <br> Python </div>
   <div style="height: 50px;">
     <div id="inherit"> HTML <br>CSS <br>JS <br>ASP </div>
   </div>
 </div>
</body>
</html>

Tarayıcıdaki Görünümü:

css height özelliğinin kullanımı

CSS Boyutlandırma max-height Özelliğinin Kullanımı

HTML elementinin maksimum yüksekliğini belirler. Alabileceği değerler none, length, % (yüzde), initial ve inherit tir.

none : Bu değeri atadığımızda içerik yüksekliği kadar yükseklik oluşur.
length : Uzunluk değeri. Atadığımız değer kadar yükseklik oluşur ama içerik dışa taşar. İstersek taşan kısımlar gizlenebilir.
% : Yüzde değeri. Bu değeri atadığımızda eğer body üst elemanımız ise içerik kadar yükseklik oluşur. Eğer elemanı bir div içine alırsak o div in yüksekliğinin yüzde değeri kadar yüksek oluşur. Yükseklik yeterli değilse içerik taşar
initial : HTML elementi varsayılan biçimlendirme değerine döner.
inherit : HTML elementi üst elementinin biçimlendirme değerini alır.

Bunları şimdi örnekle anlatalım. Örnek Kod:

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
	div{
	width: 500px;
	}

	div#none{
		background-color: aqua;
		max-height: none;
	}
	div#length{
		background-color: yellow;
		max-height: 30px;
	}
	div#yuzde{
		background-color:orange;
		max-height: 50%;
	}

	div#initial{
		background-color: pink;
		max-height: initial;
	}
	div#inherit{
		background-color: greenyellow;
		max-height: inherit;
	}
	
</style>
</head>
<body>
<div id="ana">	
  <div id="none"> HTML <br>CSS </div>
  <div id="length"> C# <br>JAVA  </div>
  <div style="height: 50px;">
      <div id="yuzde"> HTML <br>CSS  </div>
   </div>
   <div id="initial"> C# <br>JAVA </div>
   <div style="max-height: 20px;">
      <div id="inherit"> HTML <br>CSS </div>
   </div>
</div>
</body>
</html>

Tarayıcıdaki Görünümü:

css max-height kullanımı

CSS Boyutlandırma min-height Özelliğinin Kullanımı

HTML elementinin minimum yüksekliğini belirler. Alabileceği değerler none, length, % (yüzde), initial ve inherit tir.

none : Bu değeri atadığımızda içerik yüksekliği kadar yükseklik oluşur.
length : Uzunluk değeri. Atadığımız değer minimum değeridir. İçerik atağımızdan değerden fazla ise yükseklik içeriğin yüksekliği kadar oluşur.
% : Yüzde değeri. Atadığımız yüzde değeri minimum değeridir. İçerik atağımızdan değerden fazla ise yükseklik içeriğin yüksekliği kadar oluşur.
initial : HTML elementi varsayılan biçimlendirme değerine döner.
inherit : HTML elementi üst elementinin biçimlendirme değerini alır.

Bunları şimdi örnekle anlatalım. Örnek Kod:

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
	div{
	width: 500px;
	}

	div#none{
		background-color: aqua;
		min-height: none;
	}
	div#length{
		background-color: yellow;
		min-height: 30px;

	}
	div#yuzde{
		background-color:orange;
		min-height: 50%;
	}

	div#initial{
		background-color: pink;
		min-height: initial;
	}
	div#inherit{
		background-color: greenyellow;
		min-height: inherit;
	}
</style>
</head>
<body>
  <div id="ana">	
     <div id="none"> HTML <br>CSS </div>
     <div id="length"> C# <br>JAVA  </div>
     <div style="height: 60px;">
        <div id="yuzde"> HTML <br>CSS  </div>
     </div>
     <div id="initial"> C# <br>JAVA </div>
     <div style="max-height: 20px;">
	<div id="inherit"> HTML <br>CSS </div>
     </div>
   </div>
</body>
</html>

Tarayıcıdaki Görünümü:

css min-height kullanımı

Örnek olarak width, max-width, min-width, height, max-height ve min-height özelliklerinin birlikte kullanımı bir arada verelim. Örnek Kod:


<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
 div#ornek{
   background-color:rgb(184, 175, 175);
   min-width:300px;
   max-width:800px;
   height: auto;
 }
 div#resimAlani{
   max-width: 500px;
   height: auto;
 }
 img{
   width: 100%;
   height: auto;
 }
</style>
</head>
<body>
  <div id="ornek">HTML <br>CSS <br>JavaScript  <br> </div>
  <div id="resimAlani">
     <img src="logo.png" alt="">
  </div>
</body>
</html>

Tarayıcıdaki Görünümü:

width max-width min-width height max-height min-height kullanımı

CSS Boyutlandırmada calc () Fonksiyonunun Kullanımı

calc() fonksiyonu değer heseplama işlemleri için kullanılır. Kullanılan değerler + (toplama), – (çıkarma), * (çarpma) ve / (bölme) işlemleridir.

calc fonksiyonu kullanmaktaki amacımız bir satırdaki yanyana yerleştirme yaptığımız menu vb. şeylerde tarayıcının büyüklüğüne göre uygun şekilde açılmasını sağlamak için kendisinin hesaplamasıdır. Bu şekilde responsive tasarımlar yapmış oluruz.

Bunları şimdi örnekle anlatalım. Örnek Kod:

<!doctype html>
<html lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>

	div#ornek1{
		background-color:lightblue;
		width:-webkit-calc(50% + 250px);
		width:-moz-calc(50% +  250px);
		width:-o-calc(50% +  250px);
		width:-ms-calc(50% +  250px);
		width:calc(50% +  250px);
		height:100px;
	}
	div#ornek2{
		background-color:lightgray;
		width:-webkit-calc(50% - 250px);
		width:-moz-calc(50% - 250px);
		width:-o-calc(50% - 250px);
		width:-ms-calc(50% - 250px);
		width:calc(50% - 250px);
		height:100px;
		margin-top: 20px;
	}
	div#ornek3{
		margin-top: 20px;
	}
	div#logoAlani{
		background-color:lightgrey;
		width:180px;
		height:100px;
		float:left;
	}
	div#menuAlani{
		background-color:lightseagreen;
		width:-webkit-calc(100% - 500px);
		width:-moz-calc(100% - 500px);
		width:-o-calc(100% - 500px);
		width:-ms-calc(100% - 500px);
		width:calc(100% - 500px);
		height:100px;
		float:left;
	}
	div#aramaAlani{
		background-color:lightslategray;
		width:220px;
		height:100px;
		float:left;
     }
</style>
</head>
<body>
  <div id="ornek1"> Örnek1  </div>
  <div id="ornek2"> Örnek2  </div>
  <div id="ornek3">
	<div id="logoAlani">Logo</div>
	<div id="menuAlani">Menü Alanı</div>
	<div id="aramaAlani">Arama Alanı</div>
	
  </div>
</body>
</html>

Tarayıcıdaki Görünümü:

css calc() fonksiyonu kullanımı

calc() fonksiyonu kullanımındaki örneğimizde webkit, moz gibi bu ekler önemlidir. Prefix ön ekleri yazımızdan ayrıntılı bilgi alabilirsiniz.

Başka bir yazımızda görüşmek dileğiyle…

Leave a Reply