CSS Boyut Özellikleri Nelerdir ve Nasıl Uygulanırlar?
CSS boyut özellikleri elemanların genişlik ve yükseklik değerleri ile ilgili ayarlar yapmamızı sağlar.
Genişlik (width)
Yapısı: width: <deger>
Aldığı Değerler: <uzunluk degeri> | <yüzde> | auto | inherit
Başlangıç Değeri: auto
Uygulanabilen elemanlar: Blok seviyeli ve yerleştirilen elemanlar
Kalıtsallık: Yok
Blok seviyeli ve yerleştirilen elemanların tümü bir genişlik (width) değeri alır. Elemanların başlangıçtaki genişlik değeri auto yani kendi asıl genişliğidir. Yüzde değeri ebeveyn elemanı kıstas alarak uygulanır. Negatif değeri almaz.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
p.diger
{
width: 200px;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
</body>
</html>
Yükseklik (height )
Yapısı: height: <deger>
Aldığı Değerler: <uzunluk degeri> | auto | inherit
Başlangıç Değeri: auto
Uygulanabilen elemanlar: Blok seviyeli ve yerleştirilen elemanlar
Kalıtsallık: Yok
Blok seviyeli ve yerleştirilen elemanların tümü bir yükseklik (height) değeri alır. Elemanların başlangıçtaki yükseklik değeri auto yani kendi asıl yüksekliğidir. Negatif değeri almaz.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
h2
{
height: 15px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
</body>
</html>
Bir kapsayıcı kutunun genişlik değerini azami ve asgari değerleri ile sınırlandırabiliriz. Bu özellikler CSS2 ile birlikte gelmiştir.
Asgari Genişlik ve Yükseklikler (min-width, min-height)
Yapısı: min-width, min-height: <deger>
Aldığı Değerler: <uzunluk degeri> | <yüzde> | inherit
Başlangıç Değeri: 0
Uygulanabilen elemanlar: Yerleştirilmeyen satır içi elemanlar ve tablo elemanlara
Kalıtsallık: Yok
min-width, min-height kapsayıcı kutunun asgari alacağı değerleri belirtmek için kullanırız.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
p.diger
{
min-height:150px;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
</body>
</html>
Aynı şekilde max-width ve max-height tanımlamaları da yapılır.
Azami Genişlik ve Yükseklik (max-width, max-height)
Yapısı: max-width, max-height: <deger>
Aldığı Değerler: <uzunluk degeri> | <yüzde> | none | inherit
Başlangıç Değeri: 0
Uygulanabilen elemanlar: Yerleştirilmeyen satır içi elemanlar ve tablo elemanlara
Kalıtsallık: Yok
max-width, max-height kapsayıcı kutunun azami alacağı değerleri belirtmek için kullanırız.
<!DOCTYPE html>71
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
p.diger
{
max-width: 250px;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
</body>
</html>
CSS boyut özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
