Css ile Görünüm Biçimlendirme | Display, Float, ve Clear Özellikleri

Google+ Pinterest LinkedIn Tumblr +

CSS Kullanıcıları için display, float, clear ve akış özellikleri nasıl kullanır bu dökümanımızda görünüm biçimlendirmenin nasıl geçekleştiğini öğrenip kavrayabilirsiniz…

Css ile Görünüm Biçimlendirme

Display Property

CSS’de üç tip görünüm türü olabilir.

1-) block-level : Block-level görünümünde koyulan elemantten önce ve sonra satır kırılması yapılır. Örneğin p,h1,h2…,h6 ,form vs.. block-level’dir. p tag’ini koyduğunuzda p alt satırdan devam eder.Block-level elementler yan yana görünemezler.

2-) inline: İnline elementlerde satır kırılması yapılmaz. örneğin i,a,b tag’i inline’dir. Bir paragrafın içine a koyduğunuzda paragrafın akışı değişmez. inline elementler block-level elementlerin içine koyulabilirler.

3-) list-item: Bu tipte block-level gibi önce ve sonrasında satır kırılır fakat tek başına kullanılmaz. Bir listenin paraçasıdır ve başka block-level’in içindedir.

Bir elementin block-level,inline veya list-item olarak görünmesini sağlayabilirsiniz. Bunun için display property’si kullanılır. Örneğin eğer img için display:block derseniz her image koyulduğunda yeni satır yapılır. Eğer display:inline derseniz yeni satır yapılmaz ve bir i veya b tag’i gibi kullanabilirsiniz

Eğer bir elementin için dipslay:none yazarsanız o element görülmez.Web sayfalarında menüler bu şekilde yapılabilirler. Fare menunun üzerine geldiğinde menu maddelerinin özelliği display:block yapılır. Fare menuden ayrılırsa menu maddeleri display:none yapılarak görünmez hale getirilir.

Flow-Akış Kontrolü

Normal akış soldan sağa ve yukarıdan aşağıya doğrudur. Örneğin siz 10 resim eklediyseniz resimler solda sağa doğru yerleştirilirler. Eğer sağda yer kalmazsa aşağıdan devam ederler. Örneğin siz bir resmi eklediniz ve daha sonra eklediğiniz paragrafın resmin sağından akmasını istiyorsunuz. Halbuki normalde p tag’ini eklediğinizde yeni satıra geçer ve resmin altından başlar. Hiç bir zaman yazının resmin yanından akmasını sağlayamazsınız. İşte bu sorunu çözmek için float ve clear property’leri kullanılmaktadır.

Float property

float özelliği bir box’ı,resmi,tablo’yu vs.sola, sağa yerleştirmek için kullanılır. Siz bir elemanı flaot=left ile yerleştirirseniz bundan sonraki elmanlar o elamanın sağından akar. Yukardaki örnekle düşünürsek eğer resme float:left dersek bundan sonraki paragraf normal akışı olarak resmin sağından hareket edecektir. Aşağıda bu örneğin kodu görülmektedir.

[css] <html>
<head>
<style>
img{
float:left;
}
</style>
</head>
<body>
<img src=”test.gif”></img>
<p>Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. resmi geçtikten sonra en oldan yazı devam edecek. devam edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek </p>
</body>
</html>
[/css]

Float:left dememiz sayesinde image sola yerleştirilir. Yazılarda onun sağından normal akışına devam eder. Eğer resmi sağa yazıyı sola almak istiyorsanız img için float:right demeniz yeterlidir.

Clear property

float özelliği ile resmi yerleştirdiğimizde bundan sonra eklenenler resmin sağından akacaktır. Şimdi resmi koydunuz, resmin sağından akacak yazıyıyı yazdınız. Ancak hala remin sağında boşluk var. Bundan sonra bir h1 başlık koyduğunuzda bu başlıkta sağda gözükecek. Halbuki siz bu başlığı solda görmek istiyorsunuz. Bu nasıl olacak. İşte bunun için clear özelliği kullanılır. h1 için clear:left yapılırsa h1 başlığı resmin sağına koyulmaz. Resmin altından normal akıştaki gibi devam eder. Aşağıda bu örneği görüyorsunuz.

[css] <html>
<head>
<style>
img{
float:left;
}
h1{
clear:left;
}
</style>
</head>
<body>
<img src=”test.gif”></img>
<p>Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. resmi geçtikten sonra en oldan yazı devam edecek.</p>
<h1>Bu başlık resmin altında olacak</h1>
</body>
</html>
[/css]

Eğer clear:left demeseydik h1 başlığı resmin sağında olurdu.

Share.

Leave A Reply

*