Sözde öğeler

İçerik makaleniz ve ilk harfinin çok daha büyük olmasını istiyorsanız bunu nasıl başarabilirsiniz?

Mavi renkte başlık içeren birkaç paragraflık metin

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.

ziyaret edin.

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

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

  • Chrome: 57..
  • Kenar: 79..
  • Firefox: 51..
  • Safari: 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.

::cue

Tarayıcı Desteği

  • Chrome: 26..
  • Kenar: 79..
  • Firefox: 55..
  • Safari: 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?

::pencil
::after
::before
:active
::marker
::first-paragraph

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

Yanlış
Doğru