::first-letter ve ::first-line
::first-letter ve ::first-line sözde elementlerini öğrenirsin.
::first-letter nedir?
::first-letter sözde elementi bir blok öğenin ilk harfini yakalar ve ona özel stil verir. p::first-letter { font-size: 3rem; } her paragrafın baş harfini üç kat büyük gösterir.
Sözde element yalnızca görünen ilk harfle ilgilenir; etiketin nasıl başladığı önemli değildir. Tırnak işareti, sayı veya boşluk gelse de tarayıcı yine de ilk harfi bulur. Bu, gazete ve dergi düzeninde sık görünen bir süstür.
::first-line ve drop cap
::first-line ise bir bloğun ilk satırını yakalar; satır uzunluğu ekran genişliğine göre değişir. p::first-line { text-transform: uppercase; } ilk satırı büyük harfe çevirir.
Bu iki sözde element birlikte drop cap denilen gazete başı süsünü kurar: ::first-letter baş harfi dev boyutta ve sola kaydırır; metin yanından akar. Klasik bir dergi görünümüdür.
Uygulama Drop cap baş harfi büyüt
Bir p tür seçicisine ::first-letter sözde elementi ekle. İçine font-size: 3rem, float: left ve color: navy tanımla. Bu, paragrafın ilk harfini büyüten klasik drop cap süsüdür.
Örnek çözümü göster
/* paragraf başına drop cap ekle */
p::first-letter {
font-size: 3rem;
float: left;
color: navy;
}Kendini test et
-
::first-letter neyi hedefler?
p::first-letter { font-size: 3rem; }- Bir blok öğenin ilk harfini
- Bir öğedeki tüm harfleri
- Sayfadaki ilk öğeyi
- Yalnızca paragrafların ilk satırını
Cevabı göster
Bir blok öğenin ilk harfini — Doğru. ::first-letter bir blok öğenin görünen ilk harfini biçimler.
-
p::first-letter bloğunu yaz
____ { font-size: 3rem; float: left; }Cevabı göster
p::first-letter { font-size: 3rem; float: left; } -
Sözde elementi hedefine eşle
- ::first-letter
- İlk harf
- ::first-line
- İlk satır
- ::before
- İçerik öncesi kutu
- ::after
- İçerik sonrası kutu