Paragraflarınız için süslü ilk büyük harfler oluşturmak için CSS’yi nasıl kullanacağınızı öğrenin. İlk sınırınız için grafik bir görüntü kullanmak için basit bir görüntü değiştirme tekniği bile var.
İlk Büyük Harflerin Temel Stilleri
Belgelerde üç temel ilk büyük harf stili vardır:
- yükseltilmiş – en yaygın olanı, ilk harfin daha büyük olduğu ve mevcut metinle aynı satırda olduğu.
- düştü – ayrıca, ilk harfin daha büyük olduğu ve metnin ilk satırının altına düştüğü durumlarda oldukça yaygındır. Aşağıdaki metin daha sonra etrafında yüzer.
- bitişik – ilk harfin metnin geri kalanının yanında bir sütunda olduğu yer. Bu, baskıda web tasarımından daha yaygındır.
İlk büyük harfler veya büyük harfler çok tanıdık. Aksi takdirde uzun ve sıkıcı metinleri giydirmenin harika bir yoludur. Ve CSS özelliğiyle: ilk harf, ilk harflerinizi nasıl daha gösterişli hale getireceğinizi kolayca tanımlayabilirsiniz.
Basit Bir İlk Başlık Oluşturun
Basit bir yükseltilmiş başlangıç başlığı oluşturmak için yapmanız gereken tek şey, paragrafınızın ilk harfini, birinci harf sözde öğesiyle boyut olarak büyütmek: p:first-letter { font-size: 3em; }
Ancak birçok tarayıcı, ilk harfin satırdaki metnin geri kalanından daha büyük olduğunu görür, bu nedenle satır aralığını satırın geri kalanı için değil, o ilk harf için anlamlı olana eşitler. Neyse ki, birinci satır sözde öğesi ve satır yüksekliği özelliği ile bunu düzeltmek kolaydır: p:first-letter { font-size: 3em; }
p:ilk satır { satır yüksekliği: 1em; }
Metniniz için doğru boyutu bulana kadar belgenizdeki satır yüksekliğiyle oynayın.
İlk Şapkanızla Oynayın
İlk şapkayı nasıl oluşturacağınızı anladıktan sonra, onu öne çıkarmak için süslü giysilerle giydirebilirsiniz. Renkler, arka plan renkleri, kenarlıklar veya hoşunuza giden her şeyle oynayın. Oldukça basit bir stil, sadece ilk harf için yazı tipinizin renklerini ve arka plan rengini tersine çevirmektir: p:ilk harf {
yazı tipi boyutu : %300;
arka plan rengi: #000;
renk: #fff;
}
p:ilk satır { satır yüksekliği: %100; }
Başka bir numara da ilk satırı ortalamaktır. Mizanpajınız esnekse metin satırının ortası farklı olabileceğinden, bu CSS ile zor olabilir. Ancak, değerlerle biraz oynayarak, ilk satırınızı, ilk harfi ortada gösterecek kadar girintili yapabilirsiniz. Doğru görünene kadar paragrafın metin girintisindeki yüzdeyle oynamanız yeterlidir: p:ilk harf {
yazı tipi boyutu : %300;
arka plan rengi: #000;
renk: #fff;
}
p:ilk satır { satır yüksekliği: %100; }
p { metin girintisi: %45; }
Bitişik İlk Büyük Harfler CSS ile Zordur
Farklı tarayıcılar yazı tiplerini farklı görüntülediğinden, bitişik ilk büyük harfler CSS ile zor olabilir. CSS’de bitişik bir başlık oluşturmanın ardındaki fikir, ilk satırdaki text-indent özelliğini negatif bir değer dışarı (sola) itmek için kullanmaktır. Ayrıca o paragrafın sol kenar boşluğunu bir miktar değiştirmeniz gerekecektir. Paragraf iyi görünene kadar bu sayılarla oynayın. p {
metin girintisi: -2.5em;
sol kenar boşluğu: 3em;
}
p:birinci harf { yazı tipi boyutu: 3em; }
p:ilk satır { satır yüksekliği: %100; }
Gerçekten Süslü İlk Büyük Harfler Almak
Süslü bir başlangıç başlığı oluşturmanın en iyi yolu, yazı tipini daha dekoratif bir yazı tipi ailesiyle değiştirmektir. Genel bir yazı tipinin ardından bir dizi yazı tipi kullanırsanız, bu, müşterilerinizin erişilebilirlik ve kullanılabilirlik sorunlarına girmeden görebilmesi için ilk başlığınızın iyi görünmesini sağlamaya yardımcı olur. p:ilk harf {
yazı tipi boyutu: 3em;
yazı tipi ailesi: “Edward Script ITC”, “Brush Script MT”, el yazısı;
}
p:ilk satır { satır yüksekliği: %100; }
Ve her zaman olduğu gibi, reklamların paragrafınıza göre şekillendirdiği bir başlangıç başlığı oluşturmak için tüm bu önerileri bir araya getirebilirsiniz.
Grafik İlk Başlığı Kullanma
Tüm bunlardan sonra, ilk büyük harfinizin sayfada nasıl göründüğünden hala hoşlanmıyorsanız, tam olarak aradığınız efekti elde etmek için grafiklere başvurabilirsiniz. Ancak doğrudan grafiklere geçmeye karar vermeden önce, bu yöntemin dezavantajlarından haberdar olmalısınız:
- Görseli olmayan müşteriler ilk sınırı görmez ve görselin değiştirdiği gizli metni göremeyebilir. Bu, paragrafı erişilemez hale getirebilir veya en iyi ihtimalle okunmasını zorlaştırabilir.
- Görüntüler her zaman bir sayfanın indirme süresine eklenir. Çok sayıda ilk sınırınız varsa, birçok kişinin önemsiz olduğunu düşüneceği bir şey için indirme süresini önemli ölçüde artırabilirsiniz.
- Bazı tarayıcılar, paragraf metninin tuhaf görünmesine neden olabilecek hem gizli ilk harfi hem de resmi görüntüler.
- Doğru grafiği kullanabilmek için ilk harfi tam olarak bilmeniz gerektiğinden, bu seçeneği otomatikleştirmek çok zordur. Bu nedenle, paragraf her düzenlendiğinde yeni bir grafik oluşturmanız gerekebilir.
İlk önce, ilk harfin grafiğini oluşturmanız gerekir. “Edwardian Script ITC” yazı tipiyle L harfini oluşturmak için Photoshop’u kullandık. Büyük yaptık – 300pt boyutunda. Daha sonra resmi harfin çevresinde minimuma indirdik ve resmin genişliğini ve yüksekliğini not ettik. Ardından paragrafımız için bir “capL” sınıfı oluşturduk. Hangi görüntünün kullanılacağını, baştaki (çizgi yüksekliği) vb. tanımladığımız yer burasıdır. Paragrafın metin girintisini ve dolgu üstünü ayarlamak için görüntü genişliğini ve yüksekliğini kullanmanız gerekir. L resmimiz için 95px girinti ve 72px dolguya ihtiyacımız vardı. p.capL {
satır yüksekliği: 1em;
arka plan resmi: url(capL.gif);
arka plan tekrarı: tekrar yok;
metin girintisi: 95 piksel;
üst dolgu: 72 piksel;
}
Ama hepsi bu değil. Orada bırakırsanız, ilk harf paragrafta, önce grafikle, sonra metinde çoğaltılacaktır. Bu yüzden, “initial” sınıfıyla bu ilk öğenin etrafına bir yayılma ekledik ve tarayıcıya bu harfi göstermemesini söyledik: span.initial { display: none; }
Grafik daha sonra doğru şekilde görüntülenir. Metnin tam harfe kadar oturmasını sağlamak için paragraftaki metin girintisiyle oynayabilirsiniz, ancak nasıl görünmesini isterseniz.
mla apa chicago Alıntınızı Biçimlendirin
Kyrin, Jennifer. “CSS İlk Büyük Harfleri.” Düşünce Şirketi, Mayıs. 14, 2021, thinkco.com/css-initial-caps-3466212.
Kyrin, Jennifer. (2021, 14 Mayıs). CSS Başlangıç Harfleri. https://www.thinktco.com/css-initial-caps-3466212 adresinden alındı
Kyrin, Jennifer. “CSS İlk Büyük Harfleri.” Düşünce Şirketi https://www.thinktco.com/css-initial-caps-3466212 (19 Haziran 2021’de erişildi).
