İyi web tasarımı genellikle iyi tipografi ile ilgilidir. Bir web sayfasının içeriğinin çoğu metin olarak sunulduğundan, bu metni hem çekici hem de etkili olacak şekilde stillendirmek bir web tasarımcısı olarak sahip olunması gereken önemli bir beceridir. Ne yazık ki, basılı olarak yaptığımız aynı düzeyde tipografik kontrole sahip değiliz. Bu, bir web sitesindeki metni, basılı bir parçada yapabileceğimiz şekilde her zaman güvenilir bir şekilde biçimlendiremeyeceğimiz anlamına gelir.
Basılı olarak sıkça gördüğünüz (ve çevrimiçi olarak yeniden oluşturabileceğimiz) yaygın bir paragraf stili, o paragrafın ilk satırının girintili olduğu yerdir. sekme alanı. Bu, okuyucuların bir paragrafın nerede başladığını ve diğerinin nerede bittiğini görmelerini sağlar.
Tarayıcılar varsayılan olarak boşluklu paragrafları görüntülediğinden, bu görsel stili web sayfalarında pek görmezsiniz. bunların altında, birinin nerede bitip diğerinin nerede başladığını göstermenin bir yolu olarak, ancak buna sahip bir sayfaya stil vermek istiyorsanız baskıdan ilham alan
girinti stili paragraflarda, bunu metin girintisi stil özelliği.Bu özelliğin sözdizimi basittir. Bir belgedeki tüm paragraflara nasıl metin girintisi ekleyeceğiniz aşağıda açıklanmıştır.
p {
metin girintisi: 2em;
}
Girintileri Özelleştirme
Girintili paragrafları tam olarak belirtmenin bir yolu, girintili olmasını istediğiniz paragraflara bir sınıf ekleyebilirsiniz, ancak bu, ona bir sınıf eklemek için her paragrafı düzenlemenizi gerektirir. Bu verimsiz ve takip etmiyor HTML kodlaması en iyi uygulamalar.
Bunun yerine, paragrafları girinti yaparken göz önünde bulundurmalısınız. Doğrudan başka bir paragrafı izleyen paragrafları girintilersiniz. Bunu yapmak için komşu kardeş seçiciyi kullanabilirsiniz. Bu seçici ile, hemen öncesinde başka bir paragraf bulunan her paragrafı seçiyorsunuz.
p + p {
metin girintisi: 2em;
}
İlk satırı girintili yaptığınız için, paragraflarınızın aralarında fazladan boşluk olmadığından da emin olmalısınız (tarayıcının varsayılanı budur). Biçimsel olarak, paragraflar arasında boşluk bırakmalısınız. veya ilk satırı girintileyin, ancak ikisini birden değil.
p {
kenar boşluğu-alt: 0;
alt dolgu: 0;
}
p + p {
üst kenar boşluğu: 0;
üst dolgu: 0;
}
Negatif Girintiler
Ayrıca metin girintisi özelliği, negatif bir değerle birlikte, satırın başlangıcının normal bir girinti gibi sağa değil sola gitmesine neden olur. Bunu, satır tırnak işaretiyle başlıyorsa, alıntı karakterinin satırda görünmesi için yapabilirsiniz. paragrafın solunda hafif bir kenar boşluğu ve harflerin kendileri hala güzel bir sol oluşturuyor hizalama.
Örneğin, bir blok alıntının soyundan gelen bir paragrafınız olduğunu ve negatif girintili olmasını istediğinizi varsayalım. Bu CSS'yi yazabilirsiniz:
blok alıntı p {
metin girintisi: -.5em;
}
Bu, muhtemelen açılış alıntı karakterini içeren paragrafın başlangıcını, asılı noktalama işaretleri oluşturmak için hafifçe sola kaydırılacaktır.
Kenar Boşlukları ve Dolgu ile İlgili
Çoğu zaman web tasarımında kullanırsınız kenar boşluğu veya dolgu değerleri öğeleri taşımak ve beyaz boşluk oluşturmak için. Ancak bu özellikler girintili paragraf efektini elde etmek için çalışmayacaktır. Bu değerlerden herhangi birini paragrafa uygularsanız, o paragrafın tüm metni, her satır da dahil olmak üzere, yalnızca ilk satır yerine boşluk bırakılır.