Özet - Dekoratif başlık

Sözde elementlerle dekoratif başlık süslemeleri kurarsın.

Dört sözde element, tek başlık

Bu grupta dört sözde element öğrendin: ::before ve ::after içerik öncesi ve sonrasına kutu ekler; ::first-letter baş harfi büyütür; ::selection seçili metni boyar; ::placeholder input ipucunu biçimler.

Hepsinin ortak noktası content özelliğidir: ::before ve ::after için zorunlu, diğerleri için gereksiz. Şimdi bu sözde elementleri bir araya getiren dekoratif bir başlık kuracaksın.

Uygulama Dekoratif kareyi ::before ile ekle

Bir h1 tür seçicisine ::before sözde elementi ekle. İçine content: "", display: inline-block, width: 1rem ve background: navy tanımla. Bu, başlığın önüne küçük bir lacivert kare süsü koyar.

Örnek çözümü göster

/* dekoratif kare için ::before ekle */
h1::before {
  content: "";
  display: inline-block;
  width: 1rem;
  background: navy;
}

Uygulama Baş harfi büyüt ve seçimi boya

İki sözde element daha ekle. Birincisi h1::first-letter; color: navy ve font-size: 2rem tanımlasın. İkincisi ::selection; background: navy ve color: white tanımlasın. Böylece başlığın baş harfi büyür ve seçili metin lacivert olur.

Örnek çözümü göster

/* baş harfi ve seçim stilleri */
h1::first-letter {
  color: navy;
  font-size: 2rem;
}
::selection {
  background: navy;
  color: white;
}

Kendini test et

Aşağıdakilerden hangisi sözde elementtir?
- .heading
- #main
- ::after
- a[href]
Cevabı göster

::after — Doğru. Çift kolon (::) sözde element olduğunu gösterir.

h1::before bloğunu yaz

h1____ {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: navy;
}

Cevabı göster

h1::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: navy;
}

Sıradaki ders: Kardeş seçiciler (+ ve ~)

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler