Sözde öğeler

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.

Anahtar terim: Adlandırılmış bir sayaç oluşturabilir ve ardından doküman akışındaki konumuna göre bunu artırabilirsiniz. Bir ana hatları otomatik olarak numaralandırma gibi çok yararlı olabilecek her türlü bağlam vardır.

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

ziyaret edin.

: input[type="checkbox"] istisnadır. Sözde öğe alt öğelerine sahip olmasına izin verilir.

::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 ve font-weight gibi)
• metin özellikleri (text-decoration ve word-spacing gibi)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

ziyaret edin.

Not: Blok kapsayıcılarda yalnızca :first-letter kullanabilirsiniz. Dolayısıyla, display: inline içeren bir öğeye eklemeye çalışırsanız işe yaramaz.

::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 tesis
• font tesis
• text 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 tesis
• animation ve transition 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 ancak background-image değil
• text tesis

::placeholder

Tarayıcı Desteği

• . 57
• . 79
• . 51)
• . 10.1

Kaynak

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 tesis
• font tesis
• text tesis

ziyaret edin.

Not: placeholder, <label> değildir ve <label> yerine kullanılmamalıdır. Form öğeleri etiketlenmemelidir. Aksi takdirde bu öğelere erişilemez.

::cue

Tarayıcı Desteği

• . 26
• . 79
• . 55
• . 7

Kaynak

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?

::before

content: ''; eklemeyi unutmayın.

::first-paragraph

Bu CSS'de yoktur.

::after

content: ''; eklemeyi unutmayın.

::marker

Bu, liste öğesi veya görüntüleme türü kullandığınızda madde işareti öğesidir.

::pencil

Bu CSS'de yoktur.

:active

Bu, sözde öğe değil, sözde sınıftır.

Sözde öğeler, HTML dosyasında bulunabilir.

Doğru

Geliştirici Araçları, Öğeler panelinde sözde öğeler gösterebilir ancak sözde öğeler HTML'de bulunmaz ancak tarayıcıya aittir.

Yanlış

CSS tarafından hedeflenebilir ancak HTML'de bulunamazlar.