Metin Girinti Özelliğini ve Bitişik Kardeş Seçicilerini Kullanma
İyi web tasarımı genellikle iyi tipografi hakkındadır. Bir web sayfasının içeriğinin çoğu metin olarak sunulduğundan, bu metni çekici ve etkili olacak şekilde biçimlendirmek, bir web tasarımcısı olarak sahip olmak için önemli bir beceridir. Ne yazık ki, baskıda yaptığımız online tipografik kontrol seviyesine sahip değiliz. Bu, bir web sitesinde metinleri her zaman basılı bir parçada yapabileceğimiz şekilde güvenilir bir şekilde stilleyemeyeceğimiz anlamına gelir.
Baskıda sıkça gördüğünüz ortak bir paragraf stili (ve çevrimiçi olarak yeniden oluşturabiliriz), bu paragrafın ilk satırının bir sekme boşluğuna girdiği yerdir. Bu, okuyucuların bir paragrafın nerede başladığını ve başka bir şeyin nerede bittiğini görmelerini sağlar.
Bu görsel stili web sayfalarında görmüyorsunuz çünkü tarayıcılar, varsayılan olarak, birinin nerede bittiğini ve bir başkasının başladığını göstermenin bir yolu olarak altlarında boşluklarla birlikte paragraflar gösterirler, ancak bu baskıya sahip bir sayfa oluşturmak istiyorsanız paragraflarda ilham girintili stil, metin girintili stil özelliği ile yapabilirsiniz.
Bu mülkün sözdizimi basit. Bir belgedeki tüm paragraflara nasıl metin girintisi ekleyeceğiniz aşağıda açıklanmıştır.
p {text-girinti: 2em; }Girintileri Özelleştirme
Girintilemek için paragrafları tam olarak belirleyebileceğiniz bir yöntem olarak, girintilemek istediğiniz paragraflara bir sınıf ekleyebilirsiniz, ancak bu, her paragrafı bir sınıf eklemek için düzenlemenizi gerektirir. Bu verimsiz ve HTML kodlama en iyi uygulamalarını takip etmiyor.
Bunun yerine, paragraf girdiğinizde dikkate almalısınız. Başka bir paragrafı doğrudan takip eden paragraflar girersiniz. Bunu yapmak için komşu kardeş seçimini kullanabilirsiniz. Bu seçici ile, başka bir paragrafın hemen önündeki her paragrafı seçersiniz.
p + p {text-girinti: 2em; }İlk satırı girdiğiniz için, paragraflarınızın aralarında fazladan boşluk olmadığından emin olmalısınız (tarayıcı varsayılanıdır). Stilistik olarak, paragraflar arasında boşluk bırakmanız veya ilk satırı girmeniz gerekir, ancak her ikisini de değil.
p {margin-bottom: 0; alt-dolgu: 0; p + p {kenar boşluğu: 0; dolgu malzemesi: 0; }Negatif Girintiler
Metin girintisi özelliğini, negatif bir değerin yanı sıra, normal bir girintiye benzer bir satırın soluna gitmek için bir satırın başlamasına neden olmak için de kullanabilirsiniz. Bir satırın tırnak işareti ile başlaması durumunda bunu yapabilirsiniz, böylece alıntı karakteri paragrafın solundaki küçük kenar boşluğunda görünür ve harfler hala güzel bir sol hizalama oluşturur.
Örneğin, bir bloğun soyundan gelen bir paragrafınız olduğunu ve bunun olumsuz olarak girilmesini istediğinizi varsayalım. Bu CSS'yi yazabilirsiniz:
blockquote p {metin-girinti: -.5em; }Bu, açılış işaret karakterini içeren paragrafın başlamasını verir, asılı noktalama oluşturmak için hafifçe sola hareket ettirilir.
Kenar Boşlukları ve Dolgu Hakkında
Çoğu zaman web tasarımında, öğeleri taşımak ve beyaz boşluk oluşturmak için kenar boşluğu veya dolgu değerleri kullanırsınız. Bununla birlikte, bu özellikler girintili paragraf efekti elde etmek için çalışmaz. Bu değerlerden birini paragrafa uygularsanız, her satır dahil olmak üzere, bu paragrafın tüm metni, yalnızca ilk satırın yerine aralıklı olacaktır.