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 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 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 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ü:
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 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 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 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ü:
Ö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ü:
CSS 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ü:
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…
