Bir web sayfasındaki öğelerin yerleştirilmesi, genel tasarımı için önemlidir. Düzeni etkilemenin başka yolları da olsa ( ki bunu önermiyoruz ), tabloları kullanmak gibi, CSS'yi kullanmak en iyisidir .
Aşağıda, resimleri, tabloları, paragrafları ve daha fazlasını hizalamak için basit bir CSS stili satır içi özelliğinin nasıl kullanılacağına göz atacağız.
Not: Aynı yöntemler harici stil sayfalarında da kullanılabilir, ancak bunlar tek tek öğeler için geçerli olduğundan ve muhtemelen bu şekilde kalması gerektiğinden, aşağıda belirtilenler gibi sıralı tasarım kullanmak en iyisidir.
Metin Paragraflarını Hizala
Paragraf etiketi, web sayfanızı oluşturmaya başladığınız ilk yerdir. Etiketleri açıp kapamak şöyle görünür:
Bir paragraftaki metnin varsayılan hizalaması sayfanın sol tarafındadır, ancak paragraflarınızı sağa ve merkeze de hizalayabilirsiniz.
Kayan nokta özelliğini kullanmak, paragrafları ana öğenin sağına veya soluna hizalamanıza olanak tanır. Bu ana elemanın içindeki diğer tüm elemanlar, yüzen elemanın etrafında akacaktır.
Bir paragrafla en iyi etkiyi elde etmek için, en iyi paragrafta kapsayıcı (ana) öğeden daha küçük bir genişlik ayarlamak en iyisidir.
Paragraf İçindeki Metni Hizala
Muhtemelen, paragraf metni için en ilginç hizalama, tarayıcının metni esas olarak pencerenin sağ ve sol taraflarına hizalanmış olarak göstermesini söyleyen "haklı" tır.
Metni paragrafta haklı çıkarmak için metin hizalama özelliğini kullanırsınız.
Metin hizalama özelliğini kullanarak, paragraf içindeki tüm metni sağ tarafa veya sola (varsayılan) hizalayabilirsiniz.
Metin hizalama özelliği, metni öğenin içinde hizalar. Teknik olarak, paragrafta veya diğer öğenin içinde bulunan görüntüleri hizalamaması gerekiyordu, ancak çoğu tarayıcı bu mülk için görüntüleri satır içi olarak ele alır.
Görüntüleri Hizala
Float özelliğini bir görüntü etiketinde kullanarak, sayfadaki görüntülerin yerleşimini ve metnin etrafına nasıl sarılacağını tanımlayabilirsiniz.
Yukarıdaki paragraflarda olduğu gibi, resim etiketindeki float stili özelliği görüntünüzü sayfaya yerleştirir ve tarayıcıya metnin ve o resmin çevresindeki diğer öğelerin nasıl akacağını söyler.
Yukarıdaki görüntü etiketini izleyen metin, görüntünün ekranın solunda görüntülendiği gibi sağa doğru akar.
Metnin resmin etrafına sarılmasını durdurmak istiyorsam, açık mülkü kullanıyorum:
Paragraflardan Daha Fazla Hizalama
Ancak, bir paragraftan veya bir görüntüden daha fazlasını hizalamak isterseniz ne olur? Her paragrafa bir stil özelliği koyabilirsiniz, ancak kullanabileceğiniz bir etiket daha etkilidir:
Etiketi ve görüntüleri ( HTML etiketleri dahil) etiketi ve stil özelliğini (şamandıra veya metin hizalaması) basitçe sarın ve bu bölümdeki her şey istediğiniz gibi hizalanacaktır.
Etiketteki paragraflara veya resimlere eklenen hizalamaların, etiketi geçersiz kılacak şekilde onurlandırılacağını unutmayın.