::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

Sıradaki ders: ::selection

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler