Blok düzeyinde öğeler bir web sayfasında sıralı olarak görünür. Sayfanın görünümünü veya kullanışlılığını iyileştirmek için, resimler dahil blokları kaydırarak bu sırayı değiştirebilirsiniz. metin görüntülerin etrafında akar.
Web tasarımı terimlerinde bu etki, görüntüyü yüzdürme olarak bilinir. Bu, ile elde edilir CSS özelliğiyüzerBu, metnin sola hizalanmış görüntünün çevresinden sağ tarafına (veya sağa hizalanmış bir görüntünün etrafına sol tarafına) akmasına izin verir.
HTML ile Başlayın
Bu örnek, paragrafın başına bir resim ekler (metinden önce, ancak açılıştan sonra)
etiket). İşte ilk HTML işaretlemesi:
Paragrafın metni buraya gelir. Bu örnekte, bir vesikalık fotoğraf görüntüsüne sahibiz, dolayısıyla bu metin vesikalık fotoğraftaki kişiyi tanımlayabilir.
Görüntüler HTML'de blok düzeyinde öğeler olduğundan, varsayılan olarak sayfa metnin üzerinde görüntüyle birlikte görüntülenir. Bu, tarayıcının varsayılan olarak görüntü öğesinden önce ve sonra satır sonları gösterdiği anlamına gelir. Bu varsayılan görünümü CSS kullanarak değiştirmek için bir sınıf değeri ekleyin (
ayrıldı) özelliklerin eklenebileceği bir kanca görevi görmesi için görüntü öğesine.Paragrafın metni buraya gelir. Bu örnekte, bir vesikalık fotoğraf görüntüsüne sahibiz, dolayısıyla bu metin vesikalık fotoğraftaki kişiyi tanımlayabilir.
Bu sınıfın kendi başına hiçbir şey yapmadığını unutmayın. CSS istenilen stile ulaşacaktır.
CSS Stilleri Ekleme
Bu kuralı sitenin stil sayfası:
.ayrıldı {
yüzer: sol;
dolgu: 0 20px 20px 0;
}
Bu stil, sınıfla her şeyi yüzer ayrıldı sayfanın soluna ve biraz ekler dolgu malzemesi metnin sağ üstte olmaması için görüntünün sağında ve altında.
Bir tarayıcıda, görüntü artık sola hizalanır; metin, ikisi arasında boşluk bırakarak sağında görünecektir.
sınıf değeri .ayrıldı burada kullanılan keyfidir. Seçtiğiniz herhangi bir şey diyebilirsiniz çünkü kendi başına hiçbir şey yapmaz. Ancak, CSS'de değiştirdiğiniz herhangi bir değerin HTML'ye de yansıtılmaması gerekir.
Bu Tarzları Elde Etmenin Diğer Yolları
Ayrıca, daha spesifik bir seçici yazarak görüntünün sınıf değerini çıkarabilir ve CSS ile biçimlendirebilirsiniz. Aşağıdaki örnekte, resim bir bölümün içindedir. ana içerik sınıf değeri.
Paragrafın metni buraya gelir. Bu örnekte, bir vesikalık fotoğraf görüntüsüne sahibiz, dolayısıyla bu metin vesikalık fotoğraftaki kişiyi tanımlayabilir.
Bu resme stil vermek için şu CSS'yi yazın:
.main-content img {
yüzer: sol;
dolgu: 0 20px 20px 0;
}
Bu senaryoda, resim sola hizalanır, metin daha önce olduğu gibi etrafında yüzer, ancak işaretlemede ekstra sınıf değeri yoktur. Bunu geniş ölçekte yapmak, yönetimi daha kolay olacak ve performansı artırabilecek daha küçük bir HTML dosyası oluşturmaya yardımcı olabilir.
Satır İçi Stillerden Kaçının
Son olarak, kullanabilirsin satır içi stiller:
Paragrafın metni buraya gelir. Bu örnekte, bir vesikalık fotoğraf görüntüsüne sahibiz, dolayısıyla bu metin vesikalık fotoğraftaki kişiyi tanımlayabilir.
Ancak bu tavsiye edilmez, çünkü bir öğenin stilini yapısal işaretlemesiyle birleştirir. En iyi uygulamalar, bir sayfanın stilinin ve yapısının ayrı kalmasını gerektirir. Bu ayırma, özellikle sayfanın düzenini değiştirmeniz ve duyarlı bir web sitesine sahip farklı ekran boyutları ve cihazları aramanız gerektiğinde yararlıdır.
Sayfanın stilini HTML ile iç içe geçirmek, medya sorguları yazma sitenizi farklı ekranlara göre ayarlamak çok daha zor.