Bir Web sayfasındaki metnin soluna bir görüntü nasıl süzülür

Bir resmi web sayfasının sol tarafına hizalamak için CSS'yi kullanma Düzeni

Hemen hemen her web sayfasına bakın ve bu sayfaların çoğunu oluşturan metin ve resimlerin bir kombinasyonunu göreceksiniz. Bir sayfaya metin ve resim eklemek çok kolaydır. Metinler, paragraflar, listeler ve başlıklar gibi standart HTML etiketleri kullanılarak kodlanırken, görüntüler öğesi kullanılarak eklenir .

Bu metni ve bu görüntüleri birlikte kullanabilme yeteneği, harika web tasarımcılarını ayıran şeydir! Metin ve resimlerinizin birbiri ardına görünmesini istemezsiniz; bu, blok düzeyindeki öğelerin varsayılan olarak düzeni nasıl düzenler. Hayır, metnin ve görsellerin web sitenizin görsel tasarımı olacak şekilde nasıl birlikte aktığını kontrol etmek istersiniz.

Bir sayfanın sol tarafına akan bir sayfanın sol tarafına hizalanmış bir görüntüye sahip olmak, basılı tasarım ve web sayfaları için yaygın bir tasarım uygulamasıdır. Web terimlerinde, bu efekt resmin yüzülmesi olarak bilinir . Bu tarz "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.) Bu görsel etkiyi nasıl gerçekleştireceğimize bakalım.

HTML ile başla

Yapmanız gereken ilk şey çalışmak için biraz HTML var. Örneğimiz için, bir paragraf metni yazacağız ve paragrafın başına bir metin ekleyeceğiz (metinden önce, ancak açılıştan sonra

etiketi). İş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 görüntülenir. Bunun nedeni, görsellerin HTML'de blok düzeyindeki öğeler olmasıdır. 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 birlikte, "sol" sınıf özniteliğimiz 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:

.left {float: left; 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. Bu , 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.

Bu Stilleri Elde Etmenin Alternatif Yolları

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.