HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css yükseklik genişlik
css yükseklik ayarlama
css yükseklik ortalama
css yükseklik eşitleme
css genişlik ayarı
css genişlik yüzde
css otomatik genişlik
css height and width same
css height as width
css for height and width
css height by width
css height double width
css height and width values
css maximum width
css max width
css max width nedir
css max width or height
css max width style
css max width select
css3 max-width
css width kullanımı
css width max
css width options
css width style
css width types
css height auto
css height lines
css height line
css height options
css height style

CSS Height and Width(Yükseklik ve Genişlik)

CSS Height and Width(Yükseklik ve Genişlik)

Web sitesi elemanlarının sayfada kaplayacağı alanı yükseklik ve genişlik değerleri vererek belirleyebilirsiniz. Bu değerleri verirken yine uzunluk birimlerinden istediğinizi kullanabilirsiniz fakat genelde tercih edilen px(pixel) ölçü birimini kullanırız.Yalnız bu sektörde zaman geçtikçe web sitenizi görüntüleyecek olan kullanıcıların cihazları çok değişkenlik göstermeye başlayacak. Hatta sürekli olarak bilgisayar yerine, tablet ve akıllı telefonlar ön planda olucak. Bu nedenle sitenizi değişik ekranlara uyumlu bir şekilde hazırlamanız gerekecek. Bunun içinde responsive dediğimiz her ekrana uyumlu bir web sitesi hazırlama ihtiyacınız olacak. Bunu hazırlarken ise de yüzde (%) birimini kullanmak durumunda kalacaksınız. Aşağıdaki örnekteki farkı yinede anlamanız zor olacak. Siz şuanlık ne demek istediğimi anlamaya çalışın işe koyulunca farkı göreceksiniz.

1-Maximum Genişlik

Web sitenizin elemanlarına maksimum genişlik değeri verebilirsiniz. Bunun vermemizin nedeni geniş ekranlarda ilgili elemanımızın görüntüsü bozulmasın diyedir.

Css
div.mavi_kutu {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Html
<html>
<head>
</head>
<body>
<div class="mavi_kutu"></div>
</body>
</html>


Paylaş:

Enes KILIÇ
Webmaster