CSS Podcast - 014: Sözde öğeler
Bir içerik makaleniz varsa ve ilk harfin çok daha büyük bir düşüş olmasını istiyorsanız bunu nasıl yapabilirsiniz?
CSS'de bu tür tasarım ayrıntılarına ulaşmak için ::first-letter
sözde öğesini kullanabilirsiniz.
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
Sözde öğe, daha fazla HTML eklemek zorunda kalmadan fazladan bir öğe eklemeye veya hedeflemeye benzer.
::first-letter
kullanan bu örnek çözüm, birçok sözde öğeden biridir.
Bunların bir dizi rolü vardır. Bu derste
hangi sahte öğelerin mevcut olduğunu ve bunları nasıl kullanabileceğinizi öğreneceksiniz.
::before
ve ::after
Hem ::before
hem de ::after
sözde öğeleri, yalnızca bir content
özelliği tanımlarsanız bir öğenin içinde bir alt öğe oluşturur.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
, boş bir dize de dahil olmak üzere herhangi bir dize olabilir. Ancak ekran okuyucuların boş dize dışındaki tüm dizeleri dinleme ihtimalinin yüksek olduğunu unutmayın.
Bir resim url
ekleyebilirsiniz. Bu işlem, resmi orijinal boyutlarında ekleyerek yeniden boyutlandıramazsınız.
counter
da ekleyebilirsiniz.
Bir ::before
veya ::after
öğesi oluşturulduktan sonra, hiçbir sınırlama olmadan istediğiniz gibi stilini belirleyebilirsiniz.
::before
veya ::after
öğelerini yalnızca alt öğeleri (doküman ağacı olan öğeler) kabul edecek bir öğeye ekleyebilirsiniz. Bu nedenle <img />
, <video>
ve <input>
gibi öğeler çalışmaz.
::first-letter
Bu sözde öğeyle dersin başında tanıştık.
::first-letter
hedeflenirken tüm CSS özelliklerinin kullanılamayacağını unutmayın.
Kullanılabilir özellikler şunlardır:
color
background
mülkleri (ör.background-image
)border
mülkleri (ör.border-color
)float
font
mülkleri (font-size
vefont-weight
gibi)- metin özellikleri (
text-decoration
veword-spacing
gibi)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
::first-line
sözde öğesi, yalnızca ::first-line
uygulanmış öğenin display
değeri block
, inline-block
, list-item
, table-caption
veya table-cell
olduğunda metnin ilk satırının stilini belirlemenize olanak tanır.
p::first-line {
color: goldenrod;
font-weight: bold;
}
::first-letter
sözde öğesi gibi, CSS özelliklerinin yalnızca bir alt kümesini kullanabilirsiniz:
color
background
tesisfont
tesistext
tesis
::backdrop
Tam ekran modunda sunulan <dialog>
veya <video>
gibi bir öğeniz varsa arka planı (öğe ile sayfanın geri kalanı arasındaki boşluk) ::backdrop
sözde öğesiyle biçimlendirebilirsiniz:
video::backdrop {
background-color: goldenrod;
}
::marker
::marker
sözde öğesi, bir liste öğesi için madde işareti veya sayı ya da <summary>
öğesindeki ok stilini belirlemenize olanak tanır.
::marker {
color: hotpink;
}
ul ::marker {
font-size: 1.5em;
}
ol ::marker {
font-size: 1.1em;
}
summary::marker {
content: '\002B'' '; /* Plus symbol with space */
}
details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}
::marker
için CSS özelliklerinin yalnızca küçük bir alt grubu desteklenir:
color
content
white-space
font
tesisanimation
vetransition
mülkleri
content
özelliğini kullanarak işaretçi simgesini değiştirebilirsiniz. Örneğin, bunu bir <summary>
öğesinin kapalı ve boş durumları için artı ve eksi simgesi ayarlamak üzere kullanabilirsiniz.
::selection
::selection
sözde öğesi, seçilen metnin görünümünü şekillendirmenize olanak tanır.
::selection {
background: green;
color: white;
}
Bu sözde öğe, seçili tüm metni yukarıdaki demoda olduğu gibi biçimlendirmek için kullanılabilir. Daha spesifik bir seçim stili için diğer seçicilerle birlikte de kullanılabilir.
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
Diğer sözde öğelerde olduğu gibi, CSS özelliklerinin yalnızca bir alt kümesine izin verilir:
color
background-color
ancakbackground-image
değiltext
tesis
::placeholder
placeholder
özelliğiyle form öğelerine <input>
gibi bir yardımcı ipucu ekleyebilirsiniz.
::placeholder
sözde öğesi, bu metni biçimlendirmenize olanak tanır.
input::placeholder {
color: darkcyan;
}
::placeholder
, CSS kurallarının yalnızca bir alt kümesini destekler:
color
background
tesisfont
tesistext
tesis
::cue
Sözde öğelerle ilgili bu turun sonuncusu ::cue
sözde öğedir.
Bu, <video>
öğesinin altyazıları olan WebVTT ipuçlarının stilini belirlemenize olanak tanır.
Seçiciyi ::cue
öğesine de aktarabilirsiniz. Böylece, altyazının içindeki belirli öğeleri biçimlendirebilirsiniz.
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
Öğrendiklerinizi sınayın
Sözde öğeler bilginizi test etme
Aşağıdakilerden hangisi sözde öğe değildir?
::before
content: '';
eklemeyi unutmayın.::first-paragraph
::after
content: '';
eklemeyi unutmayın.::marker
::pencil
:active
Sözde öğeler, bir HTML dosyasında bulunabilir.