Ö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; }