CSS Podcast'i - 014: Sözde öğeler
'nı inceleyin.
İçerik makaleniz ve ilk harfinin çok daha büyük olmasını istiyorsanız bunu nasıl başarabilirsiniz?
CSS'de
bu tür bir tasarım ayrıntısı elde etmek 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 ekstra bir öğe eklemeye veya hedeflemeye benzer.
Bu örnek çözüm, ::first-letter
kullanılarak
birçok sözde öğeden biridir.
Bu kişilerin rolleri,
Bu derste ise hangi sanal öğelerin mevcut olduğunu ve bunları nasıl kullanabileceğinizi öğreneceksiniz.
::before
ve ::after
Hem
::before
ve
::after
sözde öğeler, yalnızca bir content
özelliği tanımlarsanız bir öğenin içinde alt öğe oluşturur.
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
, herhangi bir dize olabilir.
(boş olsa bile)
ancak boş dize dışında bir şeyin ekran okuyucu tarafından okunabileceğini unutmayın.
url
resmi ekleyebilirsiniz.
resmi orijinal boyutlarında yerleştirilir.
yeniden boyutlandıramazsınız.
İsterseniz
counter
.
::before
veya ::after
öğesi oluşturulduktan sonra
istediğiniz gibi stilize edebilirsiniz.
Yalnızca alt öğeleri kabul edecek bir öğeye ::before
veya ::after
öğesi ekleyebilirsiniz
(belge ağacı içeren öğeler),
bu nedenle <img />
, <video>
ve <input>
gibi öğeler çalışmaz.
::first-letter
Bu sözde öğeyle, dersin başında karşılaştık.
Burada, hedefleme yaparken tüm CSS özelliklerinin kullanılamayacağını unutmayın.
::first-letter
.
Şu özellikleri kullanabilirsiniz:
color
background
mülk (background-image
gibi)border
mülk (border-color
gibi)float
font
özellikleri (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 öğe, metnin ilk satırını biçimlendirmenizi sağlar
yalnızca ::first-line
içeren öğe display
değeri block
ise
inline-block
, list-item
, table-caption
veya table-cell
.
p::first-line {
color: goldenrod;
font-weight: bold;
}
::first-letter
sözde öğesi gibi,
kullanabileceğiniz yalnızca bir CSS özelliği alt kümesi vardır:
color
background
tesisfont
tesistext
tesis
::backdrop
Tam ekran modunda sunulan bir öğeniz varsa
<dialog>
veya <video>
gibi
arka planı (öğe ile sayfanın geri kalanı arasındaki boşluk)
::backdrop
sözde öğe:
video::backdrop {
background-color: goldenrod;
}
::marker
::marker
sözde öğe, bir liste öğesi için madde işaretini veya numarayı biçimlendirmenizi ya da bir <summary>
öğesinin okunu biçimlendirmenizi sağlar.
::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 kümesi desteklenir:
color
content
white-space
font
tesisanimation
vetransition
mülk
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 sembolü ayarlamak amacıyla kullanabilirsiniz.
::selection
::selection
sözde öğe, seçilen metnin görünümünü düzenlemenize olanak tanır.
::selection {
background: green;
color: white;
}
Bu sözde öğe, seçilen tüm metinleri 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
Form öğelerine yardımcı bir ipucu ekleyebilir,
örneğin, placeholder
özelliğine sahip <input>
.
::placeholder
sözde öğe, metnin stilini ayarlamanızı sağlar.
input::placeholder {
color: darkcyan;
}
::placeholder
, CSS kurallarının yalnızca bir alt kümesini destekler:
color
background
tesisfont
tesistext
tesis
::cue
Bu sözde öğe turunun sonuncusu
::cue
sözde öğe.
Bu, WebVTT ipuçlarının stilini belirlemenize olanak tanır.
Bunlar, <video>
öğesinin altyazılarıdır.
Ayrıca bir seçiciyi ::cue
,
Böylece başlığı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 elementler hakkındaki bilginizi test edin
Aşağıdakilerden hangisi sözde öğe değildir?
::first-paragraph
::marker
:active
::pencil
::before
::after
Sözde öğeler, HTML dosyasında bulunabilir.