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.

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

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

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