CSS Academy · Ders

::placeholder ::selection ve ::marker

Sözde ögelerle input yer tutucularını, metin seçimlerini ve liste işareti madde imlerini biçimlendirin.

::placeholder ::selection ve ::marker, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

::placeholder

::placeholder, form girdi ve metin alanı öğelerinin içindeki yer tutucu metni biçimlendirir. Yalnızca CSS özelliklerinin bir alt kümesi desteklenir.

<input type="text" placeholder="Type your name…" />

Desteklenen ::placeholder Özellikleri

Tüm CSS özellikleri ::placeholder üzerinde çalışmaz. Desteklenen özellikler arasında color, font-size, font-weight, font-style, letter-spacing, opacity ve birkaç özellik daha bulunur. Düzen özellikleri desteklenmez.

Yer Tutucu Erişilebilirliği

Yer tutucu metni, kullanıcılar yazmaya başladığında kaybolur ve <label> öğelerinin yerine kullanılmamalıdır. Form alanları için her zaman görünür etiketler sağlayın. Yer tutucu metninin kontrastı da WCAG 4.5:1 oranını karşılamalıdır.

::selection

::selection, kullanıcının imleçle vurguladığı metni biçimlendirir. Markaya uygun seçim renkleri oluşturmanızı sağlar.

<p>Select this text with your cursor to see the branded highlight color.</p>

::selection Tarafından Desteklenen Özellikler

::selection ile yalnızca birkaç özellik çalışır: color, background-color, text-shadow ve text-decoration. Diğerleri yok sayılır.

::marker

::marker, liste öğesi işaretleyicisini; yani <ul> ve <ol> listelerindeki madde imini veya numarayı biçimlendirir.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

::marker Tarafından Desteklenen Özellikler

Desteklenen ::marker özellikleri arasında color, content, font-size, font-family, font-weight, font-style ve unicode-bidi bulunur.

::marker ile Özel Liste İşaretleyicileri

Liste işaretleyicileri olarak emoji veya özel karakterler kullanın:

<ul>
  <li>Normal item</li>
  <li class="warning">Warning item</li>
</ul>

::first-line

::first-line, bir blok öğesinin oluşturulan ilk satırını, yani HTML'deki ilk satır sonunu değil gerçekten oluşturulduğu biçimdeki satırı biçimlendirir. İlk harfi büyük olan giriş paragrafı biçimlendirmesi için kullanışlıdır.

<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>

::first-letter

::first-letter, ilk biçimlendirilmiş satırın ilk harfini hedefler. Klasik kullanım alanı, dergi tarzı tipografide büyük başlangıç harfleridir.

<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>

Alt Yazı Biçimlendirme için ::cue

::cue, HTML <video> öğelerindeki VTT alt yazılarını biçimlendirir; erişilebilir medya için özel ancak önemli bir sözde öğedir.

<p style="color:#888;">::cue styles VTT subtitle text inside a &lt;video&gt; element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>

Hızlı Kontrol

Bir liste öğesinin madde imini veya numarasını hangi sözde öğe biçimlendirmenizi sağlar?

Özet

::placeholder, girdi yer tutucu metnini biçimlendirir. ::selection, vurgulanan metni biçimlendirir. ::marker, liste madde imlerini ve numaralarını biçimlendirir. ::first-letter ve ::first-line, tipografik ince ayar yapmayı sağlar. Bunların tümü yalnızca sınırlı sayıda CSS özelliğini destekler.

Sıkça Sorulan Sorular

“::placeholder ::selection ve ::marker” dersi ücretsiz mi?

Evet — “::placeholder ::selection ve ::marker” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“::placeholder ::selection ve ::marker” dersinde ne öğreneceğim?

Sözde ögelerle input yer tutucularını, metin seçimlerini ve liste işareti madde imlerini biçimlendirin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“::placeholder ::selection ve ::marker” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön