CSS height Örnek

Kasım 30, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css height özelliği ve örnek uygulama</title> <style type="text/css"> img.normal { height: auto; } img.dahayuksek { height: 180px; } p.yukseklik { height: 150px; width: 150px; } div{ height:100px; background-color:yellow; } </style> </head> <body> <img class="normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNeZwh2jUmpU-vpd9YLTvYheAQIfv8mg2NZ2XTkAjPfRrMyfCAqJJBSttyN1VB-fG7QtN_NBByfGiK3S3MuGwRzvcnR3H-yhn9UjkB9Iy6k5QA4gMu4wxuYujarbHc3E3l72XbCBUVmA/s1600/eren.png" width="100" height="100"> <br> <p>ilk resimde height:auto; tanımladığımız için kod bölümünde yazdığımız yüksekliklerle geldi fakat aşağıdaki aynı resme height:180px; değeri verdiğimizde sonuç aşağıdaki gibi olmaktadır.</p> <img class="dahayuksek" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNeZwh2jUmpU-vpd9YLTvYheAQIfv8mg2NZ2XTkAjPfRrMyfCAqJJBSttyN1VB-fG7QtN_NBByfGiK3S3MuGwRzvcnR3H-yhn9UjkB9Iy6k5QA4gMu4wxuYujarbHc3E3l72XbCBUVmA/s1600/eren.png" width="100" height="100"> <p class="yukseklik">Genişliği ve yüksekliği 150px olan bir paragraf yazdık..</p> <p> Bu hiç bir class atamadığımız normal bir paragraftır.</p> <div>Bu div elemanına height:100px; olarak girdik.</div> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>css height özelliği ve örnek uygulama</title>
  <style type="text/css">
    img.normal {
        height: auto;
    }
    
    img.dahayuksek {
        height: 180px;
    }
    
    p.yukseklik {
        height: 150px;
        width: 150px;
     }
     
     div{
     height:100px;
     background-color:yellow;
     
     }
  </style>
</head>

<body>
  <img class="normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNeZwh2jUmpU-vpd9YLTvYheAQIfv8mg2NZ2XTkAjPfRrMyfCAqJJBSttyN1VB-fG7QtN_NBByfGiK3S3MuGwRzvcnR3H-yhn9UjkB9Iy6k5QA4gMu4wxuYujarbHc3E3l72XbCBUVmA/s1600/eren.png" width="100" height="100">
  <br>
  <p>ilk resimde height:auto; tanımladığımız için kod bölümünde yazdığımız yüksekliklerle geldi fakat aşağıdaki aynı resme height:180px; değeri verdiğimizde sonuç aşağıdaki gibi olmaktadır.</p>
  <img class="dahayuksek" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNeZwh2jUmpU-vpd9YLTvYheAQIfv8mg2NZ2XTkAjPfRrMyfCAqJJBSttyN1VB-fG7QtN_NBByfGiK3S3MuGwRzvcnR3H-yhn9UjkB9Iy6k5QA4gMu4wxuYujarbHc3E3l72XbCBUVmA/s1600/eren.png" width="100" height="100">

<p class="yukseklik">Genişliği ve yüksekliği 150px olan bir paragraf yazdık..</p>
  <p> Bu hiç bir class atamadığımız normal bir paragraftır.</p>
  <div>Bu div elemanına height:100px; olarak girdik.</div>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS height Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Javascript ile neler yapılabilir

html nedir

Html belgesi yapısını anlama uygulaması

Javascript Oyun Yapma Dersleri HTML5+CSS3

Uyurken Bile Para Kazanmak İster misin

CSS align-self Uygulama

Javascript kodları nereye yazılır

HTML5 ile SEO Uyumlu İçerik Üret

Web Sitenizden Çok Para Kazanin

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır