Bir HTML belgesindeki (ör. Bir web sayfası) blok seviyesinde bir eleman ardışık sırada görünür. Sayfanın daha çekici görünmesini sağlamak veya kullanışlılığını geliştirmek için düzeni değiştirmek üzere, söz konusu sayfanın metninin etrafına akması için resimler dahil olmak üzere blokları sarmanız gerekir.
Web terimlerinde, bu etki, görüntüyü "yüzer" olarak bilinir. Bu stil "float" için CSS özelliği ile elde edilir. Bu özellik, metnin sola hizalanmış görüntüyü sağ tarafına akmasına izin verir. Ya da sol tarafına doğru hizalanmış bir görüntü etrafında.
HTML ile başla
Yapmanız gereken ilk şey çalışmak için biraz HTML var. Örneğimiz için, bir metin paragrafı yazacağız ve paragrafın başına bir metin ekleyeceğiz (metinden önce, ancak açılıştan sonra)
etiket). İşte HTML biçimlendirmesinin neye benzediği:
Paragrafın metni buraya gider. Bu örnekte, bir headshot fotoğrafının görüntüsüne sahibiz, bu yüzden bu metin muhtemelen headshot'ın olduğu kişi hakkında olacaktır.
Varsayılan olarak, web sayfamız metnin üstündeki resim ile birlikte gösterilecektir, çünkü resimler HTML'de blok düzeyindeki öğelerdir. Bu, tarayıcının görüntü öğelerinden önce ve sonra satır sonlarını varsayılan olarak görüntülediği anlamına gelir. Bu varsayılan görünümü CSS'ye çevirerek değiştireceğiz. İlk olarak, görüntü öğemize bir sınıf değeri ekleyeceğiz. Bu sınıf, daha sonra CSS'de kullanacağımız bir "kanca" olarak hareket edecektir.
Paragrafın metni buraya gider. Bu örnekte, bir headshot fotoğrafının görüntüsüne sahibiz, bu yüzden bu metin muhtemelen headshot'ın olduğu kişi hakkında olacaktır.
Bu "sol" sınıfının kendi başına hiçbir şey yapmadığını unutmayın. Bizim istediğimiz tarza ulaşabilmemiz için, sonraki CSS'yi kullanmamız gerekiyor.
CSS Stilleri
HTML'mizle ("sol" sınıf özelliklerimiz de dahil olmak üzere) şimdi CSS'ye dönebiliriz. Bu tabloyu süzecek ve yanına küçük bir dolgu ekleyecek olan stil sayfamıza bir kural ekleyeceğiz, böylece resmin etrafına en sonunda sarılacak olan metin çok yakın değil. Yazabileceğiniz CSS:
.ayrıldı { yüzer: sol; dolgu malzemesi: 0 20px 20px 0;}
Bu stil, görüntüyü sola doğru yüzer ve resmin sağına ve altına küçük bir dolgu ekler (bazı CSS kısayollarını kullanarak). Bir tarayıcıda bu HTML'yi içeren sayfayı incelediyseniz, resim artık sola hizalı olacak ve paragrafın metni, ikisi arasında uygun miktarda boşluk bırakılarak sağda görünecektir. Kullandığımız "sol" sınıf değeri keyfi olduğunu unutmayın. Bir şey diyebiliriz çünkü "sol" terimi kendi başına hiçbir şey yapmaz. Kullandığınız terim, HTML'de, yapmak istediğiniz görsel değişiklikleri belirleyen gerçek bir CSS stili ile çalışan bir sınıf özelliğine sahip olmalıdır. Görüntü öğesinin bir sınıf özniteliği vermesi ve ardından öğeyi yüzdüren genel bir CSS stili kullanmanın bu yaklaşımı, bu "sol hizalanmış görüntü" görünümünü gerçekleştirebilmenizin yalnızca bir yoludur. Ayrıca, sınıf değerini görüntüden çıkarabilir ve daha spesifik bir seçici yazarak CSS ile stilleyebilirsiniz. Örneğin, o görüntünün "ana içerik" sınıf değeriyle bir bölümün içinde olduğu bir örneğe bakalım. Bu resmi şekillendirmek için, bu CSS'yi yazabilirsiniz: .main-content img { yüzer: sol; dolgu malzemesi: 0 20px 20px 0;}
Bu senaryoda, resmimiz daha önce olduğu gibi etrafta dolaşan metinle sola hizalı olacaktı, ancak işaretlememize ekstra bir sınıf değeri eklememize gerek yoktu. Bunu ölçeklerde yapmak, yönetimi daha kolay olacak ve performansı artırmaya yardımcı olabilecek daha küçük bir HTML dosyasının oluşturulmasına yardımcı olabilir. Son olarak, stilleri doğrudan HTML işaretlemenize ekleyebilirsin, bunun gibi:
Bu yöntem "satır içi stilleri" olarak adlandırılır. Bir öğenin stilini yapısal biçimlendirmesiyle birleştirdiği için tavsiye edilmez. Web en iyi uygulamaları, bir sayfanın stilinin ve yapısının ayrı kalması gerektiğini belirtir. Bu ayrıştırma, sayfanızın düzenini değiştirmesi gerektiğinde ve duyarlı bir web sitesiyle farklı ekran boyutları ve cihazları aradığında özellikle yararlı olur. Sayfanın stilini HTML'ye dahil etmek, sitenizin görünümünü farklı ekranlar için gerektiği gibi ayarlayacak medya sorgularının yazılmasını çok daha zor hale getirecektir. Bu Stilleri Elde Etmenin Alternatif Yolları
Paragrafın metni buraya gider. Bu örnekte, bir headshot fotoğrafının görüntüsüne sahibiz, bu yüzden bu metin muhtemelen headshot'ın olduğu kişi hakkında olacaktır. Satır İçi Stillerden Kaçının
Paragrafın metni buraya gider. Bu örnekte, bir headshot fotoğrafının görüntüsüne sahibiz, bu yüzden bu metin muhtemelen headshot'ın olduğu kişi hakkında olacaktır.
