CSS width Örnek

Aralık 03, 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 width özelliği ve örnek uygulama</title> <style> img.normal { height: auto; } img.kucuk { height: 30px; width:30px; } p.p1 { height: 100px; width: 100px; background-color:pink; } </style> </head> <body> <p>Aşağıdaki smiley resmini önce normal halini gösterelim daha sonra da css'te width ve height değerini değiştirerek boyutlarını küçültüyoruz..</p> <img class="normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCeVyCw9cVBBU4fei4BiyxRBg2P7Q7lfRR3pb8DGBsoIZe6ZY_mLkVDCJyZGW3_R8DQJdwnrtshGnWUlfvyUSlk7K6irZo5apueYpbybOxkvCk3gmDQ_TIKU9jt9AqzATaofF57zScRQ/s1600/css-background-ozelligi.jpg" width="100" height="100"><br> <p>Aşağıdaki ise class ismi "kucuk" aynı resmin boyutlarını değiştirdiğimizdeki hali..</p> <img class="kucuk" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCeVyCw9cVBBU4fei4BiyxRBg2P7Q7lfRR3pb8DGBsoIZe6ZY_mLkVDCJyZGW3_R8DQJdwnrtshGnWUlfvyUSlk7K6irZo5apueYpbybOxkvCk3gmDQ_TIKU9jt9AqzATaofF57zScRQ/s1600/css-background-ozelligi.jpg" width="100" height="100"> <p>Aşağıdaki paragrafa ise "p1" class atadık ve genişliğini yüksekliğini 100px olarak ayarladık..</p> <p class="p1">Bu paragrafın yüksekliği ve genişliği 80px'tir.</p> <p>Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..</p> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>css width özelliği ve örnek uygulama</title>
 <style>
img.normal {
 height: auto;
}

img.kucuk {
    height: 30px;
 width:30px;
}

p.p1 {
 height: 100px;
 width: 100px;
 background-color:pink;
}
</style>
 
</head>
<body>
Aşağıdaki smiley resmini önce normal halini gösterelim daha sonra da css'te width ve height değerini değiştirerek boyutlarını küçültüyoruz..
 <img class="normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCeVyCw9cVBBU4fei4BiyxRBg2P7Q7lfRR3pb8DGBsoIZe6ZY_mLkVDCJyZGW3_R8DQJdwnrtshGnWUlfvyUSlk7K6irZo5apueYpbybOxkvCk3gmDQ_TIKU9jt9AqzATaofF57zScRQ/s1600/css-background-ozelligi.jpg" width="100" height="100"> 
 Aşağıdaki ise class ismi "kucuk" aynı resmin boyutlarını değiştirdiğimizdeki hali..

<img class="kucuk" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCeVyCw9cVBBU4fei4BiyxRBg2P7Q7lfRR3pb8DGBsoIZe6ZY_mLkVDCJyZGW3_R8DQJdwnrtshGnWUlfvyUSlk7K6irZo5apueYpbybOxkvCk3gmDQ_TIKU9jt9AqzATaofF57zScRQ/s1600/css-background-ozelligi.jpg" width="100" height="100">
Aşağıdaki paragrafa ise "p1" class atadık ve genişliğini yüksekliğini 100px olarak ayarladık..
Bu paragrafın yüksekliği ve genişliği 80px'tir.
Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..Bu ise normal bir paragraftır..

</body>
</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS width Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML DOCTYPE Bildirimi

Javascript ile neler yapılabilir

Html belgesi yapısını anlama uygulaması

HTML5 ile SEO Uyumlu İçerik Üret

Web Sitenizden Çok Para Kazanin

Javascript kodları nereye yazılır

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

Uyurken Bile Para Kazanmak İster misin

YouTube reklamları nasıl engellenir

Javascript Oyun Yapma Dersleri HTML5+CSS3